BlazorFluentUI V5.6.1.0
View BlazorFluentUI GitHub repo

Calendar

Overview

The calendar control lets people select and view a single date or a range of dates in their calendar. It’s made up of 3 separate views: the month view, year view, and decade view.

Usage

Calendar
Selected date: Thursday, November 21, 2024
November 2024
2024
Selected date: @(calendar1Value != null ? ((DateTime)calendar1Value).ToString("D") : "-")
<Calendar @bind-Value=@calendar1Value />
Calendar with overlaid month picker when header is clicked
Selected date: Thursday, November 21, 2024
Calendar Date range:
November 2024
Selected date: @(calendar1Value != null ? ((DateTime)calendar1Value).ToString("D") : "-")
<br />
Calendar Date range: @(calendar1Range != null && calendar1Range.Count > 0 ? calendar1Range.Min().ToString("D") + " - " + calendar1Range.Max().ToString("D") : "")

<Calendar @bind-Value=@calendar1Value @bind-Range=@calendar1Range ShowMonthPickerAsOverlay="true" HighlightSelectedMonth="true" />
Calendar with week selection
Selected date: Thursday, November 21, 2024
Selected range:
November 2024
2024
Selected date: @(calendar2Value != null ? ((DateTime)calendar2Value).ToString("D") : "-")
<br />
Selected range: @(calendar2Range != null && calendar2Range.Count > 0 ? calendar2Range.Min().ToString("D") + " - " + calendar2Range.Max().ToString("D") : "")
<Calendar DateRangeType="DateRangeType.Week" @bind-Value="calendar2Value" @bind-Range="calendar2Range" HighlightSelectedMonth="true" />
Calendar with month selection
Selected date: Thursday, November 21, 2024
Selected range:
November 2024
2024
Selected date: @(calendar3Value != null ? ((DateTime)calendar3Value).ToString("D") : "-")
<br />
Selected range: @(calendar3Range != null && calendar3Range.Count > 0 ? calendar3Range.Min().ToString("D") + " - " + calendar3Range.Max().ToString("D") : "")

<Calendar DateRangeType="DateRangeType.Month" @bind-Value="calendar3Value" @bind-Range="calendar3Range" HighlightSelectedMonth="true" />
Calendar with week numbers
Selected date: Thursday, November 21, 2024
November 2024
2024
Selected date: @(calendar4Value != null ? ((DateTime)calendar4Value).ToString("D") : "-")
<br />
<Calendar @bind-Value="calendar4Value" HighlightSelectedMonth="true" ShowWeekNumbers="true" />
Calendar displaying 6 weeks
Selected date:Thursday, November 21, 2024
November 2024
2024
Selected date:@(calendar4Value != null ? ((DateTime)calendar4Value).ToString("D") : "-")
<br />
<Calendar @bind-Value="calendar4Value" HighlightSelectedMonth="true" ShowSixWeeksByDefault="true" />
Calendar with month picker and no day picker
Selected date: Thursday, November 21, 2024
2024
Selected date: @(calendar4Value != null ? ((DateTime)calendar4Value).ToString("D") : "-")
<br />
<Calendar @bind-Value="calendar4Value" DateRangeType="DateRangeType.Month" HighlightSelectedMonth="true" IsDayPickerVisible="false" />
Calendar date boundary and disabled dates
Selected date:Thursday, November 21, 2024
Date boundary: Sunday, September 22, 2024 - Monday, January 20, 2025
Disabled dates: 11/25/2024, 11/26/2024
November 2024
2024
Selected date:@(calendar5Value != null ? ((DateTime)calendar5Value).ToString("D") : "-")
<br />
Date boundary: @(((DateTime)minDate).ToString("D")) - @(((DateTime)maxDate).ToString("D"))
<br />
Disabled dates: @(restrictedDates != null ? string.Join(", ", restrictedDates.Select(x => x.ToShortDateString())) : "")
<br />
<Calendar @bind-Value="calendar5Value" MinDate="(DateTime)minDate" MaxDate="(DateTime)maxDate" RestrictedDates="restrictedDates" HighlightSelectedMonth="true" />
Calendar with custom selectable days
Selected date: Thursday, November 21, 2024
Selected range:
November 2024
2024
Selected date: @(calendar4Value != null ? ((DateTime)calendar4Value).ToString("D") : "-")
<br />
Selected range: @(calendar4Range != null && calendar4Range.Count > 0 ? calendar4Range.Min().ToString("D") + " - " + calendar4Range.Max().ToString("D") : "")
<br />
<Calendar @bind-Value="calendar4Value" DateRangeType="DateRangeType.WorkWeek" WorkWeekDays="workWeekDays" @bind-Range="calendar4Range" HighlightSelectedMonth="true" />
Calendar with custom selectable days, week starting on Monday
Selected date: Thursday, November 21, 2024
Selected range:
November 2024
2024
Selected date: @(calendar4Value != null ? ((DateTime)calendar4Value).ToString("D") : "-")
<br />
Selected range: @(calendar4Range != null && calendar4Range.Count > 0 ? calendar4Range.Min().ToString("D") + " - " + calendar4Range.Max().ToString("D") : "")
<br />
<Calendar @bind-Value="calendar4Value" DateRangeType="DateRangeType.WorkWeek" WorkWeekDays="workWeekDays" FirstDayOfWeek="DayOfWeek.Monday" @bind-Range="calendar4Range" HighlightSelectedMonth="true" />
Calendar with Blazor Forms Validation
November 2024
<EditForm Model=@exampleModel OnValidSubmit=@HandleValidSubmit>
    <DataAnnotationsValidator />
    <FluentUIValidationSummary />
    <Calendar @bind-Value=@exampleModel.DateTime @bind-Range=@calendar1Range ShowMonthPickerAsOverlay="true" />
    <SubmitButton Text="Submit" />
</EditForm>
Calendar launched from a button

<DefaultButton OnClick=ClickHandler @ref="buttonContainerRef"
               Text=@(calendar6Value == null ? "Click for Calendar" : ((DateTime)calendar6Value).ToString("D")) />

@if (!calloutHidden)
{
    <Callout IsBeakVisible="false"
             GapSpace="0"
             DoNotLayer="false"
             FabricComponentTarget="@buttonContainerRef"
             DirectionalHint=DirectionalHint.BottomLeftEdge
             SetInitialFocus="true"
             OnDismiss=@DismissHandler>
        <FocusTrapZone IsClickableOutsideFocusTrap="true">
            <Calendar @bind-Value="calendar6Value"
      IsMonthPickerVisible="true"
      HighlightCurrentMonth="true"
      IsDayPickerVisible="true"
      ShowGoToToday="true"
      OnDismiss=@DismissHandler
      OnSelectDate="@DismissHandler"/>
        </FocusTrapZone>
    </Callout>
}