[Bug]: Datepicker light mode - CSS issues

[valh1996]

Environment

Developement OS: MacOS Sonoma 14.1.2
Node version: 20.10.0
Package manager: pnpm@8.11.0
Radix Vue version: 1.2.4
Shadcn Vue version: 0.8.6
Vue version: 3.3.11
@inertiajs/vue3: 1.0.14

Link to minimal reproduction

https://stackblitz.com/edit/tdkd3r-vmywib

Steps to reproduce

Use the Datepicker in range mode like in the documentation: https://www.shadcn-vue.com/docs/components/date-picker.html

Describe the bug

If the range is a complete week, it's working as expected:

On the other hand, when it's a day in the middle of the week or overlaps several weeks, the gray background behind is not rounded for the start and end dates:

Expected behavior

No response

Conext & Screenshots (if applicable)

No response

[valh1996]

I tried to find an alternative, but this one seems tricky.

Indeed, it's difficult to select the start and end date of the range using CSS selectors to apply left or right rounding as required.

We soon realize that there are 3 state classes to help us:

• .vc-highlight-content-light for base dates in range
• .vc-highlight-content-outline for range start and end dates, but when end date is not yet active, just hovered
• .vc-highlight-content-solid for range start and end activated dates

The problem is that these states are on child nodes that represent days (.vc-day), which have different parents since they are grouped by a parent node per week (.vc-weeks).

This is why I can't select the range start date and end date with separate selectors.

So my other solution was to try using the #day-content slot of VCalendar to add a particular class for the first and last day:

• is-range-start
• is-range-end

Then I added these css:

.calendar .vc-day:has(.vc-highlights):has(.is-range-start:not(.vc-highlight-content-light)) {
  @apply rounded-l-md;
}
.calendar .vc-day:has(.vc-highlights):has(.is-range-end:not(.vc-highlight-content-light)) {
  @apply rounded-r-md;
}

This only works partially, as the classes are only updated when the end of the range has also been selected.

cc @sadeghbarati @zernonia I'd appreciate a little help on this one pls ^^

[sadeghbarati]

@valh1996

Can you share a individual stackblitz demo just about Calendar with your applied changes?

[valh1996]

~ Sure @sadeghbarati : link removed (The proposed solution was bad)
As you can see, it works as soon as I select an end date for the range, but if I only select the start date, the edges are not rounded.

[valh1996]

@sadeghbarati, I finally took 30 minutes to reread the source code of the base component (VCalendar) and discovered that a child div and classes to find out the start/end of the range already existed:

.vc-highlight-base-start
.vc-highlight-base-middle
.vc-highlight-base-end

So I've just added a PR #251 that fix the CSS issues with minimal code