Calendar

The Calendar component provides a visual calendar interface for selecting dates with support for single date, date ranges, and multiple date selections.

Basic Usage

<Calendar SelectedDate="@selectedDate" SelectedDateChanged="@HandleDateChanged" />

@code {
    private DateTime? selectedDate;

    private void HandleDateChanged(DateTime date)
    {
        selectedDate = date;
    }
}

Single Date Selection

<Calendar SelectedDate="@date" SelectedDateChanged="@HandleDateChanged" />

@code {
    private DateTime? date = DateTime.Today;

    private void HandleDateChanged(DateTime date)
    {
        this.date = date;
    }
}

Or with two-way binding:

<Calendar @bind-SelectedDate="date" />

@code {
    private DateTime? date = DateTime.Today;
}

With Date Picker

Combine calendar with a date picker input:

<Button Variant="outline" OnClick="() => showCalendar = !showCalendar">
  @(selectedDate?.ToString("MM/dd/yyyy") ?? "Pick a date")
</Button>

@if (showCalendar)
{
  <div class="absolute z-50 mt-2">
    <Calendar SelectedDate="@selectedDate" SelectedDateChanged="@HandleDateChanged" />
  </div>
}

@code {
    private bool showCalendar = false;
    private DateTime? selectedDate;

    private void HandleDateChanged(DateTime date)
    {
        selectedDate = date;
        showCalendar = false;
    }
}

Date Range Restrictions

Restrict selectable date ranges:

<Calendar 
  SelectedDate="@date"
  SelectedDateChanged="@HandleDateChanged"
  MinDate="DateTime.Today"
  MaxDate="DateTime.Today.AddMonths(3)" />

@code {
    private DateTime? date;

    private void HandleDateChanged(DateTime date)
    {
        this.date = date;
    }
}

API Reference

Property	Type	Default	Description
`SelectedDate`	`DateTime?`	`null`	Selected date
`MinDate`	`DateTime?`	`null`	Minimum selectable date
`MaxDate`	`DateTime?`	`null`	Maximum selectable date

Events

SelectedDateChanged - EventCallback<DateTime> fired when date is selected
@bind-SelectedDate - Two-way binding for selected date

Accessibility

The Calendar component includes:

Keyboard navigation (Arrow keys, Page Up/Down, Home, End)
Proper ARIA attributes
Screen reader support
Focus management

Installation

shellui add calendar

Calendar

On this page