WickyNilliams/cally

Multiple values for CalendarDate

Closed this issue · 6 comments

CubaJas commented

Great idea select multiple values for calendar date component.

WickyNilliams commented

you mean a new component like <calendar-multi> or something?

CubaJas commented

you mean a new component like <calendar-multi> or something?

I think the prop value of the component can be string | string[] type and the new prop multiple for detect if someone wants pass array of dates. If multiple doesn't pass to the component and value has an array, component should work with the first item of array.

Like this:

<calendar-date
  value="arrayOfSelectedDays"
  multiple=""
  min="2024-01-01"
  max="2024-12-31"
  locale="en-GB"
>
WickyNilliams commented

I'll probably go for a new component tbh. They're different enough to warrant it, even if they share 90% of the code.

For context I started with range and single date being the same component, but they diverged enough over time that i split into individual components. I imagine the same would happen here eg maybe there's a a prop for max number of dates selectable, toggle events for when a day is selected/deselected, and so on

WickyNilliams commented

That said, I like the idea! I'll do it

  • 👍2
WickyNilliams commented

Got a little prototype working locally. Only around 50 lines, since most of the code is reused, apart from handling of arrays. Will probably get it published next week

Kapture.2024-04-18.at.19.56.25.mp4
  • 🎉3
  • ❤️3
WickyNilliams commented

Just published v0.6.0 which includes the <calendar-multi> component https://wicky.nillia.ms/cally/components/calendar-multi/