Using showOutsideDays to false in calendar shifts the days to start of the row

[iqbalio]

When we use showOutsideDays to false on the Calendar component, It hides the outside days but due to the custom styling of shadcn UI, It shifts the available days to the start of the row.

You can see highlighted areas in the image.

[Felipe-53]

I can confirm this bug. Having the same issue!

[T832250-SPARK]

I am having the same issue but I managed to make it aligned by giving the fixed day cell width. The issue is caused because the cell width is going to 0px when showOutsideDays = false. So I added the following className to the Calendar component. This is a temporary hack but I would be grateful if this issue is fixed in the component level. Thanks

<Calendar
            mode="range"
            defaultMonth={field.value?.from}
            selected={field.value}
            onSelect={field.onChange}
            numberOfMonths={2}
            showOutsideDays={false}
            classNames={{
              cell: "w-[36px] text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20" 
            }}
          />

[meetshukla]

I can confirm this bug aswell

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[alexzbs]

The bug is still there

[DevExplotel]

Same bug, this style fixes it for me.

// Set cell min width
<Calendar  styles={ {cell: { minWidth: "32px" } } } />

[rishabhsxn]

Is this still not fixed?