Appearance and Styling

The Calendar controls offer different properties to enhance the appearance in different ways based on user requirements. Also, CalendarView and DateEdit provide different styling properties to conveniently style all visual attributes of the controls.

Let's explore the appearance and styling aspects in both CalendarView and DateEdit in the below sections.

CalendarView

CalendarView provides various options to style the appearance of the control as per your requirement, and change the look and feel of the application.

CalendarView offers the following appearance and styling features:

Appearance

CalendarView provides the following properties to improve the appearance of the control.

This is how the CalendarView control looks after setting these properties:

You can also implement these properties programmatically as shown in the code snippet below:

// Add appearance properties for CalendarView
calendarView.CalendarDimensions = 6;
calendarView.CurrentMonthDisplayOffset = 0;
calendarView.DayTitlePosition = C1.CalendarView.Position.Bottom;
calendarView.MonthTitlePosition = C1.CalendarView.Position.Left;
calendarView.Font = new System.Drawing.Font("Pristina", 8F, System.Drawing.FontStyle.Regular);
calendarView.ShowArrowButtons = false;
calendarView.ShowToday = false;
calendarView.ShowWeekNumbers = false;
calendarView.BoldedDates = new DateTime[]
      {
                 new DateTime(2021, 5, 9),
            new DateTime(2021, 5, 10),
            new DateTime(2021, 5, 11),
            new DateTime(2021, 5, 12),
            new DateTime(2021, 5, 13),
            new DateTime(2021, 5, 14),
            new DateTime(2021, 5, 15)
      };

Annually Bolded Dates

The C1CalendarView class provides the AnnuallyBoldedDates property to set the dates that appear in bold fontstyle every year. This property can be set via the Properties window or programmatically, just like in the case of BoldedDates property.

The GIF below elegantly depicts how the date '28 May' stays in bold fontstyle throughout years while navigating through the CalendarView control.

Styling

CalendarView provides the Styles property to style the 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 calendar UI after implementing styling properties via Properties window such as BackImage, ImageArrowPrevious and ImageArrowNext properties applied to CalendarView.

The following code snippet shows how to implement other styling properties such as HorizontalAlignment, VerticalAlignment, Border, BorderColor, Font, ForeColor and BackColor.

// set horizontal and vertical alignment for titles and calendar
calendarView.Styles.Titles.Week.HorizontalAlignment = C1.Framework.Alignment.Far;
calendarView.Styles.Common.HorizontalAlignment = C1.Framework.Alignment.Near;
calendarView.Styles.Titles.Week.VerticalAlignment = C1.Framework.Alignment.Far;
calendarView.Styles.Common.VerticalAlignment = C1.Framework.Alignment.Near;
// set borders for different dates in calendar
calendarView.Styles.Day.Bolded.Border = new C1.Framework.Thickness(2, 2, 2, 2);
calendarView.Styles.Day.Ordinary.Border = new C1.Framework.Thickness(1, 1, 1, 1);
calendarView.Styles.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
calendarView.Styles.Day.Bolded.BorderColor = Color.Crimson;
calendarView.Styles.Day.Ordinary.BorderColor = Color.PeachPuff;
calendarView.Styles.Day.Today.BorderColor = SystemColors.ControlLightLight;
calendarView.Styles.Day.Weekend.BorderColor = Color.LightPink;
calendarView.Styles.Titles.Day.BorderColor = Color.Crimson;
calendarView.Styles.Titles.Week.BorderColor = Color.Crimson;
calendarView.Styles.Titles.Weekend.BorderColor = Color.DarkCyan;
calendarView.Styles.Common.BorderColor = Color.PeachPuff;
// apply font settings to dates and titles in calendar
calendarView.Styles.Day.Bolded.Font =
    new Font ("Microsoft Sans Serif", 8.25F,
    (FontStyle.Bold | FontStyle.Underline));
calendarView.Styles.Day.Weekend.Font =
    new Font("Microsoft Sans Serif", 8.25F,
    FontStyle.Bold, GraphicsUnit.Point, 0);
calendarView.Styles.Titles.Day.Font =
    new Font("Microsoft Sans Serif", 8.25F,
    FontStyle.Bold, GraphicsUnit.Point, 0);
calendarView.Styles.Titles.Month.Font =
    new Font("Microsoft Sans Serif", 9F,
    (FontStyle.Bold | FontStyle.Underline), GraphicsUnit.Point, 0);
calendarView.Styles.Titles.Week.Font =
    new Font("Microsoft Sans Serif", 6F, FontStyle.Bold);
// set foreground color for dates and titles in calendar
calendarView.Styles.Day.Bolded.ForeColor = Color.Crimson;
calendarView.Styles.Day.Disabled.ForeColor = SystemColors.ControlText;
calendarView.Styles.Day.Trail.ForeColor = Color.Transparent;
calendarView.Styles.Day.Weekend.ForeColor = Color.Crimson;
calendarView.Styles.Titles.Month.ForeColor = Color.Crimson;
// set background color for dates and titles in calendar and for calendar as well
calendarView.Styles.Day.Bolded.BackColor = Color.Pink;
calendarView.Styles.Day.Disabled.BackColor = Color.LightGray;
calendarView.Styles.Day.Ordinary.BackColor = Color.White;
calendarView.Styles.Day.Trail.BackColor = Color.White;
calendarView.Styles.Titles.Day.BackColor = Color.PeachPuff;
calendarView.Styles.Titles.Week.BackColor = Color.PeachPuff;
calendarView.Styles.Day.Weekend.BackColor = Color.Pink;
calendarView.Styles.Common.BackColor = Color.Linen;

The resulting image looks as follows:

DateEdit

DateEdit provides various properties to enhance the appearance and style the control as per your requirement and change the look and feel of the application you are creating.

DateEdit offers the following appearance features:

Appearance

DateEdit provides the following options to dramatically change the appearance of the control.

This is how the DateEdit control looks after setting these properties.

The following code snippet shows how to set the properties in DateEdit.

// Customize DateEdit dropdown calendar
// specify the number of months to display
dateEdit.Calendar.CalendarDimensions = 2;
// specify the maximum number of columns to display
dateEdit.Calendar.MaxColumns = 2;
// set the vertical orientation
dateEdit.Calendar.VerticalOrientationLayout = true;
// Set the maximum length of day names
dateEdit.Calendar.DayNameLength = 3;
// Set position of day title in the dropdown calendar
dateEdit.Calendar.DayTitlePosition = C1.CalendarView.Position.Left;
// Set position of month title in the dropdown calendar
dateEdit.Calendar.MonthTitlePosition = C1.CalendarView.Position.Left;
// Set whether dropdown calendar displays week numbers
dateEdit.Calendar.ShowWeekNumbers = true;

Font Settings and Alignment

DateEdit provides the following options to change the font settings and alignment of the control:

This is how the DateEdit control looks after changing the font settings and alignment.

The following code snippet shows how to apply font settings and text alignment in DateEdit.

// Apply font settings
dateEdit.Font = new Font("Microsoft Sans Serif", 9F, FontStyle.Italic);
// set text alignment
dateEdit.TextAlign = HorizontalAlignment.Left;

Styling

DateEdit provides DateEditStyles class to style the UI of the control, both the ComboBox and dropdown calendar. The DateEdit control provides the Editor property to get the styles, which determines the appearance of the DateEdit ComboBox. Different styling properties can be applied to the ComboBox such as Default, Focused, Hot, Disabled and ReadOnly. Likewise, This helps to get the styling attributes to be set on the control. DateEdit also provides the Calendar property to get the styles, which determines the appearance of the drop-down Calendar.

The table below provides an idea about the different styling options:

The snapshot below displays Default styling attribute applied to the DateEdit control.

The following code snippet shows how to style the ComboBox, Calendar and Buttons in DateEdit:

// Default ComboBox (Editor) Style
dateEdit.Styles.Editor.Default.BackColor = Color.LightCyan;
dateEdit.Styles.Editor.Default.ForeColor = Color.Brown;
dateEdit.Styles.Editor.Default.BorderColor = Color.Blue;
//Style Buttons for ComboBox (Editor)
dateEdit.Styles.Editor.Button.Default.BackColor = Color.Yellow;
dateEdit.Styles.Editor.Button.Default.ForeColor = Color.Red;
//Styles for Calendar
dateEdit.Styles.Calendar.Common.BackColor = Color.Beige;
dateEdit.Styles.Calendar.Common.BorderColor = Color.Red;
// Set ordinary day style
dateEdit.Styles.Calendar.Day.Ordinary.ForeColor = Color.DarkViolet;
//Today
dateEdit.Styles.Calendar.Day.Today.BackColor = Color.PaleGreen;
dateEdit.Styles.Calendar.Day.Today.ForeColor = Color.Orange;
//Clear button styling
dateEdit.Styles.Calendar.ClearButton.Default.BackColor = Color.Orange;
dateEdit.Styles.Calendar.ClearButton.Default.ForeColor = Color.Blue;

type=note

Note: The C1CalendarView and C1DateEdit classes for .NET provides the Styles property that has more styles settings for calendar and editor in comparison to its .NET Framework counterparts.