Class CalendarBase<T>
Represents a calendar component that displays a Gregorian calendar and allows users to select dates with full support for localization, min/max constraints, and custom behaviors.
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Toolkit.Calendars
Assembly: Syncfusion.Blazor.Toolkit.dll
Syntax
public class CalendarBase<T> : SfInputBase<T>, IAsyncDisposableType Parameters
| Name | Description |
|---|---|
| T | Specifies the supported value type for the calendar's selected date (e.g., |
Remarks
The CalendarBase<T> class is the base for Syncfusion Blazor Calendar control. It enables date selection, localization, keyboard navigation, and advanced features such as restricted selection by min/max dates and multiple calendar views. It supports conversion between Gregorian and Hijri calendars. Customization for keyboard shortcuts and rendering can be achieved through exposed events and parameters.
Examples
The following example demonstrates how to instantiate the CalendarBase component allowing selection between a date range:
<SfCalendar Min="@new DateTime(2020, 1, 1)" Max="@new DateTime(2025, 12, 31)" FirstDayOfWeek="1" DayHeaderFormat="DayHeaderFormats.Wide"/>Constructors
CalendarBase()
Declaration
public CalendarBase()Properties
CalendarMode
Gets or sets the calendar system type, such as Gregorian or Hijri.
Declaration
public CalendarType CalendarMode { get; set; }Property Value
| Type | Description |
|---|---|
| CalendarType | A CalendarType enum value specifying the calendar system to be used in the component (e.g., Gregorian, Hijri). |
Remarks
Use this property to enable the selection and display of dates in different calendar systems.
Examples
Display the calendar using the Hijri system:
<SfCalendar CalendarMode="CalendarType.Hijri" />DayHeaderFormat
Gets or sets the display format for day names shown in the calendar's header.
Declaration
public DayHeaderFormats DayHeaderFormat { get; set; }Property Value
| Type | Description |
|---|---|
| DayHeaderFormats | A DayHeaderFormats value specifying the header day name format (Short, Narrow, Abbreviated, Wide). Default is Short. |
Remarks
This property configures the format of day names in the calendar header row, allowing customization of the day label presentation for various cultures or UI requirements.
Examples
Show abbreviated day names (e.g., Mon, Tue, Wed):
<SfCalendar DayHeaderFormat="DayHeaderFormats.Abbreviated" />Depth
Gets or sets the maximum navigation depth in the calendar (e.g., Month, Year, Decade).
Declaration
public CalendarView Depth { get; set; }Property Value
| Type | Description |
|---|---|
| CalendarView | A CalendarView value specifying the maximum depth users can navigate. Typical values are Month, Year, or Decade. |
Remarks
The Depth must be smaller than Start to properly restrict view navigation.
Examples
Allow users to navigate up to the Year view only:
<SfCalendar Start="CalendarView.Month" Depth="CalendarView.Year" />FirstDayOfWeek
Gets or sets the first day of the week in the calendar view.
Declaration
public int FirstDayOfWeek { get; set; }Property Value
| Type | Description |
|---|---|
| System.Int32 | An |
Remarks
Use this property to change the calendar's week layout to start on a different day (for example, Monday instead of Sunday).
Examples
Set the calendar's first day of the week to Monday:
<SfCalendar FirstDayOfWeek="1" />KeyConfigs
Gets or sets the custom keyboard actions for the calendar component.
Declaration
public Dictionary<string, object> KeyConfigs { get; set; }Property Value
| Type | Description |
|---|---|
| System.Collections.Generic.Dictionary<System.String, System.Object> | A System.Collections.Generic.Dictionary<, > that maps key action names to custom shortcut values. |
Remarks
Use this property to provide keyboard accessibility and localization, such as customizing shortcuts for different keyboard layouts.
Examples
Provide custom key actions for German keyboards:
<SfCalendar KeyConfigs="@myKeyConfigs" />
@code {
Dictionary<string, object> myKeyConfigs = new() { { "moveRight", "Alt+RightArrow" } };
}Max
Gets or sets the maximum selectable date for the calendar.
Declaration
public virtual DateTime Max { get; set; }Property Value
| Type | Description |
|---|---|
| System.DateTime | A |
Remarks
Use this property to restrict user selection to dates before or equal to the specified maximum.
Examples
Set the maximum date to 31-Dec-2025:
<SfCalendar Max="@new DateTime(2025,12,31)" />Min
Gets or sets the minimum selectable date for the calendar.
Declaration
public virtual DateTime Min { get; set; }Property Value
| Type | Description |
|---|---|
| System.DateTime | A |
Remarks
Use this property to restrict user selection to dates on or after the specified minimum.
Examples
Set the minimum date to 1-Jan-2000:
<SfCalendar Min="@new DateTime(2000,1,1)" />ShowTodayButton
Gets or sets a value that determines whether the today button is displayed in the calendar UI.
Declaration
public bool ShowTodayButton { get; set; }Property Value
| Type | Description |
|---|---|
| System.Boolean |
|
Remarks
The today button allows users to quickly select the current date in the calendar.
Examples
Hide the today button:
<SfCalendar ShowTodayButton="false" />Start
Gets or sets the initial calendar view displayed when the calendar is opened.
Declaration
public CalendarView Start { get; set; }Property Value
| Type | Description |
|---|---|
| CalendarView | A CalendarView value determining whether the initial view starts from Month, Year, or Decade. Default is Month. |
Remarks
Use this property to control which navigation level users see first when they open the calendar.
Examples
Set the calendar to open on the year view:
<SfCalendar Start="CalendarView.Year" />WeekNumber
Gets or sets a value indicating whether the calendar displays the week number in the UI.
Declaration
public bool WeekNumber { get; set; }Property Value
| Type | Description |
|---|---|
| System.Boolean |
|
Remarks
When enabled, a week number column is shown for each date row in the calendar.
WeekRule
Gets or sets the rule used to determine the first week of the year in the calendar.
Declaration
public CalendarWeekRule WeekRule { get; set; }Property Value
| Type | Description |
|---|---|
| System.Globalization.CalendarWeekRule | A System.Globalization.CalendarWeekRule value that specifies how the first week of the year is calculated. |
Remarks
The default is culture-dependent. Valid options include FirstDay, FirstFullWeek, and FirstFourDayWeek.
Examples
Specify the calendar week rule:
<SfCalendar WeekRule="CalendarWeekRule.FirstFourDayWeek" />Methods
ConvertToGregorian(String, String)
Converts a formatted Hijri date string to a Gregorian System.DateTime object.
Declaration
public T ConvertToGregorian(string hijriDate, string format)Parameters
| Type | Name | Description |
|---|---|---|
| System.String | hijriDate | The Hijri date string to convert, formatted according to the specified |
| System.String | format | The format string that specifies the structure of the |
Returns
| Type | Description |
|---|---|
| T | A System.DateTime object in Gregorian format representing the date and time specified in the Hijri |
Remarks
This method splits the hijriDate and format into individual components,
parses each component to extract day, month, year, and time values, and converts them from Hijri to Gregorian.
It assumes that the hijriDate is in the Hijri calendar.
Exceptions
| Type | Condition |
|---|---|
| System.ArgumentNullException | Thrown when |
ConvertToHijri(T, String)
Converts a Gregorian System.DateTime object to a formatted Hijri date string.
Declaration
public string ConvertToHijri(T gregorianDate, string format)Parameters
| Type | Name | Description |
|---|---|---|
| T | gregorianDate | The Gregorian date to be converted to Hijri, of type |
| System.String | format | The format string specifying the output structure of the Hijri date. Supports standard date format specifiers such as "dd", "MM", "MMM", "MMMM", "yyyy", and time components. |
Returns
| Type | Description |
|---|---|
| System.String | A string representing the Hijri date formatted according to the specified |
Remarks
This method converts a System.DateTime value from Gregorian to Hijri and formats it. If the format string contains "MMM" or "MMMM", it replaces the month part with a Hijri month name (abbreviated or full, depending on the format).
Exceptions
| Type | Condition |
|---|---|
| System.ArgumentNullException | Thrown when |