Appearance and Styling | ComponentOne CalendarView for WinForms

Appearance and Styling

In This Topic

CalendarView provides several styling features that allow customization of calendar as well as its elements including month view, navigation, and title elements.

The list of various styling features is as follows:

Alignment: Apply horizontal or vertical alignment to both calendar and its elements, such as title, navigation, and month view elements.
- Horizontal alignment: Align calendar or its elements horizontally by using the HorizontalAlignment property.
- Vertical alignment: Align calendar or its elements vertically by using the VerticalAlignment property.
Background images: Add, align, and scale background images in calendar as well as navigation buttons and titles including day, month, and weekend titles.
- Background image: Set background image by using the BackImage property.
- Background image alignment: Align background image by using the BackImageAlignment property.
- Background image scaling: Scale background image by using the BackImageScaling property.
Common styles: Apply common styles, such as border, border color, font settings and background or foreground color to calendar and elements in it.
- Border: Set the width of the visual element by setting the Border property.
- Border color: Change the color of the border by setting the BorderColor property.
- Font settings: Apply font settings to all types of dates, such as bolded, ordinary, selected, today, disabled, trailing, and weekend and to all titles including day, month, week, and weekend.
- Background color: Change the background color of calendar or its elements by setting the BackColor property.
- Foreground color: Apply foreground color to different dates, titles, and navigation buttons in calendar by setting the ForeColor property.
Navigation button images: Set images for both Previous and Next navigation buttons.
- Previous arrow button image: Set the Previous arrow button image by setting the ImageArrowPrevious property.
- Next arrow button image: Set the Next arrow button image by setting the ImageArrowNext property.

The following image displays styling features applied to CalendarView and its elements.

The following code snippet shows how to implement styling features in CalendarView using relevant properties.

Visual Basic
C#

Visual Basic

' set horizontal and vertical alignment for titles and calendar
C1CalendarView1.Theme.Titles.Week.HorizontalAlignment = C1.Framework.Alignment.Far
C1CalendarView1.Theme.Common.HorizontalAlignment = C1.Framework.Alignment.Near
C1CalendarView1.Theme.Titles.Week.VerticalAlignment = C1.Framework.Alignment.Far
C1CalendarView1.Theme.Common.VerticalAlignment = C1.Framework.Alignment.Near

' set borders for different dates in calendar
C1CalendarView1.Theme.Day.Bolded.Border = New C1.Framework.Thickness(2, 2, 2, 2)
C1CalendarView1.Theme.Day.Ordinary.Border = New C1.Framework.Thickness(1, 1, 1, 1)
C1CalendarView1.Theme.Day.Weekend.Border = New C1.Framework.Thickness(1, 1, 1, 1)

' set border color for dates and titles in calendar and for calendar as well
C1CalendarView1.Theme.Day.Bolded.BorderColor = Color.Crimson
C1CalendarView1.Theme.Day.Ordinary.BorderColor = Color.PeachPuff
C1CalendarView1.Theme.Day.Today.BorderColor = SystemColors.ControlLightLight
C1CalendarView1.Theme.Day.Weekend.BorderColor = Color.LightPink
C1CalendarView1.Theme.Titles.Day.BorderColor = Color.Crimson
C1CalendarView1.Theme.Titles.Week.BorderColor = Color.Crimson
C1CalendarView1.Theme.Titles.Weekend.BorderColor = Color.DarkCyan
C1CalendarView1.Theme.Common.BorderColor = Color.PeachPuff

' apply font settings to dates and titles in calendar
C1CalendarView1.Theme.Day.Bolded.Font =
    New Font("Microsoft Sans Serif", 8.25F,
             (FontStyle.Bold Or FontStyle.Underline))
C1CalendarView1.Theme.Day.Weekend.Font =
    New Font("Microsoft Sans Serif", 8.25F,
             FontStyle.Bold, GraphicsUnit.Point, 0)
C1CalendarView1.Theme.Titles.Day.Font =
    New Font("Microsoft Sans Serif", 8.25F,
             FontStyle.Bold, GraphicsUnit.Point, 0)
C1CalendarView1.Theme.Titles.Month.Font =
    New Font("Microsoft Sans Serif", 9.0F,
             (FontStyle.Bold Or FontStyle.Underline), GraphicsUnit.Point, 0)
C1CalendarView1.Theme.Titles.Week.Font =
    New Font("Microsoft Sans Serif", 6.0F,
             FontStyle.Bold)

' set foreground color for dates and titles in calendar
C1CalendarView1.Theme.Day.Bolded.ForeColor = Color.Crimson
C1CalendarView1.Theme.Day.Disabled.ForeColor = SystemColors.ControlText
C1CalendarView1.Theme.Day.Trail.ForeColor = Color.Transparent
C1CalendarView1.Theme.Day.Weekend.ForeColor = Color.Crimson
C1CalendarView1.Theme.Titles.Month.ForeColor = Color.Crimson

' set background color for dates and titles in calendar and for calendar as well
C1CalendarView1.Theme.Day.Bolded.BackColor = Color.Pink
C1CalendarView1.Theme.Day.Disabled.BackColor = Color.LightGray
C1CalendarView1.Theme.Day.Ordinary.BackColor = Color.White
C1CalendarView1.Theme.Day.Trail.BackColor = Color.White
C1CalendarView1.Theme.Titles.Day.BackColor = Color.PeachPuff
C1CalendarView1.Theme.Titles.Week.BackColor = Color.PeachPuff
C1CalendarView1.Theme.Day.Weekend.BackColor = Color.Pink
C1CalendarView1.Theme.Common.BackColor = Color.Linen

// set horizontal and vertical alignment for titles and calendar
c1CalendarView1.Theme.Titles.Week.HorizontalAlignment = C1.Framework.Alignment.Far;
c1CalendarView1.Theme.Common.HorizontalAlignment = C1.Framework.Alignment.Near;
c1CalendarView1.Theme.Titles.Week.VerticalAlignment = C1.Framework.Alignment.Far;
c1CalendarView1.Theme.Common.VerticalAlignment = C1.Framework.Alignment.Near;
         
// set borders for different dates in calendar
c1CalendarView1.Theme.Day.Bolded.Border = new C1.Framework.Thickness(2, 2, 2, 2);
c1CalendarView1.Theme.Day.Ordinary.Border = new C1.Framework.Thickness(1, 1, 1, 1);
c1CalendarView1.Theme.Day.Weekend.Border = new C1.Framework.Thickness(1, 1, 1, 1);

// set border color for dates and titles in calendar and for calendar as well
c1CalendarView1.Theme.Day.Bolded.BorderColor = Color.Crimson;
c1CalendarView1.Theme.Day.Ordinary.BorderColor = Color.PeachPuff;
c1CalendarView1.Theme.Day.Today.BorderColor = SystemColors.ControlLightLight;
c1CalendarView1.Theme.Day.Weekend.BorderColor = Color.LightPink;
c1CalendarView1.Theme.Titles.Day.BorderColor = Color.Crimson;
c1CalendarView1.Theme.Titles.Week.BorderColor = Color.Crimson;
c1CalendarView1.Theme.Titles.Weekend.BorderColor = Color.DarkCyan;
c1CalendarView1.Theme.Common.BorderColor = Color.PeachPuff;

// apply font settings to dates and titles in calendar
c1CalendarView1.Theme.Day.Bolded.Font = 
    new Font ("Microsoft Sans Serif", 8.25F,
    (FontStyle.Bold | FontStyle.Underline));
c1CalendarView1.Theme.Day.Weekend.Font = 
    new Font("Microsoft Sans Serif", 8.25F, 
    FontStyle.Bold, GraphicsUnit.Point, 0);
c1CalendarView1.Theme.Titles.Day.Font = 
    new Font("Microsoft Sans Serif", 8.25F, 
    FontStyle.Bold, GraphicsUnit.Point, 0);
c1CalendarView1.Theme.Titles.Month.Font = 
    new Font("Microsoft Sans Serif", 9F, 
    (FontStyle.Bold | FontStyle.Underline), GraphicsUnit.Point, 0);
c1CalendarView1.Theme.Titles.Week.Font = 
    new Font("Microsoft Sans Serif", 6F, FontStyle.Bold);

// set foreground color for dates and titles in calendar
c1CalendarView1.Theme.Day.Bolded.ForeColor = Color.Crimson;
c1CalendarView1.Theme.Day.Disabled.ForeColor = SystemColors.ControlText;
c1CalendarView1.Theme.Day.Trail.ForeColor = Color.Transparent;
c1CalendarView1.Theme.Day.Weekend.ForeColor = Color.Crimson;
c1CalendarView1.Theme.Titles.Month.ForeColor = Color.Crimson;

// set background color for dates and titles in calendar and for calendar as well
c1CalendarView1.Theme.Day.Bolded.BackColor = Color.Pink;
c1CalendarView1.Theme.Day.Disabled.BackColor = Color.LightGray;
c1CalendarView1.Theme.Day.Ordinary.BackColor = Color.White;
c1CalendarView1.Theme.Day.Trail.BackColor = Color.White;
c1CalendarView1.Theme.Titles.Day.BackColor = Color.PeachPuff;
c1CalendarView1.Theme.Titles.Week.BackColor = Color.PeachPuff;
c1CalendarView1.Theme.Day.Weekend.BackColor = Color.Pink;
c1CalendarView1.Theme.Common.BackColor = Color.Linen;