Feature Request: Support for Multiple Date States in Datepicker/Calendar

[loomy2021]

Description

This feature proposal introduces the ability to visually distinguish different date states (such as arrival, vacation, and departure) in the FluxUI Datepicker/Calendar component. This functionality would be particularly useful for booking systems, event planners, and scheduling apps, where different date categories need clear visual separation.

Motivation

Currently, the Datepicker/Calendar component supports date selection but lacks the capability to represent various date categories with distinct visual cues. Adding support for multiple date states would:

Improve user experience by providing clear visual markers for important dates.
Expand the range of use cases for the calendar, particularly for booking and reservation systems.
Allow developers to customize date styling based on specific use cases.
Proposed Solution
Add a prop (e.g., dateStates) that accepts an object with dates categorized by type, for example:

{
  arrival: [new Date(2025, 1, 25)],
  vacation: [new Date(2025, 1, 26), new Date(2025, 1, 27), new Date(2025, 1, 28)],
  departure: [new Date(2025, 1, 29)]
}

Each category would be associated with a specific visual style:
Arrival: Blue background
Vacation: Green background
Departure: Red border

The developer could also provide custom styling classes for each category through props.

Example Usage

<flux-calendar
  :date-states="{
    arrival: [new Date(2025, 1, 25)],
    vacation: [new Date(2025, 1, 26), new Date(2025, 1, 27), new Date(2025, 1, 28)],
    departure: [new Date(2025, 1, 29)]
  }"
/>

Benefits

Provides greater flexibility for developers
Enhances UX by making important dates visually distinct
Opens up new use cases for the FluxUI Calendar component

Additional Context

This request emerged from a booking page implementation where users need to differentiate arrival, vacation, and departure dates visually. Having this built into the core component would simplify development and improve usability.

Thank you for your consideration and for your amazing work on FluxUI!