How to: Format Calendar Web Server Control Elements Using Styles

  • Article

The Calendar control, like most Web server controls, allows you to use styles to specify the appearance of the control, including aspects such as font, color, and borders. For general information about using styles with Web server controls, see ASP.NET Web Server Controls and CSS 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.

Visual Studio WebApp Calendar Description

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

Calendar Element

Description

DayStyle

Days of the current month. Weekends, today, and the selected day can have different styles (see below).

DayHeaderStyle

Row above the calendar where the names of the days appear.

NextPrevStyle

Sections at the left and right ends of the title bar where the month-navigation LinkButtons are.

OtherMonthDayStyle

Days from the previous and next month that appear on the current month view.

SelectedDayStyle

The day selected by the user.

SelectorStyle

The column to the left containing links for selecting a week or the whole month.

TitleStyle

Title 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.

TodayDayStyle

Today's date.

WeekendDayStyle

Weekend days.

To set calendar element styles

  1. Type a style element, such as an <DayStyle> or <TitleStyle> element, into the page as a child of the Calendar control. For syntax, see Calendar Web Server Control.

  2. Set properties (attributes) of the style element, such as BackColor or BorderWidth.

    The following shows a Calendar control declaration with a DayStyle element:

    <asp:Calendar id="Calendar1" runat="server">
   <DayStyle BackColor="#FF8080" 
      BorderWidth="2"
      BorderStyle="Groove">
   </DayStyle>
</asp:Calendar>

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:

    Calendar1.DayStyle.Font.Size = New FontUnit(10)
Calendar1.TitleStyle.ForeColor = System.Drawing.Color.Red

    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

Concepts

Calendar Web Server Control Overview