Cell Styling

This article describes the APIs used to customize the look of the calendar cells.

The RadCalendar component exposes a property which enables you to provide a custom style for each cell.

  • SetStyleForCell (Func<CalendarCell, CalendarCellStyle>): This property should be assigned to a method that provides a CalendarCellStyle for each calendar cell.

CalendarCell types

The CalendarCell objects are not actual visual elements, but they provide context that the user can use to style different parts of the calendar. Here you can find more information about the calendar visual structure.

All cells share a common base class - the CalendarCell. Here are its properties:

  • Text (string): Gets the text displayed in the cell.
  • Type (CalendarCellType): Gets the type of the cell. The possible values are:
    • Date: all cells that correspond to actual dates has this type
    • WeekNumber: cells that hold week numbers
    • DayName: cells that hold the days of the week

Below are described the specific calendar cells and their properties.

CalendarDateCell

These cells hold date values (days, months, years). The Type of CalendarDateCell is Date.

  • IsEnabled (bool): Gets a value that specifies whether the cell is enabled (inside the calendar MinDate and MaxDate range).
  • IsSelected (bool): Gets a value that specifies whether the cell is currently selected.
  • Date (DateTime): Gets the date that corresponds to the cell.

CalendarDayCell

These cells hold dates in Month and Week view. The CalendarDayCell inherits from CalendarDateCell and its Type is also Date.

  • IsFromCurrentMonth (bool): Gets a value that specifies whether the cell is from the current month in month view.
  • IsToday (bool): Gets a value that specifies whether the cell date is today.

CalendarTextCell

These cells hold elements different from dates: week numbers and week day names and correspondingly have Type WeekNumber or DayName.

CalendarCellStyle

The CalendarCellStyle class provides the following properties:

  • BackgroundColor (Color)
  • BorderColor (Color)
  • BorderThickness (Thickness)
  • FontSize (double)
  • FontWeight (FontWeight): Bold or Normal.
  • ForegroundColor (Color)

Example

This example demonstrates how you can apply styles to different calendar cell types.

var calendar = new RadCalendar();
calendar.SetStyleForCell = this.EvaluateCellStyle;
calendar.GridLinesDisplayMode = DisplayMode.Show;
calendar.GridLinesColor = Color.Silver;
calendar.GridLinesWidth = 1;

And this is the method:

private CalendarCellStyle EvaluateCellStyle(CalendarCell cell)
{
    var background = Device.OnPlatform(Color.White, Color.White, Color.FromRgb(30, 30, 30));
    var selectedCellForegroundColor = Device.OnPlatform(Color.White, Color.FromRgb(139, 209, 0), Color.White);
    var dayNamesFontSize = Device.OnPlatform(14, 30, 17);
    var fontSize = Device.OnPlatform(14, 30, 17);
    var todayBorderThickness = Device.OnPlatform(new Thickness(2), new Thickness(1), new Thickness(2));
    var todayBorderColor = Color.FromRgb(115, 174, 239);

    if (cell.Type == CalendarCellType.DayName)
    {
        return new CalendarCellStyle
        {
            BackgroundColor = Color.Transparent,
            FontSize = dayNamesFontSize,
            FontWeight = FontWeight.Bold,
            ForegroundColor = Color.FromRgb(0, 122, 255)
        };
    }

    var defaultStyle = new CalendarCellStyle
    {
        BackgroundColor = background,
        FontSize = fontSize,
        FontWeight = FontWeight.Normal,
        ForegroundColor = Color.FromRgb(139, 209, 0)
    };

    var dayCell = cell as CalendarDayCell;

    if (dayCell != null)
    {
        if (dayCell.IsFromCurrentMonth)
        {
            if (dayCell.IsToday)
            {
                defaultStyle.ForegroundColor = Color.FromRgb(0, 122, 255);
                defaultStyle.FontWeight = FontWeight.Bold;
                defaultStyle.BorderColor = todayBorderColor;
                defaultStyle.BorderThickness = todayBorderThickness;
            }
        }
        else
        {
            if (dayCell.IsToday)
            {
                defaultStyle.ForegroundColor = todayBorderColor;
                defaultStyle.BorderColor = todayBorderColor;
                defaultStyle.BorderThickness = todayBorderThickness;
            }
            else
            {
                defaultStyle.ForegroundColor = Color.FromRgb(166, 181, 137);
            }
        }

        if (dayCell.IsSelected)
        {
            defaultStyle.ForegroundColor = selectedCellForegroundColor;
            defaultStyle.BorderColor = Color.FromHex("FF0066CC");
        }

        return defaultStyle;
    }

    return null; // default style
}

Here is the result:

Cell Styling