shadcn-ui
Using showOutsideDays to false in calendar shifts the days to start of the row
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.
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"
}}
/>
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.
