[FluentCalendar] Select multiple dates and range of dates

[dvoituron]

[FluentCalendar] Select multiple dates and range of dates

We're thinking of adding a SelectMode property so that the user can select a range of dates CalendarSelectMode.Range or a discontinuous list of dates CalendarSelectMode.Multiple.

Initially, this feature will only be available for the FluentCalendar with View=Days.

A new bindable property SelectedDates will retrieve these dates, rendering the existing Value property useless in these SelectModes only.

Added a SelectDatesHover method that returns a list of dates to be pre-selected (hover) and activated when the user clicks on this selection. This allows you to manage choices such as selecting an entire week, with a single mouse click. Or selecting 3 days automatically, with a single click.

The @bind-SelectedDates:after command can be used to validate the content of selected dates, block or remove them if necessary, or even display an error message.

Example

<FluentCalendar @bind-SelectedDates="@SelectedRangeCustomized"
                SelectDatesHover="@SelectOneWeek"
                SelectMode="CalendarSelectMode.Range" />

<FluentCalendar @bind-SelectedDates="@SelectedDaysCustomized"
                SelectDatesHover="@Select3Days"
                SelectMode="CalendarSelectMode.Multiple" />

@code
{
    private ICollection<DateTime> SelectedRangeCustomized = new List<DateTime>();
    private ICollection<DateTime> SelectedDaysCustomized = new List<DateTime>();

    private IEnumerable<DateTime> SelectOneWeek(DateTime date)
    {
        return new[] { date.StartOfWeek(), date.StartOfWeek().AddDays(6) };
    }

    private IEnumerable<DateTime> Select3Days(DateTime date)
    {
        return Enumerable.Range(0, 3).Select(i => date.AddDays(i));
    }
}

[EDIT] 2024-06-10: Adding SelectDatesHover function to customize the hover effect (dates will be selected) and many samples.

[hksalessio]

I absolutely love, what this library is becoming! I hope you continue the great work!

[oneolddev]

On SelectMode.Multiple, it would be nice to be able to be notified each time a date is selected. The use case I'm thinking of, is for example limiting the user to selecting only 4 dates.

Looking forward to seeing it.

[dvoituron]

SelectedDates will be bindable. So you will have the event SelectedDatesChanged. But I thought to include a property like "Maximum of number dates" 😊

[dvoituron]

I added some new samples, based on a new SelectDatesHover method.

[Rocky-25]

It'd be good if this can be done via a date picker too so the calendar doesn't always have to be displayed and taking up space on the page.

[vnbaaij]

The date picker, by default, only allows for selecting 1 date

[Rocky-25]

The calendar can have a single date (Value) or multiple (SelectedDates) so couldn't the same functionality be done to the date picker?
Does the Date picker not use the calendar component as part of it?

[vnbaaij]

It is not about the calendar. That supports multiple dates indeed. it is about the (text field in the) picker. That one, by default, displays a single date.