search

uvarov-frontend / vanilla-calendar-pro

The Vanilla Calendar Pro is a versatile JavaScript date and time picker component with TypeScript support, making it compatible with any JavaScript frameworks and libraries. It is designed to be lightweight, easy to use, and feature-rich, without relying on external dependencies.
https://vanilla-calendar.pro
Other
482 stars 60 forks source link

`daySelectedFirst` not applied to ranges (only globally) #313

Closed johanrd closed 1 month ago

johanrd commented 1 month ago

Issue:

When having multiple selected periods, I'd expect the first and last of each range to be rounded:

Actual Expected
Screenshot 2024-10-22 at 15 03 24 Screenshot 2024-10-22 at 15 04 39

Proposed solution 1:

Apply daySelectedFirst and daySelectedLast to all ranges, not only the first and last (globally)

Proposed solution 2:

Add separate daySelectedFirstInRange and daySelectedLastInRange settings

Current workaround:

For styling purposes, you could always do some css-fighting like this, but it is not very elegant:

.vanilla-calendar-day_selected-first .vanilla-calendar-day__btn_selected,
.vanilla-calendar-day:not(.vanilla-calendar-day_selected-intermediate):not(.vanilla-calendar-day_selected-first) + .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected
 {
  border-top-left-radius: .5rem !important;
  border-bottom-left-radius: .5rem !important;
}

.vanilla-calendar-day_selected-first:has(+ .vanilla-calendar-day:not(.vanilla-calendar-day_selected-intermediate)) .vanilla-calendar-day__btn_selected,
.vanilla-calendar-day_selected-intermediate:has(+ .vanilla-calendar-day:not(.vanilla-calendar-day_selected-intermediate)) .vanilla-calendar-day__btn_selected
{
  border-top-right-radius: .5rem !important;
  border-bottom-right-radius: .5rem !important;
}
uvarov-frontend commented 1 month ago

Oh, it would be great to use the second option, since implementing such decorative things through js is not optimal. We can add a catch to support the new :has, this will work in modern browsers, thanks for the idea.

uvarov-frontend commented 1 month ago

Fixed in v3.0.0 #293