BitCalendar is a fully-featured inline calendar for browsing and selecting a single date, or a date and time when the built-in time picker is enabled. It offers day, month, and year views, day events with details, and flexible day/week rules such as disabled and highlighted dates, a custom first day of week, and week numbers. It works with any culture and time zone, including right-to-left and non-Gregorian calendars, and is fully keyboard accessible following the WAI-ARIA grid pattern.

ForceAnimation (whole page)

Usage

Basic

<BitCalendar />
<BitCalendar IsEnabled="false" />
<BitCalendar ShowWeekNumbers="true" />
<BitCalendar HighlightCurrentMonth="true" HighlightSelectedMonth="true" />
<BitCalendar ShowTimePicker="true" StartingValue="startingValue" />
<BitCalendar Today="customToday" />
<BitCalendar ShowGoToToday="false" />
@code {
    private DateTimeOffset? startingValue = new DateTimeOffset(2020, 12, 4, 20, 45, 0, DateTimeOffset.Now.Offset);
    private DateTimeOffset? customToday = new DateTimeOffset(2021, 3, 15, 0, 0, 0, DateTimeOffset.Now.Offset);
}

The essential BitCalendar configurations: the default calendar, the disabled state, week numbers, highlighting the current and selected months, starting the view on a specific date and time using StartingValue, overriding the current date using Today, and hiding the GoToToday button using ShowGoToToday.

Basic Calendar:

Selected date

August 2026

Disabled:

Selected date

August 2026

Week numbers:

Selected date

August 2026

Highlight months:

Selected date

August 2026

StartingValue: December 2020, Time: 20:45:

Selected date

Custom Today (March 2021):

Selected date

March 2021

Without the GoToToday button:

Selected date

August 2026

Min & Max

<BitCalendar MinDate="DateTimeOffset.Now.AddDays(-5)" MaxDate="DateTimeOffset.Now.AddDays(5)" />
<BitCalendar MinDate="DateTimeOffset.Now.AddMonths(-2)" MaxDate="DateTimeOffset.Now.AddMonths(1)" />
<BitCalendar MinDate="DateTimeOffset.Now.AddYears(-5)" MaxDate="DateTimeOffset.Now.AddYears(1)" />

Limit the selectable dates using MinDate and MaxDate. Days outside the range are disabled, and the month, year, and year-range navigation stops at the boundaries.

Min: Now.AddDays(-5)

Max: Now.AddDays(+5)

Selected date

August 2026

Min: Now.AddMonths(-2)

Max: Now.AddMonths(+1)

Selected date

August 2026

Min: Now.AddYears(-5)

Max: Now.AddYears(+1)

Selected date

August 2026

Hour/Minute step

<BitCalendar ShowTimePicker="true" HourStep="2" />
<BitCalendar ShowTimePicker="true" MinuteStep="15" />

Customize the increment/decrement step of the time picker's hour and minute buttons using HourStep and MinuteStep.

HourStep = 2:

Selected date

MinuteStep = 15:

Selected date

Culture

<BitCalendar GoToTodayTitle="برو به امروز" Culture="CultureInfoHelper.GetFaIrCultureWithFarsiNames()" />
<BitCalendar GoToTodayTitle="Boro be emrouz" Culture="CultureInfoHelper.GetFaIrCultureWithFingilishNames()" />

By default, BitCalendar uses the current culture of the app, but any custom CultureInfo can be provided to fully localize the calendar: month and day names, the first day of the week, date formats, and even non-Gregorian calendars such as the Persian calendar.
You also can use our CultureInfoHelper class or check its code to see how to create a custom culture.

fa-IR culture with Farsi names:

Selected date

مرداد 1405

fa-IR culture with Fingilish names:

Selected date

Mordad 1405

TimeZone

<BitCalendar @bind-Value="@timeZoneDate1" ShowTimePicker />
<div>Selected date: @timeZoneDate1?.ToString()</div>

@{
    TimeZoneInfo? timeZoneInfo = null;
    var allTimeZones = TimeZoneInfo.GetSystemTimeZones();
    if (allTimeZones.Count > 0)
    {
        timeZoneInfo = allTimeZones[0];
    }
}
@if (timeZoneInfo is not null) {
    <div>"@timeZoneInfo.Id" TimeZone:</div><br/>
    <BitCalendar TimeZone="timeZoneInfo" @bind-Value="@timeZoneDate2" ShowTimePicker />
    <div>Selected date: @timeZoneDate2?.ToString()</div>
}
@code {
    private DateTimeOffset? timeZoneDate1;
    private DateTimeOffset? timeZoneDate2;
}

Specify the TimeZone used to interpret and display the selected date and time.
Keep in mind that the available time zone data differs between runtimes; it depends on the OS the code is running on and on the project settings (like InvariantTimezone in the project file, more info).

Default (local TimeZone):

Selected date

Selected date:

"Dateline Standard Time" TimeZone:

Selected date

Selected date:

Binding

<BitCalendar @bind-Value="@selectedDate" />
<div>Selected date: @selectedDate.ToString()</div>

<BitCalendar OnSelectDate="HandleOnSelectDate" />
<div>Selected date: @(onSelectDate.HasValue ? onSelectDate.ToString() : "-")</div>
@code {
    private DateTimeOffset? selectedDate = new DateTimeOffset(2023, 8, 19, 0, 0, 0, DateTimeOffset.Now.Offset);
    
    private DateTimeOffset? onSelectDate;
    
    private void HandleOnSelectDate(DateTimeOffset? date)
    {
        onSelectDate = date;
    }
}

Two-way bind the selected date using @bind-Value to keep your model and the calendar in sync, or listen to the OnSelectDate event to react to every selection.

Two-way binding:

Selected date 8/19/2023

August 2023

Selected date: 8/19/2023 12:00:00 AM +02:00

OnSelectDate:

Selected date

August 2026

Selected date: -

ReadOnly

<BitCalendar ReadOnly @bind-Value="readOnlyDate" />
<BitCalendar ReadOnly ShowTimePicker @bind-Value="readOnlyDate" />
@code {
    private DateTimeOffset? readOnlyDate = DateTimeOffset.Now;
}

The ReadOnly parameter displays the calendar in a read-only manner: the value stays visible and the calendar can still be browsed, but the selected date and time cannot be changed.

Selected date 8/1/2026

August 2026

Selected date 8/1/2026

MonthPicker

<BitCalendar ShowMonthPicker="@showMonthPicker" />
<BitToggleButton OnText="MonthPicker visible" OffText="MonthPicker invisible" @bind-IsChecked="@showMonthPicker" />

<BitCalendar ShowMonthPickerAsOverlay="@showMonthPickerAsOverlay" />
<BitToggleButton OnText="Position Overlay" OffText="Position Besides" @bind-IsChecked="@showMonthPickerAsOverlay" />
@code {
    private bool showMonthPicker = true;
    private bool showMonthPickerAsOverlay;
}

Control the month and year pickers: toggle their visibility using ShowMonthPicker, or render them as an overlay on top of the day picker using ShowMonthPickerAsOverlay.

ShowMonthPicker:

Selected date

August 2026

ShowMonthPickerAsOverlay:

Selected date

August 2026

TimePicker

<BitCalendar @bind-Value="@selectedDateTime" ShowTimePicker="true" />
<div>Selected DateTime: @selectedDateTime.ToString()</div>

<BitCalendar ShowTimePicker TimeFormat="BitTimeFormat.TwelveHours" />

<BitCalendar ShowTimePicker ShowTimePickerAsOverlay />

<BitCalendar ShowTimePicker ShowGoToNow="false" />
@code {
    private DateTimeOffset? selectedDateTime = DateTimeOffset.Now;
}

Enable the built-in time picker using ShowTimePicker to let users select the time of day along with the date. Switch between the 24-hour and 12-hour clocks using TimeFormat, render the time picker as an overlay using ShowTimePickerAsOverlay, and hide the GoToNow button using ShowGoToNow.

Basic time picker (24-hour):

Selected date 8/1/2026

Selected DateTime: 8/1/2026 11:39:56 AM +02:00

TimeFormat (12-hour with AM/PM):

Selected date

ShowTimePickerAsOverlay (toggle it using the clock button):

Selected date

August 2026

Without the GoToNow button:

Selected date

Events

<BitCalendar Events="@calendarEvents" />
@code {
    private List<BitCalendarEvent> calendarEvents =
    [
        new() { Title = "Team standup",
                Body = "Daily sync with the engineering team.",
                Date = DateOnly.FromDateTime(DateTime.Today),
                StartTime = new TimeOnly(9, 0),
                EndTime = new TimeOnly(9, 30) },
        new() { Title = "Product review",
                Body = "Quarterly product review \u2014 prepare slides beforehand.",
                Date = DateOnly.FromDateTime(DateTime.Today),
                StartTime = new TimeOnly(14, 0),
                EndTime = new TimeOnly(15, 0) },
        new() { Title = "All-day workshop",
                Body = "Full-day frontend architecture workshop.",
                Date = DateOnly.FromDateTime(DateTime.Today.AddDays(3)) },
        new() { Title = "Client call",
                Body = "Introductory call with the new client.",
                Date = DateOnly.FromDateTime(DateTime.Today.AddDays(7)),
                StartTime = new TimeOnly(11, 30) }
    ];
}

Attach events to calendar days using the Events parameter. Days with events show a colored indicator dot; hovering the day reveals a quick tooltip, and clicking it opens a modal listing the title, time, and description of each event of that day.

Selected date

August 2026

Validation

<style>
    .validation-message {
        color: red;
    }
</style>

<EditForm Model="validationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
    <DataAnnotationsValidator />

    <BitCalendar @bind-Value="validationModel.Date" />
    <ValidationMessage For="@(() => validationModel.Date)" />
    
    <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
    <BitButton ButtonType="BitButtonType.Reset" Variant="BitVariant.Outline"
               OnClick="() => { validationModel = new(); SuccessMessage=string.Empty; }">
        Reset
    </BitButton>
</EditForm>

@if (string.IsNullOrEmpty(SuccessMessage) is false)
{
    <BitMessage Color="BitColor.Success">@SuccessMessage</BitMessage>
}
@code {
    public class BitCalendarValidationModel
    {
        [Required]
        public DateTimeOffset? Date { get; set; }
    }
    
    private string SuccessMessage = string.Empty;
    private BitCalendarValidationModel validationModel = new();
    
    private async Task HandleValidSubmit()
    {
        SuccessMessage = "Form was submitted successfully!";
        await Task.Delay(3000);
        SuccessMessage = string.Empty;
        StateHasChanged();
    }
    
    private void HandleInvalidSubmit()
    {
        SuccessMessage = string.Empty;
    }
}

Use BitCalendar inside an EditForm and validate the selected date with data annotations, just like any other input component.

Templates

<style>
    .day-cell {
        width: 28px;
        height: 28px;
        position: relative;
    }

    .weekend-cell {
        color: red;
    }

    .badge {
        top: 2px;
        right: 2px;
        width: 8px;
        height: 8px;
        position: absolute;
        border-radius: 50%;
        background-color: red;
    }

    .year-suffix {
        position: absolute;
        bottom: 10px;
        right: -12px;
        height: 12px;
        color: gray;
        font-size: 8px;
    }
</style>

<BitCalendar>
    <DayCellTemplate>
        <span class="day-cell@(context.DayOfWeek == DayOfWeek.Sunday ? " weekend-cell" : null)">
            @context.Day

            @if (context.Day % 5 is 0)
            {
                <span class="badge"></span>
            }
        </span>
    </DayCellTemplate>
</BitCalendar>

<BitCalendar>
    <MonthCellTemplate>
        <div style="width:28px;padding:3px;color:black;background:@(context.Month == 1 ? "lightcoral" : "yellowgreen")">
            @culture.DateTimeFormat.GetAbbreviatedMonthName(context.Month)
        </div>
    </MonthCellTemplate>
</BitCalendar>

<BitCalendar>
    <YearCellTemplate>
        <span style="position: relative">
            @context
            <span class="year-suffix">AC</span>
        </span>
    </YearCellTemplate>
</BitCalendar>

Take full control of the rendering using DayCellTemplate, MonthCellTemplate, and YearCellTemplate to customize the content of the day, month, and year cells.

DayCellTemplate:

Selected date

August 2026

MonthCellTemplate:

Selected date

August 2026

YearCellTemplate:

Selected date

August 2026

Disabled dates

<BitCalendar DisabledDaysOfWeek="@weekendDays" />

<BitCalendar DisabledDates="@disabledDates" />

<BitCalendar IsDateDisabled="@(d => d.Day % 2 == 1)" />
@code {
    private DayOfWeek[] weekendDays = [DayOfWeek.Saturday, DayOfWeek.Sunday];
    
    private DateTimeOffset[] disabledDates =
    [
        DateTimeOffset.Now.AddDays(1),
        DateTimeOffset.Now.AddDays(2),
        DateTimeOffset.Now.AddDays(5)
    ];
}

Disable specific dates beyond MinDate and MaxDate: pass an explicit list using DisabledDates, disable whole days of the week using DisabledDaysOfWeek (e.g. weekends), or provide any custom rule using the IsDateDisabled function. Disabled dates are not selectable and are skipped by the keyboard navigation.

DisabledDaysOfWeek (weekends are disabled):

Selected date

August 2026

DisabledDates (a few specific upcoming dates are disabled):

Selected date

August 2026

IsDateDisabled (every odd day of the month is disabled):

Selected date

August 2026

Highlighted dates

<style>
    .sunday-cell {
        color: red;
    }
</style>

<BitCalendar HighlightedDates="@highlightedDates" />

<BitCalendar GetDayClass="@(d => d.DayOfWeek == DayOfWeek.Sunday ? "sunday-cell" : null)" />
@code {
    private DateTimeOffset[] highlightedDates =
    [
        DateTimeOffset.Now.AddDays(3),
        DateTimeOffset.Now.AddDays(7),
        DateTimeOffset.Now.AddDays(14)
    ];
}

Mark important dates using HighlightedDates, or provide custom CSS classes for any day using the GetDayClass function.

HighlightedDates:

Selected date

August 2026

GetDayClass (Sundays get a custom color):

Selected date

August 2026

Week configuration

<BitCalendar FirstDayOfWeek="DayOfWeek.Monday" />

<BitCalendar ShowWeekNumbers WeekNumberRule="CalendarWeekRule.FirstFourDayWeek" FirstDayOfWeek="DayOfWeek.Monday" />

<BitCalendar ShowOutsideDays="false" />

<BitCalendar FixedWeeks />

Customize how weeks are rendered: override the first day of the week using FirstDayOfWeek, choose the week numbering rule using WeekNumberRule, hide the days of the adjacent months using ShowOutsideDays, and keep the calendar height fixed using FixedWeeks.

FirstDayOfWeek (Monday):

Selected date

August 2026

ISO 8601 week numbers (FirstFourDayWeek rule with Monday as the first day of the week):

Selected date

August 2026

ShowOutsideDays="false" (hides the days of the previous and next months):

Selected date

August 2026

FixedWeeks (always renders six weeks to keep the height fixed):

Selected date

August 2026

OnMonthChange

<BitCalendar OnMonthChange="HandleOnMonthChange" />
<div>Displayed month: @(displayedMonth.HasValue ? displayedMonth.Value.ToString("MMMM yyyy") : "-")</div>
@code {
    private DateTimeOffset? displayedMonth;
    
    private void HandleOnMonthChange(DateTimeOffset month)
    {
        displayedMonth = month;
    }
}

The OnMonthChange event fires whenever the displayed month changes (navigation buttons, month/year pickers, GoToToday, or keyboard navigation), receiving the first day of the newly displayed month. It is ideal for lazy-loading the events of the visible month.

Selected date

August 2026

Displayed month: -

Keyboard navigation

<BitCalendar />

BitCalendar fully supports keyboard navigation following the WAI-ARIA grid pattern. Focus a day using the Tab key, then:

← / →: previous/next day
↑ / ↓: same day of the previous/next week
Home / End: first/last day of the week
PageUp / PageDown: same day of the previous/next month
Shift+PageUp / Shift+PageDown: same day of the previous/next year
Enter / Space: select the focused day

Crossing a month boundary automatically navigates the calendar and keeps the focus on the day, and disabled days are skipped.

Selected date

August 2026

Color

<BitCalendar Color="BitColor.Primary" HighlightCurrentMonth />

<BitCalendar Color="BitColor.Secondary" HighlightCurrentMonth />

<BitCalendar Color="BitColor.Tertiary" HighlightCurrentMonth />

<BitCalendar Color="BitColor.Info" HighlightCurrentMonth />

<BitCalendar Color="BitColor.Success" HighlightCurrentMonth />

<BitCalendar Color="BitColor.Warning" HighlightCurrentMonth />

<BitCalendar Color="BitColor.SevereWarning" HighlightCurrentMonth />

<BitCalendar Color="BitColor.Error" HighlightCurrentMonth />

<BitCalendar Color="BitColor.PrimaryBackground" HighlightCurrentMonth />

<BitCalendar Color="BitColor.SecondaryBackground" HighlightCurrentMonth />

<BitCalendar Color="BitColor.TertiaryBackground" HighlightCurrentMonth />

<BitCalendar Color="BitColor.PrimaryForeground" HighlightCurrentMonth />

<BitCalendar Color="BitColor.SecondaryForeground" HighlightCurrentMonth />

<BitCalendar Color="BitColor.TertiaryForeground" HighlightCurrentMonth />

<BitCalendar Color="BitColor.PrimaryBorder" HighlightCurrentMonth />

<BitCalendar Color="BitColor.SecondaryBorder" HighlightCurrentMonth />

<BitCalendar Color="BitColor.TertiaryBorder" HighlightCurrentMonth />

Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.

Primary:

Selected date

August 2026

Secondary:

Selected date

August 2026

Tertiary:

Selected date

August 2026

Info:

Selected date

August 2026

Success:

Selected date

August 2026

Warning:

Selected date

August 2026

SevereWarning:

Selected date

August 2026

Error:

Selected date

August 2026

PrimaryBackground:

Selected date

August 2026

SecondaryBackground:

Selected date

August 2026

TertiaryBackground:

Selected date

August 2026

PrimaryForeground:

Selected date

August 2026

SecondaryForeground:

Selected date

August 2026

TertiaryForeground:

Selected date

August 2026

PrimaryBorder:

Selected date

August 2026

SecondaryBorder:

Selected date

August 2026

TertiaryBorder:

Selected date

August 2026

External Icons

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />

<BitCalendar GoToTodayIcon="@BitIconInfo.Fa("solid calendar-day")"
             PrevMonthNavIcon="@BitIconInfo.Fa("solid chevron-left")"
             NextMonthNavIcon="@BitIconInfo.Fa("solid chevron-right")" />


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />

<BitCalendar ShowTimePicker="true"
             GoToTodayIcon="@BitIconInfo.Bi("calendar-check")"
             GoToNowIcon="@BitIconInfo.Bi("clock")"
             PrevMonthNavIcon="@BitIconInfo.Bi("chevron-left")"
             NextMonthNavIcon="@BitIconInfo.Bi("chevron-right")"
             TimePickerIncreaseHourIcon="@BitIconInfo.Bi("chevron-up")"
             TimePickerDecreaseHourIcon="@BitIconInfo.Bi("chevron-down")"
             TimePickerIncreaseMinuteIcon="@BitIconInfo.Bi("chevron-up")"
             TimePickerDecreaseMinuteIcon="@BitIconInfo.Bi("chevron-down")" />

Use icons from external libraries like FontAwesome and Bootstrap Icons with the GoToTodayIcon, GoToNowIcon, PrevMonthNavIcon, NextMonthNavIcon, and other icon parameters.

For built-in icons use the IconName variant of each parameter (e.g. GoToTodayIconName).

The Icon parameters accept a BitIconInfo value, created via helpers like BitIconInfo.Fa(...), BitIconInfo.Bi(...), or BitIconInfo.Css(...).

FontAwesome icons:

Selected date

August 2026

Bootstrap icons (with ShowTimePicker):

Selected date

Style & Class

<style>
    .custom-class {
        margin: 1rem;
        background: #8a2be270;
        border-radius: 1rem;
        box-shadow: blueviolet 0 0 1rem;
    }


    .custom-root {
        margin: 1rem;
        border-radius: 0.5rem;
        background-color: #211e1b;
    }

    .custom-day-picker {
        border: 1px solid #e9981e;
        background-color: #211e1b;
        border-end-start-radius: 0.5rem;
        border-start-start-radius: 0.5rem;
    }

    .custom-day-month,
    .custom-next-month,
    .custom-prev-month {
        color: white;
    }

    .custom-day {
        color: #e9981e;
        margin: 0.15rem;
        border-radius: 50%;
        border: 1px solid #e9981e;
    }

    .custom-today-day {
        color: #211e1b;
        background-color: #e9981e;
    }

    .custom-week-header {
        color: white;
        margin: 0.15rem;
    }

    .custom-day-header {
        height: 2rem;
        color: white;
        margin: 0.15rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e9981e;
    }

    .custom-year-picker {
        border: 1px solid #211e1b;
        background-color: #e9981e;
        border-end-end-radius: 0.5rem;
        border-start-end-radius: 0.5rem;
    }
</style>


<BitCalendar Style="margin: 1rem; border-radius: 1rem; background: #a5104457;" />

<BitCalendar Class="custom-class" />


<BitCalendar ShowTimePicker="true"
             Styles="@(new() { Root = "margin: 1rem; border: 1px solid mediumseagreen; background: #1c73324d;",
                               Divider = "border-color: mediumseagreen;",
                               DayPickerMonth = "color: darkgreen;",
                               TodayDayButton = "background-color: green;",
                               SelectedDayButton = "background-color: limegreen;",
                               TimePickerIncreaseHourButton = "background-color: limegreen;",
                               TimePickerIncreaseMinuteButton = "background-color: limegreen;",
                               TimePickerDecreaseHourButton = "background-color: limegreen;",
                               TimePickerDecreaseMinuteButton = "background-color: limegreen;" })" />

<BitCalendar Classes="@(new() { Root = "custom-root",
                             DayPickerWrapper = "custom-day-picker",
                             DayButton = "custom-day",
                             TodayDayButton = "custom-today-day",
                             PrevMonthNavButton = "custom-prev-month",
                             NextMonthNavButton = "custom-next-month",
                             DayPickerMonth = "custom-day-month",
                             DayPickerHeader = "custom-day-header",
                             WeekNumbersHeader = "custom-week-header",
                             YearMonthPickerWrapper = "custom-year-picker" })" />

Customize the appearance of BitCalendar: use Style and Class on the root element, or target every individual part of the calendar using the Styles and Classes parameters.

Component's Style & Class:

Selected date

August 2026

Selected date

August 2026

Styles & Classes:

Selected date

August 2026

RTL

<BitCalendar Dir="BitDir.Rtl" />

Render BitCalendar in right-to-left (RTL) using the Dir parameter. Providing an RTL culture (like fa-IR) enables it automatically, and the keyboard navigation adapts to the direction as well.

Selected date

August 2026

API

BitCalendar parameters

Name	Type	Default value	Description
Classes	BitCalendarClassStyles	null	Custom CSS classes for different parts of the BitCalendar.
Color	BitColor?	null	The general color of the calendar that applies to the today day button, the highlighted current month, the selected AM/PM button, and the event indicators.
Culture	CultureInfo	System.Globalization.CultureInfo.CurrentUICulture	CultureInfo for the Calendar.
DateFormat	string?	null	The format of the date in the Calendar.
DayCellTemplate	RenderFragment<DateTimeOffset>?	null	Used to customize how content inside the day cell is rendered.
DisabledDates	IEnumerable<DateTimeOffset>?	null	The list of dates that are disabled (not selectable) in the calendar, in addition to MinDate and MaxDate.
DisabledDaysOfWeek	IEnumerable<DayOfWeek>?	null	The days of the week that are disabled (not selectable) in the calendar (e.g. weekends).
Events	IEnumerable<BitCalendarEvent>?	null	The list of events to display on calendar days. Days with events show an indicator dot that reveals a tooltip on hover and a detail modal on click.
EventTimeFromText	string	From	The text shown before the start time of an event when only a start time is present (e.g. "From 09:00"). Supports localization.
EventTimeUntilText	string	Until	The text shown before the end time of an event when only an end time is present (e.g. "Until 17:00"). Supports localization.
FirstDayOfWeek	DayOfWeek?	null	Overrides the first day of the week in the day picker. If not set, the first day of the week of the Culture is used.
FixedWeeks	bool	false	Whether the day picker should always render six weeks, filling the extra rows with the days of the adjacent months, to keep the calendar height fixed while navigating between months.
GetDayClass	Func<DateTimeOffset, string?>?	null	Custom function to provide additional CSS classes for each day button of the calendar.
GoToNextMonthTitle	string	Go to next month	The title of the Go to next month button (tooltip).
GoToNextYearRangeTitle	string	Next year range {0} - {1}	The title of the Go to next year range button (tooltip).
GoToNextYearTitle	string	Go to next year {0}	The title of the Go to next year button (tooltip).
GoToNowIcon	BitIconInfo?	null	Gets or sets the icon to display in the GoToNow button using custom CSS classes for external icon libraries. Takes precedence over GoToNowIconName when both are set.
GoToNowIconName	string?	null	Gets or sets the name of the icon to display in the GoToNow button from the built-in Fluent UI icons.
GoToNowTitle	string	Go to now	The title of the GoToNow button (tooltip).
GoToPrevMonthTitle	string	Go to previous month	The title of the Go to previous month button (tooltip).
GoToPrevYearRangeTitle	string	Previous year range {0} - {1}	The title of the Go to previous year range button (tooltip).
GoToPrevYearTitle	string	Go to previous year {0}	The title of the Go to previous year button (tooltip).
GoToTodayIcon	BitIconInfo?	null	Gets or sets the icon to display in the GoToToday button using custom CSS classes for external icon libraries. Takes precedence over GoToTodayIconName when both are set.
GoToTodayIconName	string?	null	Gets or sets the name of the icon to display in the GoToToday button from the built-in Fluent UI icons.
GoToTodayTitle	string	Go to today	The title of the GoToToday button (tooltip).
HideTimePickerIcon	BitIconInfo?	null	Gets or sets the icon to display in the HideTimePicker button using custom CSS classes for external icon libraries. Takes precedence over HideTimePickerIconName when both are set.
HideTimePickerIconName	string?	null	Gets or sets the name of the icon to display in the HideTimePicker button from the built-in Fluent UI icons.
HideTimePickerTitle	string	Hide time picker	The title of the HideTimePicker button (tooltip).
HighlightCurrentMonth	bool	false	Whether the month picker should highlight the current month.
HighlightedDates	IEnumerable<DateTimeOffset>?	null	The list of dates that are highlighted (marked) in the day picker.
HighlightSelectedMonth	bool	false	Whether the month picker should highlight the selected month.
HourStep	int	1	Determines increment/decrement steps for calendar's hour.
InvalidErrorMessage	string?	null	The custom validation error message for the invalid value.
IsDateDisabled	Func<DateTimeOffset, bool>?	null	Custom function to determine if a specific date is disabled (not selectable) in the calendar.
MaxDate	DateTimeOffset?	null	The maximum allowable date of the calendar.
MinDate	DateTimeOffset?	null	The minimum allowable date of the calendar.
MinuteStep	int	1	Determines increment/decrement steps for calendar's minute.
MonthCellTemplate	RenderFragment<DateTimeOffset>?	null	Used to customize how content inside the month cell is rendered.
MonthPickerToggleTitle	string	{0}, change month	The title of the month picker's toggle (tooltip).
NextMonthNavIcon	BitIconInfo?	null	Gets or sets the icon to display in the Go to next month button using custom CSS classes for external icon libraries. Takes precedence over NextMonthNavIconName when both are set.
NextMonthNavIconName	string?	null	Gets or sets the name of the icon to display in the Go to next month button from the built-in Fluent UI icons.
NextYearNavIcon	BitIconInfo?	null	Gets or sets the icon to display in the Go to next year button using custom CSS classes for external icon libraries. Takes precedence over NextYearNavIconName when both are set.
NextYearNavIconName	string?	null	Gets or sets the name of the icon to display in the Go to next year button from the built-in Fluent UI icons.
NextYearRangeNavIcon	BitIconInfo?	null	Gets or sets the icon to display in the Go to next year range button using custom CSS classes for external icon libraries. Takes precedence over NextYearRangeNavIconName when both are set.
NextYearRangeNavIconName	string?	null	Gets or sets the name of the icon to display in the Go to next year range button from the built-in Fluent UI icons.
OnMonthChange	EventCallback<DateTimeOffset>		Callback for when the displayed month of the day picker changes. The argument is the first day of the newly displayed month.
OnSelectDate	EventCallback<DateTimeOffset?>		Callback for when the user selects a date.
PrevMonthNavIcon	BitIconInfo?	null	Gets or sets the icon to display in the Go to previous month button using custom CSS classes for external icon libraries. Takes precedence over PrevMonthNavIconName when both are set.
PrevMonthNavIconName	string?	null	Gets or sets the name of the icon to display in the Go to previous month button from the built-in Fluent UI icons.
PrevYearNavIcon	BitIconInfo?	null	Gets or sets the icon to display in the Go to previous year button using custom CSS classes for external icon libraries. Takes precedence over PrevYearNavIconName when both are set.
PrevYearNavIconName	string?	null	Gets or sets the name of the icon to display in the Go to previous year button from the built-in Fluent UI icons.
PrevYearRangeNavIcon	BitIconInfo?	null	Gets or sets the icon to display in the Go to previous year range button using custom CSS classes for external icon libraries. Takes precedence over PrevYearRangeNavIconName when both are set.
PrevYearRangeNavIconName	string?	null	Gets or sets the name of the icon to display in the Go to previous year range button from the built-in Fluent UI icons.
SelectedDateAriaAtomic	string	Selected date {0}	The text of selected date aria-atomic of the calendar.
ShowGoToNow	bool	true	Whether the GoToNow button should be shown or not.
ShowGoToToday	bool	true	Whether the GoToToday button should be shown or not.
ShowMonthPicker	bool	true	Whether the month picker is shown or hidden.
ShowMonthPickerAsOverlay	bool	false	Show month picker on top of date picker when visible.
ShowOutsideDays	bool	true	Whether the days of the previous and next months should be shown in the day picker.
ShowTimePicker	bool	false	Whether the time picker should be shown or not.
ShowTimePickerAsOverlay	bool	false	Show time picker on top of date picker when visible.
ShowTimePickerIcon	BitIconInfo?	null	Gets or sets the icon to display in the ShowTimePicker button using custom CSS classes for external icon libraries. Takes precedence over ShowTimePickerIconName when both are set.
ShowTimePickerIconName	string?	null	Gets or sets the name of the icon to display in the ShowTimePicker button from the built-in Fluent UI icons.
ShowTimePickerTitle	string	Show time picker	The title of the ShowTimePicker button (tooltip).
ShowWeekNumbers	bool	false	Whether the week number (weeks 1 to 53) should be shown before each week row.
StartingValue	DateTimeOffset?	null	Specifies the date and time of the calendar when it is showing without any selected value.
Styles	BitCalendarClassStyles	null	Custom CSS styles for different parts of the BitCalendar.
TimeFormat	BitTimeFormat	BitTimeFormat.TwentyFourHours	The time format of the time-picker, 24H or 12H.
TimePickerDecreaseHourIcon	BitIconInfo?	null	Gets or sets the icon to display in the decrease-hour button using custom CSS classes for external icon libraries. Takes precedence over TimePickerDecreaseHourIconName when both are set.
TimePickerDecreaseHourIconName	string?	null	Gets or sets the name of the icon to display in the decrease-hour button from the built-in Fluent UI icons.
TimePickerDecreaseMinuteIcon	BitIconInfo?	null	Gets or sets the icon to display in the decrease-minute button using custom CSS classes for external icon libraries. Takes precedence over TimePickerDecreaseMinuteIconName when both are set.
TimePickerDecreaseMinuteIconName	string?	null	Gets or sets the name of the icon to display in the decrease-minute button from the built-in Fluent UI icons.
TimePickerIncreaseHourIcon	BitIconInfo?	null	Gets or sets the icon to display in the increase-hour button using custom CSS classes for external icon libraries. Takes precedence over TimePickerIncreaseHourIconName when both are set.
TimePickerIncreaseHourIconName	string?	null	Gets or sets the name of the icon to display in the increase-hour button from the built-in Fluent UI icons.
TimePickerIncreaseMinuteIcon	BitIconInfo?	null	Gets or sets the icon to display in the increase-minute button using custom CSS classes for external icon libraries. Takes precedence over TimePickerIncreaseMinuteIconName when both are set.
TimePickerIncreaseMinuteIconName	string?	null	Gets or sets the name of the icon to display in the increase-minute button from the built-in Fluent UI icons.
TimeZone	TimeZoneInfo?	null	TimeZone for the BitCalendar.
Today	DateTimeOffset?	null	Overrides the current date and time considered as "today" and "now" in the calendar (useful for testing or custom time providers).
WeekNumberRule	CalendarWeekRule?	null	The rule used to calculate the week numbers. Defaults to the FirstFullWeek rule.
WeekNumberTitle	string	Week number {0}	The title of the week number (tooltip).
YearCellTemplate	RenderFragment<int>?	null	Used to customize how content inside the year cell is rendered.
YearPickerToggleTitle	string	{0}, change year	The title of the year picker's toggle (tooltip).
YearRangePickerToggleTitle	string	{0} - {1}, change month	The title of the year range picker's toggle (tooltip).

BitInputBase parameters

Name	Type	Default value	Description
DefaultValue	TValue?	null	The default value of the input to be used in uncontrolled mode (i.e. when the Value is not bound), typically used alongside the OnChange callback.
DisplayName	string?	null	Gets or sets the display name for this field.
InputHtmlAttributes	IReadOnlyDictionary<string, object>?	null	Gets or sets a collection of additional attributes that will be applied to the created element.
Name	string?	null	Gets or sets the name of the element. Allows access by name from the associated form.
NoValidate	bool	false	Disables the validation of the input.
OnChange	EventCallback<TValue?>		Callback for when the input value changes.
ReadOnly	bool	false	Makes the input read-only.
Required	bool	false	Makes the input required.
Value	TValue?	null	Gets or sets the value of the input. This should be used with two-way binding.

BitInputBase public members

Name	Type	Description
InputElement	ElementReference	The ElementReference of the input element.
FocusAsync()	() => ValueTask	Gives focus to the input element.
FocusAsync(bool preventScroll)	(bool preventScroll) => ValueTask	Gives focus to the input element.

BitComponentBase parameters

Name	Type	Default value	Description
AriaLabel	string?	null	Gets or sets the accessible label for the component, used by assistive technologies.
Class	string?	null	Gets or sets the CSS class name(s) to apply to the rendered element.
Dir	BitDir?	null	Gets or sets the text directionality for the component's content.
ForceAnimation	bool	false	Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id	string?	null	Gets or sets the unique identifier for the component's root element.
IsEnabled	bool	true	Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style	string?	null	Gets or sets the CSS style string to apply to the rendered element.
TabIndex	string?	null	Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility	BitVisibility	BitVisibility.Visible	Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement	ElementReference		Gets the reference to the root HTML element associated with this component.

BitCalendarClassStyles properties

Name	Type	Default value	Description
Root	string?	null	Custom CSS classes/styles for the root element of the BitCalendar.
Container	string?	null	Custom CSS classes/styles for the main container of the BitCalendar.
DayPickerWrapper	string?	null	Custom CSS classes/styles for the day-picker's wrapper of the BitCalendar.
DayPickerHeader	string?	null	Custom CSS classes/styles for the day-picker's header of the BitCalendar.
DayPickerMonth	string?	null	Custom CSS classes/styles for the day-picker's month of the BitCalendar.
DayPickerNavWrapper	string?	null	Custom CSS classes/styles for the wrapper of the day-picker's nav buttons of the BitCalendar.
PrevMonthNavButton	string?	null	Custom CSS classes/styles for the Go to previous month button of the BitCalendar.
PrevMonthNavIcon	string?	null	Custom CSS classes/styles for the Go to previous month icon of the BitCalendar.
GoToTodayButton	string?	null	Custom CSS classes/styles for the Go to today button of the BitCalendar.
GoToTodayIcon	string?	null	Custom CSS classes/styles for the Go to today icon of the BitCalendar.
NextMonthNavButton	string?	null	Custom CSS classes/styles for the Go to next month button of the BitCalendar.
NextMonthNavIcon	string?	null	Custom CSS classes/styles for the Go to next month icon of the BitCalendar.
DaysGrid	string?	null	Custom CSS classes/styles for the days' grid of the BitCalendar.
DaysHeaderRow	string?	null	Custom CSS classes/styles for the header row of the days of the BitCalendar.
WeekNumbersHeader	string?	null	Custom CSS classes/styles for the header of the week numbers of the BitCalendar.
DayNameHeader	string?	null	Custom CSS classes/styles for the weekday-name headers of the BitCalendar.
DaysRow	string?	null	Custom CSS classes/styles for each row of the days of the BitCalendar.
WeekNumber	string?	null	Custom CSS classes/styles for the week number of the BitCalendar.
DayButton	string?	null	Custom CSS classes/styles for each day button of the BitCalendar.
TodayDayButton	string?	null	Custom CSS classes/styles for today day button of the BitCalendar.
SelectedDayButton	string?	null	Custom CSS classes/styles for selected day button of the BitCalendar.
HighlightedDayButton	string?	null	Custom CSS classes/styles for highlighted day buttons of the BitCalendar.
TimePickerContainer	string?	null	Custom CSS classes/styles for the time-picker's main container of the BitCalendar.
TimePickerWrapper	string?	null	Custom CSS classes/styles for the time-picker's wrapper of the BitCalendar.
TimePickerHourInput	string?	null	Custom CSS classes/styles for the time-picker's hour input of the BitCalendar.
TimePickerHourMinuteSeparator	string?	null	Custom CSS classes/styles for the time-picker's hour/minute separator of the BitCalendar.
TimePickerMinuteInput	string?	null	Custom CSS classes/styles for the time-picker's minute input of the BitCalendar.
Divider	string?	null	Custom CSS classes/styles for the main divider of the BitCalendar.
YearMonthPickerWrapper	string?	null	Custom CSS classes/styles for the year-month-picker's wrapper of the BitCalendar.
MonthPickerHeader	string?	null	Custom CSS classes/styles for the month-picker's header of the BitCalendar.
YearPickerToggleButton	string?	null	Custom CSS classes/styles for the year-picker's toggle button of the BitCalendar.
MonthPickerNavWrapper	string?	null	Custom CSS classes/styles for the wrapper of the month-picker's nav buttons of the BitCalendar.
PrevYearNavButton	string?	null	Custom CSS classes/styles for the Go to previous year button of the BitCalendar.
PrevYearNavIcon	string?	null	Custom CSS classes/styles for the Go to previous year icon of the BitCalendar.
NextYearNavButton	string?	null	Custom CSS classes/styles for the Go to next year button of the BitCalendar.
NextYearNavIcon	string?	null	Custom CSS classes/styles for the Go to next year icon of the BitCalendar.
MonthsRow	string?	null	Custom CSS classes/styles for each row of the months of the BitCalendar.
MonthButton	string?	null	Custom CSS classes/styles for each month button of the BitCalendar.
YearPickerHeader	string?	null	Custom CSS classes/styles for the year-picker's header of the BitCalendar.
MonthPickerToggleButton	string?	null	Custom CSS classes/styles for the month-picker's toggle button of the BitCalendar.
YearPickerNavWrapper	string?	null	Custom CSS classes/styles for the wrapper of the year-picker nav buttons of the BitCalendar.
PrevYearRangeNavButton	string?	null	Custom CSS classes/styles for the Go to previous year-range button of the BitCalendar.
PrevYearRangeNavIcon	string?	null	Custom CSS classes/styles for the Go to previous year-range icon of the BitCalendar.
NextYearRangeNavButton	string?	null	Custom CSS classes/styles for the Go to next year-range button of the BitCalendar.
NextYearRangeNavIcon	string?	null	Custom CSS classes/styles for the Go to next year-range icon of the BitCalendar.
YearsRow	string?	null	Custom CSS classes/styles for each row of the years of the BitCalendar.
YearButton	string?	null	Custom CSS classes/styles for each year button of the BitCalendar.
EventIndicator	string?	null	Custom CSS classes/styles for the event indicator dot of the BitCalendar.
EventModalOverlay	string?	null	Custom CSS classes/styles for the event modal overlay of the BitCalendar.
EventModalContainer	string?	null	Custom CSS classes/styles for the event modal container of the BitCalendar.
EventModalHeader	string?	null	Custom CSS classes/styles for the event modal header of the BitCalendar.
EventModalCloseButton	string?	null	Custom CSS classes/styles for the event modal close button of the BitCalendar.
EventItem	string?	null	Custom CSS classes/styles for each event item in the event modal of the BitCalendar.
EventItemTitle	string?	null	Custom CSS classes/styles for the event item title in the event modal of the BitCalendar.
EventItemTime	string?	null	Custom CSS classes/styles for the event item time range in the event modal of the BitCalendar.
EventItemBody	string?	null	Custom CSS classes/styles for the event item body in the event modal of the BitCalendar.

BitCalendarEvent properties

Name	Type	Default value	Description
Title	string		The title of the event.
Body	string		The full body/description text of the event.
Date	DateOnly	default	The date on which the event occurs.
StartTime	TimeOnly?	null	The optional start time of the event.
EndTime	TimeOnly?	null	The optional end time of the event.

BitIconInfo properties

Name	Type	Default value	Description
Name	string?	null	Gets or sets the name of the icon.
BaseClass	string?	null	Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty.
Prefix	string?	null	Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty.

BitColor enum

Name	Value	Description
Primary	0	Primary general color.
Secondary	1	Secondary general color.
Tertiary	2	Tertiary general color.
Info	3	Info general color.
Success	4	Success general color.
Warning	5	Warning general color.
SevereWarning	6	SevereWarning general color.
Error	7	Error general color.
PrimaryBackground	8	Primary background color.
SecondaryBackground	9	Secondary background color.
TertiaryBackground	10	Tertiary background color.
PrimaryForeground	11	Primary foreground color.
SecondaryForeground	12	Secondary foreground color.
TertiaryForeground	13	Tertiary foreground color.
PrimaryBorder	14	Primary border color.
SecondaryBorder	15	Secondary border color.
TertiaryBorder	16	Tertiary border color.

BitVisibility enum

Name	Value	Description
Visible	0	Show content of the component.
Hidden	1	Hide content of the component,though the space it takes on the page remains.
Collapsed	2	Hide content of the component,though the space it takes on the page gone.

BitTimeFormat enum

Name	Value	Description
TwentyFourHours	0	Show time pickers in 24 hours format.
TwelveHours	1	Show time pickers in 12 hours format.

BitVisibility enum

Name	Value	Description
Visible	0	The content of the component is visible.
Hidden	1	The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed	2	The component is hidden (display:none).

BitDir enum

Name	Value	Description
Ltr	0	Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl	1	Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto	2	Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.