Blazor Calendar Overview

    The Ignite UI for Blazor Calendar component is lightweight and easy to configure. It is used for showing dates and weekdays. It is also the best way for providing monthly or yearly views to end-users. The Ignite UI for Blazor Calendar control lets you restrict the minimum and maximum date ranges that people can navigate through.

    The Ignite UI for Ignite UI for Blazor Calendar provides an easy and intuitive way for displaying date information. It packs different features like single or multiple date selection modes, highlight and select date range, keyboard navigation, enabling week numbers, size and spacing options, and more.

    Blazor Calendar Example

    The following Blazor IgbCalendar component example shows a basic calendar with a single day selection mode. See how it works or inspect the code behind.

    How To Create a Calendar in Blazor with Ignite UI

    Before using the IgbCalendar, you need to register it as follows:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbCalendarModule));

    You will also need to link an additional CSS file to apply the styling to the Ignite UI for Blazor IgbCalendar component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    For a complete introduction to the Ignite UI for Blazor, read the Getting Started topic.

    The simplest way to start using the Ignite UI for Blazor IgbCalendar is as follows:

    <IgbCalendar />

    Selection Modes

    Users can choose from three different selection modes - single selection, multiple selection or range selection. By default, the Ignite UI for Blazor IgbCalendar is using single selection mode but you can change it by setting the Selection property as shown in this example.

    <IgbCalendar Selection="@CalendarBaseSelection.Multiple" />

    Range Selection

    Following the same approach, we can switch Selection to range mode:

    <IgbCalendar Selection="@CalendarBaseSelection.Range" />

    Active View and Date

    The Ignite UI for Blazor Calendar component allows you to switch between three different views: days, months and years. The ActiveView property of the component reflects the current view. By default, the Calendar displays the current date when loaded initially. You could modify this by setting the ActiveDate property. The ActiveDate property also reflects the changes of the currently visible date made by the end user.

    Week numbers

    You can use the ShowWeekNumbers property to show the week numbers of the Calendar component. You can do this by using its corresponding boolean attribute show-week-numbers like this:

    <IgbCalendar ShowWeekNumbers="true" />

    The following demo illustrates a Calendar with enabled week numbers:

    Multiple Months

    Using the VisibleMonths property, you can display more than one month when the Calendar is in days view. When multiple months are displayed, you can configure whether you want to stack them vertically or horizontally by using the Orientation property. By default, the Orientation property is set to horizontal.

    The Calendar displays leading and trailing dates from the previous and the next months. You could hide these dates by setting the HideOutsideDays property to true or using its corresponding boolean attribute HideOutsideDays.

    <IgbCalendar VisibleMonths="2" HideOutsideDays="true" />

    The following sample demonstrates the multiple months configuration:

    Size

    You could control the size and spacing of the calendar inner elements using the --ig-size CSS variable. The default size of the component is large.

    Events

    The Calendar component emits the Change event when the selected dates are changed by the end user. You can subscribe to the event like this:

    <IgbCalendar Change="@OnCalendarChange" />

@code {
    public void OnCalendarChange(IgbComponentDataValueChangedEventArgs args)
    {

    }
}

    Keyboard navigation

    If you traverse the page using the Tab key you should keep in mind that based on W3 accessability recommendations the IgbCalendar introduces the following tab stops:

    • Month selection button
    • Year selection button
    • Previous button
    • Next button
    • Active date element

    When a day/month/year in the IgbCalendar component is focused, use:

    • PageUp key to move to the previous month/year/years page.
    • PageDown key to move to the next month/year/years page.
    • Home key to focus the first day of the current month/first month in view/first year in view.
    • End key to focus the last day of the current month/last month in view/last year in view.
    • Arrow keys to navigate through the days/months/years. Navigating before the first item and after the last item will switch the view to the next/previous month/year/years page.

    When a day inside the days view is focused, use:

    • Shift + PageUp keys to move to the previous year.
    • Shift + PageDown keys to move to the next year.
    • Space or Enter key to select the currently focused day.

    When a month inside the months view is focused, use:

    • Space or Enter key to change the ActiveDate to the currently focused month and switch to days view.

    When an year inside the years view is focused, use:

    • Space or Enter key to change the ActiveDate to the currently focused year and switch to months view.

    When the previous or the next buttons (in the subheader) are focused, use:

    • Space or Enter key to switch to the previous/next month/year/years page.

    When the month button (in the subheader) is focused, use:

    • Space or Enter key to switch to months view.

    When the year button (in the subheader) is focused, use:

    • Space or Enter key to switch to years view.

    Styling

    The Calendar component exposes CSS parts for almost all of its inner elements. The following table lists all CSS parts exposed by the Calendar:

    Name Description
    header The header element.
    header-title The header title element.
    header-date The header date element.
    content The content element which contains the views and navigation elements.
    navigation The navigation container element.
    months-navigation The months navigation button element.
    years-navigation The years navigation button element.
    years-range The years range element.
    navigation-buttons The navigation buttons container.
    navigation-button Previous/next navigation button.
    days-view-container The days view container element.
    days-view Days view element.
    months-view The months view element.
    years-view The years view element.
    days-row Days row element.
    label Week header label element.
    week-number Week number element.
    week-number-inner Week number inner element.
    date Date element.
    date-inner Date inner element.
    first The first selected date element.
    last The last selected date element.
    inactive Inactive date element.
    hidden Hidden date element.
    weekend Weekend date element.
    range Range selected element.
    special Special date element.
    disabled Disabled date element.
    single Single selected date element.
    preview Range selection preview date element.
    month Month element.
    month-inner Month inner element.
    year Year element.
    year-inner Year inner element.
    selected Indicates selected state. Applies to date, month and year elements.
    current Indicates current state. Applies to date, month and year elements.

    Using these CSS parts we can customize thе appearance of the Calendar component like this:

    igc-calendar::part(header) {
    background: #345779;
}

igc-calendar::part(date-inner selected),
igc-calendar::part(month-inner selected),
igc-calendar::part(year-inner selected) {
    background: #345779;
    border-color: #345779;
}

igc-calendar::part(date-inner current),
igc-calendar::part(navigation-button):hover,
igc-calendar::part(navigation-button):focus,
igc-calendar::part(months-navigation):hover,
igc-calendar::part(months-navigation):focus,
igc-calendar::part(years-navigation):hover,
igc-calendar::part(years-navigation):focus {
    color: #2dabe8;
}

igc-calendar::part(date-inner current selected),
igc-calendar::part(month-inner current selected),
igc-calendar::part(year-inner current selected) {
    box-shadow: inset 0 0 0 0.0625rem white, 0 0 0 0.0625rem #345779;
    color: white;
}

    The following sample demonstrates the above CSS configuration:

    API References

    Additional Resources