Customizing the Appearance of Items

Items' appearance can be customized on the server-side by setting various properties.

ItemSettings class

A set of properties for customizing items' appearance is provided by the ItemSettings class. Use the Size and HeaderSize properties to adjust the items' dimensions. Spacing property can be used to change the amount of space between adjacent items. The display of different visual elements within the item can be modified by using the ShowReminderIcons, ShowRecurrenceIcons and ShowRecurrenceExceptionIcons properties. You can also choose whether or not to use the built-in functionality of the item cues by setting the ShowMoreItemsCue property accordingly.

ItemSettings.Style

Use the ItemSettings.Style property to change the visual appearance of the items from the server side.

C#

ItemStyle style = Calendar1.ItemSettings.Style;
style.HeaderTextColor = Color.White;
style.Brush.Image = "none";
style.Brush.Color = Color.OrangeRed;

Visual Basic

Dim style As ItemStyle = Calendar1.ItemSettings.Style
style.HeaderTextColor = Color.White
style.Brush.Image = "none"
style.Brush.Color = Color.OrangeRed

The code above will produce the following result in the Standard theme:

Customizing the ItemSettings.Style property will affect all appointments defined in the Calendar, including the newly created from the client-side items. For styling individual appointments use the Appointment.Style property.

Appointment.Style

By setting the Appointment.Style property you can style individual items.

C#

ItemStyle style = appointment.Style;
CssBorderStyle borders = new CssBorderStyle()
{
    TopColor = Color.White,
    LeftColor = Color.White,
    TopStyle = BorderStyle.Solid,
    LeftStyle = BorderStyle.Solid,
    BottomColor = Color.Black,
    RightColor = Color.Black,
    BottomStyle = BorderStyle.Solid,
    RightStyle = BorderStyle.Solid,
    AllWidth = new Unit(1.0, UnitType.Pixel)
};
style.Borders.CopyFrom(borders);
CssBackground background = new CssBackground() 
{ 
    Image = "none",
    Color = Color.DodgerBlue
};
style.Brush.SetProperties(background.GetProperties());
style.HeaderFont.Name = "Lucida Handwriting";
style.HeaderFont.Italic = true;
style.HeaderTextAlignment = TextAlignment.MiddleRight;
style.HeaderTextColor = Color.White;

Visual Basic

Dim style As ItemStyle = appointment.Style
Dim borders As New CssBorderStyle() With { _
    .TopColor = Color.White, _
    .LeftColor = Color.White, _
    .TopStyle = BorderStyle.Solid, _
    .LeftStyle = BorderStyle.Solid, _
    .BottomColor = Color.Black, _
    .RightColor = Color.Black, _
    .BottomStyle = BorderStyle.Solid, _
    .RightStyle = BorderStyle.Solid, _
    .AllWidth = New Unit(1.0, UnitType.Pixel) _
}
style.Borders.CopyFrom(borders)
Dim background As New CssBackground() With { _
   .Image = "none", _
   .Color = Color.DodgerBlue _
}
style.Brush.SetProperties(background.GetProperties())
style.HeaderFont.Name = "Lucida Handwriting"
style.HeaderFont.Italic = True
style.HeaderTextAlignment = TextAlignment.MiddleRight
style.HeaderTextColor = Color.White

This image shows how the appointment will look like:

Styling Items through CSS

Items can be styled also through the use of CSS classes. This topic is discussed at length here.