DXCalendar Class

A cross-platform customizable calendar.

Namespace: DevExpress.XamarinForms.Editors

Assembly: DevExpress.XamarinForms.Editors.dll

NuGet Package: DevExpress.XamarinForms.Editors

Declaration

public class DXCalendar :
    View

Remarks

The DXCalendar component allows users to select a date. The image below demonstrates a calendar that displays holidays and observances.

Note

The default calendar does not display special days (like holidays and observances). This functionality should be implemented manually.

Selected Date

The table below contains properties and events that allow you to obtain the selected date, specify the available date range, prevent specific dates from selecting, and respond to date changes.

Property or Event	Description
SelectedDate	Gets or sets the date selected in the calendar.
SelectedDateChanged	Fires when the date selected in the calendar changes.
SelectedDateChangedCommand	Gets or sets the command executed when the date selected in the calendar changes.
SelectedDateChangedCommandParameter	Gets or sets the parameter passed to the SelectedDateChangedCommand.
DisableDate	Allows you to disable a specific date (prevent users from selecting it).
MinDate	Gets or sets the minimum date that users can select in the calendar.
MaxDate	Gets or sets the maximum date that users can select in the calendar.

Appearance Customization

You can customize the appearance of the following visual elements in the calendar: days, months, years, days of the week, and header. You can set a custom style for all such visual elements, as well as for specific days/months/years. A style allows you to specify background and foreground colors, and fonts. You can also replace the default data template used to render a visual element.

1. Day View
2. Month View
3. Year View
4. Calendar Header
5. Day of Week
6. Day
7. Trailing Day
8. Month
9. Year

The table below contains options that you can use to apply custom styles and templates to visual elements.

Style for All Elements	Style for Specific Elements	Template	Description
DayCellStyle	CustomDayCellStyle	DayCellTemplate	Allow you to customize days.
DayOfWeekCellStyle	CustomDayOfWeekCellStyle	DayOfWeekCellTemplate	Allow you to customize days of the week.
MonthCellStyle	CustomMonthCellStyle	MonthCellTemplate	Allow you to customize months.
YearCellStyle	CustomYearCellStyle	YearCellTemplate	Allow you to customize years.
HeaderStyle	—	—	Allows you to customize the calendar’s header.

To obtain or set the view in code, use the ActiveViewType property. You can also use the following options to specify the display of the calendar:

Property	Description
CellMinSize	Gets or sets the minimum size of cells in the calendar.
FirstDayOfWeek	Gets or sets the first day of the week.
HorizontalCellSpacing	Gets or sets the horizontal spacing between cells.
VerticalCellSpacing	Gets or sets the vertical spacing between cells.
Padding	Gets or sets the distance between the calendar edges and contents.
ShowTrailingDays	Gets or sets whether days related to the previous and next months are displayed.

Example 1

The example below show how to apply custom appearance settings to days, days of week, and the calendar’s header.

XAML

<dxe:DXCalendar>
    <dxe:DXCalendar.HeaderStyle>
        <dxe:CalendarHeaderStyle TextColor="#F44848"/>
    </dxe:DXCalendar.HeaderStyle>
    <dxe:DXCalendar.DayCellStyle>
        <dxe:CalendarDayCellStyle FontAttributes="Bold,Italic"
                                  TextColor="Black"/>
    </dxe:DXCalendar.DayCellStyle>
    <dxe:DXCalendar.DayOfWeekCellStyle>
        <dxe:CalendarDayOfWeekCellStyle FontAttributes="Bold,Italic"
                                        TextColor="Black"/>
    </dxe:DXCalendar.DayOfWeekCellStyle>
</dxe:DXCalendar>

Example 2

The example below shows how to apply a custom style to a specific day.

C#

using DevExpress.XamarinForms.Editors;

void CustomDayCellStyle(object sender, CustomSelectableCellStyleEventArgs e) {
    if(e.Date.Month == 2 && e.Date.Day == 14) {
        e.FontAttributes = FontAttributes.Bold;
        e.EllipseBackgroundColor = Color.FromRgba(e.TextColor.R, e.TextColor.G, e.TextColor.B, 0.15);
    }

    if(e.Date.Month == 2 && e.Date.Day == 21) {
        e.FontAttributes = FontAttributes.Bold;
        Color textColor = Color.FromHex("F44848");
        e.EllipseBackgroundColor = Color.FromRgba(textColor.R, textColor.G, textColor.B, 0.25);
        e.TextColor = textColor;
    }   
}

XAML

<dxe:DXCalendar CustomDayCellStyle="CustomDayCellStyle"/>

Example 3

The example below shows how to apply a custom style to weekends (days in the calendar and days of the week).

C#

using DevExpress.XamarinForms.Editors;

void CustomDayCellStyle(object sender, CustomSelectableCellStyleEventArgs e) {
    if (e.Date.DayOfWeek == DayOfWeek.Saturday || e.Date.DayOfWeek == DayOfWeek.Sunday) {
        e.TextColor = Color.FromHex("F44848");
        if(e.IsTrailing)
            e.TextColor = Color.FromRgba(e.TextColor.R, e.TextColor.G, e.TextColor.B, 0.5);
    }
}

private void CustomDayOfWeekCellStyle(object sender, CustomDayOfWeekCellStyleEventArgs e) {
    if(e.DayOfWeek == DayOfWeek.Saturday || e.DayOfWeek == DayOfWeek.Sunday)
        e.TextColor = Color.FromHex("F44848");
}

XAML

<dxe:DXCalendar CustomDayCellStyle="CustomDayCellStyle"
                CustomDayOfWeekCellStyle="CustomDayOfWeekCellStyle"/>

Inheritance

Object

DXCalendar