Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

Formatting Web Calendar Elements Using Styles

Visual Studio .NET 2003

The Calendar control, like all Web server controls, allows you to use styles to specify the appearance of the control, including aspects such as font, color, borders, and so on. For general information about using styles with Web server controls, see Customizing the Appearance of ASP.NET Server Controls Using Styles.

Note   Styles are not fully supported in all browsers.

To allow you flexibility in customizing the appearance of the calendar output, the Calendar control supports styles for a number of discrete elements that make up the calendar grid. The following diagram displays a calendar with all optional elements displayed.


The following table describes each of the elements that you can control using styles.

Calendar ElementDescription
DayStyleDays of the current month. Weekends, today, and the selected day can have different styles (see below).
DayHeaderStyleRow above the calendar where the names of the days appear.
NextPrevStyleSections at the left and right ends of the title bar where the month navigation LinkButtons are.
OtherMonthDayStyleDays from the previous and next month that appear on the current month view.
SelectedDayStyleThe day selected by the user.
SelectorStyleThe column to the left containing links for selecting a week or the whole month.
TitleStyleTitle bar at the top of the calendar containing the month name and month navigation links. If NextPrevStyle is set, it overrides the extreme ends of the title bar.
TodayDayStyleToday's date.
WeekendDayStyleWeekend days.

To set calendar element styles in the Web Forms Designer

  1. In Design view, select the Calendar control.
  2. In the Properties window, locate the style element to set, such as DayStyle, and then expand it to display all style settings.
    Tip   If you display properties by category, all the style elements appear together under Style.
  3. Change the style settings you want to change. Many style settings, such as color and border settings, allow you to select settings from a drop-down list.

You can also set style elements at run time in code.

To set calendar element styles programmatically

  • Set properties of individual style elements using the following syntax:
    Calendar1.StyleName.Property = setting

    The following examples illustrate some typical style settings for the Calendar control:

    ' Visual Basic
    Calendar1.DayStyle.Font.Size = New FontUnit(10)
    Calendar1.TitleStyle.ForeColor = System.Drawing.Color.Red
    // C#
    Calendar1.DayStyle.Font.Size = new FontUnit(10);
    Calendar1.TitleStyle.ForeColor = System.Drawing.Color.Red;
    Note   For details about setting properties, see Setting ASP.NET Server Control Properties.

See Also

Customizing the Appearance of ASP.NET Server Controls Using Styles | Customizing Individual Days in a Calendar Web Server Control

© 2015 Microsoft