Skip to main content
All docs
V22.1

DXCalendar Class

A cross-platform customizable calendar.

Namespace: DevExpress.XamarinForms.Editors

Assembly: DevExpress.XamarinForms.Editors.dll

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.

DevExpress Calendar for Xamarin.Forms

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.

DevExpress Date Editor for Xamarin.Forms - Calendar - Views and Visual Elements

  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.

DevExpress Calendar for Xamarin.Forms - Custom Appearance Settings

<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.

Custom Day Style

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;
    }   
}

Example 3

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

Custom Day of Week Style

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");
}

Inheritance

Object
DXCalendar
See Also