Export (0) Print
Expand All

Customizing Individual Days in a Calendar Web Server Control

Visual Studio .NET 2003

By default, days in the Calendar control are simply displayed as numbers. (If day selection is enabled, the numbers appear as links. For details, see Controlling User Date Selection in a Calendar Web Server Control.) However, 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.

When the Calendar control is creating the output to send to the browser, it raises a DayRender event you can handle. The control calls your method for each day as it is preparing the day for display, and 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 DayRenderEvent. The DayRenderEvent 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

  1. Create a method for the Calendar control's DayRender event. The event should have the following signature:
    ' Visual Basic
    Private Sub Calendar1_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles Calendar1.DayRender
    ' Additional code here
    End Sub
    
    // C#
    private void Calendar1_DayRender (object sender, System.Web.UI.WebControls.DayRenderEventArgs e)
    {
       // Additional code here
    }
    
  2. In the method, set properties of the Cell object available via the DayRenderEvent argument, as in the following example:
    ' Visual Basic
       If (e.Day.IsToday) Then
          e.Cell.BackColor = System.Drawing.Color.Red
       End If
    
    // C#
       if (e.Day.IsToday)
       {
          e.Cell.BackColor = System.Drawing.Color.Red;
       }
    

The following example shows a simple but complete method that illustrates 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.

' Visual Basic
Public Sub Calendar1_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.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, 2000 to Nov 30, 2000.
   If ((e.Day.Date >= New Date(2000, 11, 23)) _
      And (e.Day.Date <= New Date(2000, 11, 30))) Then
      e.Cell.ApplyStyle(vacationStyle)
   ElseIf (e.Day.IsWeekend) Then
      e.Cell.ApplyStyle(weekendStyle)
   End If
End Sub

// C#
private void Calendar1_DayRender (object sender, System.Web.UI.WebControls.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 Day object in the DayRenderEvent argument. Specifically, query the Date property of the Day object. Then set that day's IsSelectable property to true. In the following example, the date September 10, 2001 is made selectable; all other dates are made not selectable.
  • July 4, 2000 is made selectable if it is one of myHoliday's days.
    ' Visual Basic
    Public Sub Calendar1_DayRender(ByVal sender As Object, _
    ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) _
    Handles Calendar1.DayRender
       Dim myAppointment As Date = New Date(2000, 9, 10)
       If (e.Day.Date = myAppointment) Then
          e.Day.IsSelectable = True
       Else
          e.Day.IsSelectable = False
       End If
    End Sub
    
    // C#
    private void Calendar1_DayRender(object sender, System.Web.UI.WebControls.DayRenderEventArgs e)
    {
       DateTime myAppointment = new DateTime(2001,9,10);
       if (e.Day.Date == myAppointment)
       {
          e.Day.IsSelectable = true;
       }
       else
       {
          e.Day.IsSelectable = false; 
       }
    }
    

To add content to an individual day

  • In a method for the Calendar control's DayRender event, add any valid Web Forms page element (including HTML) to the Controls collection of the Day object from the DayRenderEvent argument.

    The following example displays holidays. The holidays are 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 something, a label control is created with the holiday text and added into the Controls collection for that day.

    ' Visual Basic
    ' Add to the declarations section of the form class.
    Dim holidays(13, 32) As String
    
    ' Add to form load.
    holidays(1, 1) = "Birthday"
    holidays(2, 14) = "Anniversary"
    
    Public Sub Calendar1_DayRender(ByVal sender As Object, _
       ByVal e As System.Web.UI.WebControls.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
    
    // C#
    // Add this to the class members of the form.
    string[,] holidays = new String[13,32];
    
    // Add this to the Page_Load event.
    holidays[1,1] = "Birthday";
    holidays[2,14] = "Anniversary";
    
    // Add this to the DayRender event.
    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);
    }
    

See Also

Customizing Calendar Web Server Control Appearance | Controlling User Date Selection in a Calendar Web Server Control | Controlling Month Navigation in a Calendar Web Server Control

Show:
© 2015 Microsoft