Exploring the Calendar Control...

Date: December 8, 2002

In this article we will utilize a number of the properties of the Calendar Control to change the calendar's appearance. The default values produce a usable, but not very attractive control. Much can be done to improve its appearance. We will also make use of two of the control's events to determine and display selected dates, and to react to changing the month displayed by the control.

Most of the properties will be set in the property list for the control in the .aspx file. But properties can also be set in Visual Basic code so we set a few in the code-behind file as well.

First the properties and the call of one event handler in the .aspx file.

Since the calendar is rendered by .Net as an html table, table attributes such as CellPadding and CellSpacing can be set for the Calendar Control. Likewise, we can control the BackColor and ForeColor, Font, and Height and Width settings.

Variations of the TitleStyle group of properties can be used to control the top line of the calendar where current month and year are shown. We can also set the properites for the days of the month that are displayed using the DayHeaderStyle group of properties. We can also set properties for the next and previous month links in the title bar. We can even change the display properties of weekend days and "other month days" by using the WeekEndDayStyle and OtherMonthDayStyle property groups. "Other month days" are the days that show previous to and following the current month days. Once you run this program you will see what we mean.

Of course, you will probably want to use the calendar to allow the user to select one or more dates. This program is set up to allow a single date selection. In a second program below, multiple dates can be selected. To allow the selection of a date we implement the OnSelectionChanged event.

<asp:Calendar ID="calDates"
              CellPadding = "2"
              CellSpacing = "2"
              BackColor="Ivory"
              ForeColor="Navy"
              Font-Name="Verdana"
              Font-Size="12pt"
              Font-Bold="True"
              Height="200"
              Width="400"
              TitleStyle-BackColor="#3366FF"
              TitleStyle-ForeColor="White"
              TitleStyle-Font-Bold="True"
              DayHeaderStyle-Font-Bold="True"
              DayHeaderStyle-Font-Italic="True"
              DayHeaderStyle-ForeColor="Red"
              NextPrevStyle-Font-Italic="True"
              NextPrevStyle-BackColor="Ivory"
              WeekEndDayStyle-Font-Italic="True"
              WeekEndDayStyle-ForeColor="Green"
              OtherMonthDayStyle-Font-Italic="True"
              OtherMonthDayStyle-BackColor="White"
              OtherMonthDayStyle-ForeColor="Gray"
              SelectedDayStyle-BackColor="#3366FF"
              OnSelectionChanged="calDates_Change"
              Runat="server">
</asp:Calendar>
<p>
<asp:Label ID="lblDate" BackColor="Navy" ForeColor="White"
          Runat="server" Font-Bold="True">
</asp:Label>

As stated earlier we can also set properties in VB code. The following code-behind page sets a few additional properties, and contains the date selection event handler code. The sub-routine "calDates_Change" is used capture the selected date and show it in ShortDate format. This calendar also initializes with today's date selected. This is accomplished by using the Convert function. The properties should be self explanatory. Notice that we have our calendar beginning with Monday rather the default value of Sunday. We do this using the FirstDayOfWeek property.

Imports System
Imports System.DateTime
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Public Class SelectDay : Inherits Page

  Protected lblDate As Label
  Protected calDates As Calendar

  Public Sub calDates_Change(ByVal sender As Object, ByVal e As EventArgs)

    lblDate.Text = "You selected: " & calDates.SelectedDate.ToShortDateString()

  End Sub
  Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    If Not IsPostBack Then
      calDates.SelectedDate = Convert.ToDateTime(Now)
      calDates.DayNameFormat = DayNameFormat.Short
      calDates.NextPrevFormat = NextPrevFormat.ShortMonth
      calDates.TitleFormat = TitleFormat.MonthYear
      calDates.FirstDayOfWeek = FirstDayOfWeek.Monday
    End If
  End Sub

End Class

You may run this program by clicking Here.

We follow with one more example of the Calendar Control. In this version we've made no attempt to make the control pretty. Instead we illustrate one more property setting which allows us to show the full names of the days, and more importantly, utilize events to allow for selection of multiple dates and to react to a change of Month selected.

As can be seen below, the DayNameFormat as been set to "Full". We also implement the OnSelectionChanged and OnVisibleMonthChanged events. Since we are allowing for the selection of a full week or a full month we have also set the SelectMonthText and SelectWeekText properties.

<asp:Calendar ID="calDayWeekMonth"
              SelectionMode="DayWeekMonth"
              Font-Names="Verdana"
              DayNameFormat="Full"
              SelectMonthText="Select Month"
              SelectWeekText="Select Week"
              OnSelectionChanged="calDayWeekMonth_Change"
              OnVisibleMonthChanged="calMonthChange"
              Runat="server">
</asp:Calendar>
<p>
<asp:Label ID="lblMonth" Runat="Server"></asp:Label>
<br>
<asp:Label ID="lblDates" Runat="server"></asp:Label>

In the code-behind file we create event handlers for the OnSelectionChanged and OnVisibleMonthChanged events.

We have a subroutine for the month change which uses the PreviousDate and NewDate properties to react to the user clicking on the next or previous month links in the title bar of the calendar control. Instead of allowing for only a single date selection (which still works), we can also capture date ranges by using the SelectedDates collection.

Imports System
Imports System.DateTime
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Public Class DayWeekMonth : Inherits Page

  Protected lblMonth As Label
  Protected lblDates As Label
  Protected calDayWeekMonth As Calendar

  Public Sub calMonthChange(ByVal sender As Object, ByVal e As MonthChangedEventArgs)
    lblMonth.Text = "You moved from month " & e.PreviousDate.Month & _
                    " to month " & e.NewDate.Month & "."
  End Sub

  Public Sub calDayWeekMonth_Change(ByVal sender As Object, ByVal e As EventArgs)
    Dim myDates As DateTime

    lblDates.Text = "You selected: "
    For Each myDates In calDayWeekMonth.SelectedDates
      lblDates.Text &= "<br>" & myDates.ToShortDateString()
    Next
  End Sub

End Class

You may run this program by clicking here.
You may download these programs by clicking Here.