ASP.NET Calendar Controls

Calendar control control creates a versatile and attractive calendar window that shows one month at a time. The user can navigate from one month to the next, select a specific date, and even select a range of days (if multiple selections are allowed). The Calendar control has many properties that all together allow you to change almost any part of it.

For example, you can customize the foreground and background colors, font, header, date format, currently selected date, etc. It also provides several events that allow you to react to the user changing the current month (VisibleMonthChanged), the user selecting the date (SelectionChanged), and the Calendar control preparing to render the day (DayRender).

The following Calendar descriptor sets up several basic properties:

<asp:Calendar runat="server" ID="Calendar1" ForeColor="green" BackColor="lightyellow" />

The most important event of Calendar is SelectionChanged, which is triggered every time the user clicks on some date. The basic event handler that responds to the SelectionChanged event and displays the selected date is shown below:

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
        Label1.Text = "You choose: " + Calendar1.SelectedDate.ToLongDateString();
}

Every time a user interacts with the calendar, a sendback is initiated. This allows the developer to react immediately to the selection event and the Calendar control itself to re-visualize its interface and therefore display a new month or a new selected date. The Calendar control does not support the AutoPostBack property.

You can also allow whole weeks or months or individual dates to be selected, or you can render the control as a static calendar that does not allow selection. The only thing to remember is that when permitting month selection, the user can also select individual weeks or days.

Similarly, when week selection is enabled, the user can also select individual days. The type of selection is set using the SelectionMode property. You may also need to set the FirstDayOfWeek property to adjust the week selection. (For example, setting FirstDayOfWeek to the enumerated value Monday will select weeks from Monday through Sunday.)

If you enable multiple date selection (by setting Calendar.SelectionMode to a value other than Day), you will need to check the SelectedDates property instead of SelectedDate. The SelectedDates property provides a collection of all selected dates that you can view, as shown below:

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
        Label1.Text = "You choose these dates: <br />";
        foreach (DateTime dt in Calendar1.SelectedDates)
        {
            Label1.Text += dt.ToLongDateString() + "<br />";
        }
}

The Calendar control supports many formatting-related properties, most of which appear on the underlying HTML table view (such as CellSpacing, CellPadding, Caption, and CaptionAlign).

In addition, you can also separately customize parts of this control using group formatting options called styles (which provide options for setting color, font, and alignment). Examples of these styles are DayHeaderStyle, DayStyle, NextPrevStyle, OtherMonthDayStyle, SelectedDayStyle, TitleStyle, TodayDayStyle, and WeekendDayStyle. The properties of all of these styles can be changed in the Properties window.

Finally, by handling the DayRender event, you can completely change the appearance of the cell being rendered. This event is extremely powerful. It allows you not only to specify the dates that should be available for selection, but also, through the e.Cell property, to configure the cell in which the date is placed. (The Calendar control is essentially a complex HTML table.)

For example, you can highlight an important date or even add additional controls or HTML content to the cell. Below is an example that changes the background and foreground colors for holidays, and makes them unselectable:

<asp:Calendar runat="server" ID="Calendar1" ForeColor="#663399" BackColor="#FFFFCC"
            OnSelectionChanged="Calendar1_SelectionChanged" BorderColor="#FFCC66"
            BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
            Height="200px" SelectionMode="DayWeekMonth" ShowGridLines="True" Width="220px" 
            OnDayRender="Calendar1_DayRender">
            <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
            <SelectorStyle BackColor="#FFCC66" />
            <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
            <OtherMonthDayStyle ForeColor="#CC9966" />
            <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
            <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
            <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt"
                ForeColor="#FFFFCC" />
</asp:Calendar>

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
        if (e.Day.IsWeekend)
        {
            e.Cell.BackColor = System.Drawing.Color.Green;
            e.Cell.ForeColor = System.Drawing.Color.Yellow;
            e.Day.IsSelectable = false;
        }
}