How to: Customize Individual Days in a Calendar Web Server Control

Article
10/15/2014

By default, days in the Calendar control are displayed as numbers. If day selection is enabled, the numbers appear as links. For details, see How to: Control User Date Selection in a Calendar Web Server Control.

You can customize the appearance and content of individual days, which allows you to:

Programmatically highlight certain days, for example, showing holidays in a different color.
Programmatically specify whether an individual day can be selected.
Add information into the day display, such as appointment or event information.
Customize the link text that users can click to select a day.

When the Calendar control is creating the output to send to the browser, it raises a DayRender event. The control raises the event for each day as it is preparing the day for display, so you can then programmatically examine which date is being rendered and customize it appropriately.

The DayRender event method takes two arguments: a reference to the control raising the event (the Calendar control) and an object of type DayRenderEventArgs. The DayRenderEventArgs object provides access to two additional objects:

Cell, a TableCell object that you can use to set the appearance of an individual day.
Day, which you can use to query information about the day being rendered, control whether the day can be selected, and add content to a day. The Day object supports various properties you can use to learn about the day (for example, IsSelected, IsToday, and so on). It also supports a Controls collection that you can manipulate to add content to the day.

To customize the appearance of an individual day

Create a method to handle the Calendar control's DayRender event.

In the method, set properties of the Cell object, which you can access with the DayRenderEventArgs argument.

The following example shows how to change the appearance of individual days. The method causes vacation days in the calendar to be rendered in yellow, while weekend days are rendered in green. In the example, vacation days are November 23 through November 30, 2005.

Protected Sub Calendar1_DayRender(ByVal sender As Object, _
        ByVal e As DayRenderEventArgs) Handles Calendar1.DayRender
    ' Display vacation dates in yellow boxes with purple borders.
    Dim vacationStyle As New Style()
    With vacationStyle
        .BackColor = System.Drawing.Color.Yellow
        .BorderColor = System.Drawing.Color.Purple
        .BorderWidth = New Unit(3)
    End With

    ' Display weekend dates in green boxes.
    Dim weekendStyle As New Style()
    weekendStyle.BackColor = System.Drawing.Color.Green

    ' Vacation is from Nov 23, 2005 to Nov 30, 2005.
    If ((e.Day.Date >= New Date(2005, 11, 23)) _
            And (e.Day.Date <= New Date(2005, 11, 30))) Then
        e.Cell.ApplyStyle(vacationStyle)
    ElseIf (e.Day.IsWeekend) Then
        e.Cell.ApplyStyle(weekendStyle)
    End If
End Sub

protected void Calendar1_DayRender(object sender, 
    DayRenderEventArgs e)
{
    // Display vacation dates in yellow boxes with purple borders.
    Style vacationStyle = new Style();
    vacationStyle.BackColor = System.Drawing.Color.Yellow;
    vacationStyle.BorderColor = System.Drawing.Color.Purple;
    vacationStyle.BorderWidth = 3;

    // Display weekend dates in green boxes.
    Style weekendStyle = new Style();
    weekendStyle.BackColor = System.Drawing.Color.Green;

    if ((e.Day.Date >= new DateTime(2000,11,23)) &&
        (e.Day.Date <= new DateTime(2000,11,30)))
    {
        // Apply the vacation style to the vacation dates.
        e.Cell.ApplyStyle(vacationStyle);
    }
    else if (e.Day.IsWeekend)
    {
        // Apply the weekend style to the weekend dates.
        e.Cell.ApplyStyle(weekendStyle);
    }

To specify that an individual day can be selected

In a method for the Calendar control's DayRender event, determine what day is being rendered by getting information from the Date property of the Day object.

Set that day's IsSelectable property to true.

The following example shows how to set the date October 1, 2005, as selectable; all other dates are made not selectable.

Protected Sub Calendar1_DayRender(ByVal sender As Object, _
        ByVal e As DayRenderEventArgs) Handles Calendar1.DayRender
    Dim myAppointment As Date = New Date(2005, 10, 1)
    If (e.Day.Date = myAppointment) Then
        e.Day.IsSelectable = True
    Else
        e.Day.IsSelectable = False
    End If
End Sub

protected void Calendar1_DayRender(object sender, 
    DayRenderEventArgs e)
{
    DateTime myAppointment = new DateTime(2005, 10, 1);
    if (e.Day.Date == myAppointment)
    {
        e.Day.IsSelectable = true;
    }
    else
    {
        e.Day.IsSelectable = false; 
    }
}

To add content to an individual day

In a handler for the Calendar control's DayRender event, add any HTML or ASP.NET Web control to the Controls collection of the Day object from the DayRenderEventArgs argument.

The following example displays holidays. The list of holidays is created as a two-dimensional array during page load. Holiday descriptions are loaded into the elements corresponding to their date. In the DayRender event method, each day is compared against the holiday array. If the corresponding element of the holiday array contains a value, a Label control is created with the holiday text and added into the Controls collection for that day.

Dim holidays(13, 32) As String

Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.Load
    holidays(1, 1) = "Birthday"
    holidays(2, 14) = "Anniversary"
End Sub

Protected Sub Calendar1_DayRender(ByVal sender As Object, _
        ByVal e As DayRenderEventArgs) Handles Calendar1.DayRender
    If e.Day.IsOtherMonth Then
        e.Cell.Controls.Clear()
    Else
        Dim aDate As Date = e.Day.Date
        Dim aHoliday As String = holidays(aDate.Month, aDate.Day)
        If (Not aHoliday Is Nothing) Then
            Dim aLabel As Label = New Label()
            aLabel.Text = "<br>" & aHoliday
            e.Cell.Controls.Add(aLabel)
        End If
    End If
End Sub

string[,] holidays = new String[13, 32];

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
    string aHoliday;
    DateTime theDate = e.Day.Date;
    aHoliday = holidays[theDate.Month, theDate.Day];
    if (aHoliday != null)
    {
        Label aLabel = new Label();
        aLabel.Text = " <br>" + aHoliday;
        e.Cell.Controls.Add(aLabel);
    }

}

protected void Page_Load(object sender, EventArgs e)
{
    holidays[1, 1] = "Birthday";
    holidays[2, 14] = "Anniversary";
}

To customize the link text for individual days

In a method for the Calendar control's DayRender event, get the SelectUrl property of the DayRenderEventArgs argument. The SelectUrl property returns the JavaScript that is normally rendered for that day to cause a postback indicating date selection.
Using concatenation, create an HTML hyperlink that uses the value of the SelectUrl property as the href attribute.

Add the hyperlink as the Text property of the Cell object.

The following example displays holidays. The list of holidays is created as a two-dimensional array during page load. Holiday descriptions are loaded into the elements corresponding to their date. In the DayRender event method, each day is compared against the holiday array. If the corresponding element of the holiday array contains a value, the code creates link text that displays the holiday name instead of the day number.

Dim holidays(13, 32) As String

Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.Load
    holidays(1, 1) = "Birthday"
    holidays(2, 14) = "Anniversary"
End Sub

Protected Sub Calendar1_DayRender(ByVal sender As Object, _
        ByVal e As DayRenderEventArgs) Handles Calendar1.DayRender
    If e.Day.IsOtherMonth Then
        e.Cell.Controls.Clear()
    Else
        Dim aDate As Date = e.Day.Date
        Dim aHoliday As String = holidays(aDate.Month, aDate.Day)
        If (Not aHoliday Is Nothing) Then
            e.Cell.Text = _
                "<a href=" & e.SelectUrl & ">" & aHoliday & "</a>"
        End If
    End If
End Sub

string[,] holidays = new String[13, 32];

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
    string aHoliday;
    DateTime theDate = e.Day.Date;
    aHoliday = holidays[theDate.Month, theDate.Day];
    if (aHoliday != null)
    {
        e.Cell.Text = "<a href=" + e.SelectUrl + ">" + 
           aHoliday + "</a>";
    }
}

protected void Page_Load(object sender, EventArgs e)
{
    holidays[1, 1] = "Birthday";
    holidays[2, 14] = "Anniversary";
}

How to: Customize Individual Days in a Calendar Web Server Control

To customize the appearance of an individual day

To specify that an individual day can be selected

To add content to an individual day

To customize the link text for individual days

See Also

Tasks

Concepts

Additional resources