DxCalendar Class

A Calendar component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxCalendar :
    DxCalendarBase

Remarks

The DevExpress Calendar for Blazor (<DxCalendar>) allows users to select dates and navigate through months, years, decades, and centuries.

Blazor_DataEditors_Landing_Calendar

NOTE

Online Demo: Calendar - Overview

Add Calendar to a Project

To add the <DxCalendar> component to an application, follow the steps below:

  1. Create and configure the application as described in the Create a New Blazor Application document.

  2. Add the <DxCalendar>...</DxCalendar> markup to your application.

Select Dates

Users can click a date to select it and use the header to navigate between dates.

Blazor_Calendar_Navigation

Set the EnableMultiSelect to true to allow users to select multiple dates. The SelectedDates collection stores all the selected dates. To handle selection changes, use the SelectedDatesChanged event.

<DxCalendar 
            EnableMultiSelect="true" 
            SelectedDatesChanged="OnSelectedDatesChanged" 
            SelectedDates="@SelectedDates">
</DxCalendar>

@foreach (DateTime date in SelectedDates)
{
    <p>
        @date.ToShortDateString()
    </p>
}

@code{
    List<DateTime> SelectedDates = new List<DateTime>();

    void OnSelectedDatesChanged(IEnumerable<DateTime> selectedDates)
    {
        SelectedDates = selectedDates.ToList();
        InvokeAsync(StateHasChanged);
    }
}

To select a range of dates, users should select the initial date, hold the left mouse button and move the mouse to the final date. To add/remove dates to/from the selection, users should click a date with while Ctrl is pressed.

Blazor_Calendar_Multiple_Select

NOTE

Online Demo: Calendar - Multi Select

Disable Dates

Handle the CustomDisabledDate event to disable the selection of specific dates. This event raises each time a day cell is rendered.

<DxCalendar CustomDisabledDate="@OnCustomDisabledDate">
</DxCalendar>

@code {
    void OnCustomDisabledDate(CalendarCustomDisabledDateEventArgs args) {
        args.IsDisabled = args.Date < DateTime.Today.AddDays(-20) || GetDisabledDates().Exists(d => DaysEqual(d, args.Date));
    }
    bool DaysEqual(DateTime date1, DateTime date2) {
        return (date1.Year == date2.Year && date1.DayOfYear == date2.DayOfYear);
    }
    List<DateTime> GetDisabledDates() {
        DateTime baseDate = DateTime.Today;
        return new List<DateTime>() { baseDate.AddDays(-9), baseDate.AddDays(-4), baseDate.AddDays(-3), baseDate.AddDays(3), baseDate.AddDays(5), baseDate.AddDays(6), baseDate.AddDays(15) };
    }

Blazor_Calendar_Disabled_Dates

NOTE

Online Demo: Calendar - Disabled Dates

Customize Day Cells

Use the calendar’s DayCellTemplate property to customize day cells.

<DxCalendar>
    <DayCellTemplate>
        <a class="@GetCssClassNames(context)">@context.Day.ToString()</a>
    </DayCellTemplate>
</DxCalendar>

@code {
    DateTime BaseDate = DateTime.Today;

    string GetCssClassNames(DateTime date) {
        string result = string.Empty;

        if(GetPersonalDays().Exists(d => DaysEqual(d, date)))
            result = "font-weight-bold text-success";
        if(GetHolidays().Exists(d => DaysEqual(d, date)))
            result = "text-danger";
        if(GetBirthdays().Exists(d => DaysEqual(d, date)))
            result += "font-weight-bold text-info";

        return result;
    }
}

Blazor_Calendar_Day_Cell_Customization

Appearance

A table below lists API members you can use to customize the Calendar's appearance:

Member

Description

VisibleDate

Specifies the month and the year to display on the calendar.

FirstDayOfWeek

Specifies the first day of the week in the calendar.

ShowClearButton

Specifies whether the Clear button is displayed in the calendar's footer.

Read-Only State

<DxCalendar> supports a read-only state. Set the ReadOnly property to true to activate this option.

<DxCalendar ReadOnly="true"/>

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.CalendarJSInteropProxy>
DevExpress.Blazor.Internal.DxEditorBase<DateTime, DevExpress.Blazor.Internal.JSInterop.CalendarJSInteropProxy>
DxCalendarBase
DxCalendar
See Also