Customizing the Appearance of Views

ViewSettings.Style properties

The Style property of the corresponding Settings class is responsible for general styling of the Calendar's view. You can use Borders property to set the outer border of the Calendar and the Brush property to define the color with which the Calendar's content will be painted.

Different headers within the Calendar can be styled though their corresponding Style properties. For example, MainHeaderStyle property is responsible for styling the view's main header, GroupHeaderStyle - for the group header and so on.

For styling the date/time cells in the month and week views use the DaySettings.Style property of the MonthSettings and WeekRangeSettings members respectively. DaySettings.Style is responsible for the cells customization in the MonthRange view too. You can also apply additional customization to the padding day cells in a month view by using the PaddingDaysStyle property. Use the DaySettings.HeaderStyle property for styling the cell's headers.

The Timetable view offers customization of the time cells through the CellStyle property and additional customization of work-time cells through the WorkTimeCellStyle property. Styling of the timeline header is also available by using the TimelineStyle property.

Styling of the List view cells is available through its' CellSettings.Style and CellSettings.HeaderStyle properties.

Timetable, List and month views also expose the ButtonStyle property which affects the customization of the navigation buttons in the main header of the view.

Example

The following example shows how to style the Single Month view by setting different borders and backgrounds to the Style, HeaderStyle, DaySettings.Style, DaySettings.HeaderStyle and ButtonStyle properties:

C#

CssBorderStyle border = new CssBorderStyle()
{
    BottomColor = Color.LightGray,
    BottomStyle = BorderStyle.Solid,
    BottomWidth = new Unit(1.0, UnitType.Pixel)
};
CssBackground background = new CssBackground()
{
    Color = System.Drawing.ColorTranslator.FromHtml("#7E7C94")
};
CssBorderStyle headerBorder = new CssBorderStyle()
{
    AllStyle = BorderStyle.None
};
CssBackground headerBackground = new CssBackground()
{
    Image = "none",
    Color = System.Drawing.ColorTranslator.FromHtml("#413657")
};
CssBorderStyle cellHeaderBorder = new CssBorderStyle()
{
    TopStyle = BorderStyle.Solid,
    TopColor = Color.SlateGray,
    TopWidth = new Unit(1.0, UnitType.Pixel)
};
CssBackground cellHeaderBackground = new CssBackground()
{
    Image = "none",
    Color = System.Drawing.ColorTranslator.FromHtml("#5E5A78")
};// Get references to the calendars' settings objects.
MonthSettings mSettings = Calendar1.MonthSettings;// General style
Style style = mSettings.Style;
style.Borders.CopyFrom(headerBorder);
style.Brush.SetProperties(headerBackground.GetProperties());//MainHeaderStyle
HeaderStyle hstyle = mSettings.MainHeaderStyle;
hstyle.Borders.CopyFrom(headerBorder);
hstyle.Brush.SetProperties(headerBackground.GetProperties());// Cells style
style = mSettings.DaySettings.Style;
style.Borders.CopyFrom(border);
style.Brush.SetProperties(background.GetProperties());

// Cells headers
hstyle = mSettings.DaySettings.HeaderStyle;
hstyle.Borders.CopyFrom(cellHeaderBorder);
hstyle.Brush.SetProperties(cellHeaderBackground.GetProperties());
hstyle.TextColor = Color.White;// Buttons style
ButtonsStyle bStyle = mSettings.ButtonStyle;
bStyle.Brush.Image = "none";
bStyle.Brush.Color = System.Drawing.ColorTranslator.FromHtml("#4C4662");
mSettings.ButtonStyle.Brush.SetProperties(bStyle.Brush.GetProperties());

Visual Basic

Dim border As New CssBorderStyle() With { _
 .BottomColor = Color.LightGray, _
 .BottomStyle = BorderStyle.Solid, _
 .BottomWidth = New Unit(1.0, UnitType.Pixel) _
}
Dim background As New CssBackground() With { _
 .Color = System.Drawing.ColorTranslator.FromHtml("#7E7C94") _
}
Dim headerBorder As New CssBorderStyle() With { _
 .AllStyle = BorderStyle.None _
}
Dim headerBackground As New CssBackground() With { _
 .Image = "none", _
 .Color = System.Drawing.ColorTranslator.FromHtml("#413657") _
}
Dim cellHeaderBorder As New CssBorderStyle() With { _
 .TopStyle = BorderStyle.Solid, _
 .TopColor = Color.SlateGray, _
 .TopWidth = New Unit(1.0, UnitType.Pixel) _
}
Dim cellHeaderBackground As New CssBackground() With { _
 .Image = "none", _
 .Color = System.Drawing.ColorTranslator.FromHtml("#5E5A78") _
}' Get references to the calendars' settings objects.
Dim mSettings As MonthSettings = Calendar1.MonthSettings' General style
Dim style As Style = mSettings.Style
style.Borders.CopyFrom(headerBorder)
style.Brush.SetProperties(headerBackground.GetProperties())'MainHeaderStyle
Dim hstyle As HeaderStyle = mSettings.MainHeaderStyle
hstyle.Borders.CopyFrom(headerBorder)
hstyle.Brush.SetProperties(headerBackground.GetProperties())' Cells style
style = mSettings.DaySettings.Style
style.Borders.CopyFrom(border)
style.Brush.SetProperties(background.GetProperties())' Cells headers
hstyle = mSettings.DaySettings.HeaderStyle
hstyle.Borders.CopyFrom(cellHeaderBorder)
hstyle.Brush.SetProperties(cellHeaderBackground.GetProperties())
hstyle.TextColor = Color.White' Buttons style
Dim bStyle As ButtonsStyle = mSettings.ButtonStyle
bStyle.Brush.Image = "none"
bStyle.Brush.Color = System.Drawing.ColorTranslator.FromHtml("#4C4662")
mSettings.ButtonStyle.Brush.SetProperties(bStyle.Brush.GetProperties())

The image below depicts how the Calendar's SingleMonth view will look like after applying these styles: