Home

Calendar

Previous Next

Displays the Calendar component.

Mar
2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
@code {
    private DateOnly? date = DateOnly.FromDateTime(DateTime.Today);
}

<Calendar Mode="CalendarMode.Single"
          Selected="@date"
          SelectedChanged="value => date = value"
          CaptionLayout="CalendarCaptionLayout.Dropdown"
          Class="rounded-md border shadow-sm" />

Installation

Install the calendar component using the command or manual steps.

blazor-shadcn add calendar

Usage

@using BlazorShadcn.Components.UI
@code {
    private DateOnly? date = DateOnly.FromDateTime(DateTime.Today);
}

<Calendar Mode="CalendarMode.Single"
          Selected="@date"
          SelectedChanged="value => date = value"
          CaptionLayout="CalendarCaptionLayout.Dropdown"
          Class="rounded-md border shadow-sm" />