Selecting multiple dates from a .NET Calendar Control

While the .NET Calendar control is very handy right out of the box, you may find yourself wanting for more. By default the calendar control does allow you to select a date or select a whole week. But what happens if you want to select random dates?

The code below shows how to do this:

1. Create the calendar control.

<asp:Calendar ID="calRunDate" runat="server" OnDayRender="calRunDate_DayRender" CssClass="myCalendar" DayNameFormat="FirstTwoLetters" ShowGridLines="true" CellPadding="1" TitleStyle-BackColor="Transparent" OtherMonthDayStyle-BackColor="white" OtherMonthDayStyle-ForeColor="gray" PrevMonthText=" <img src='images/caltriangleleft.gif' border='0'>" NextMonthText="<img src='images/caltriangleright.gif' border='0'> " TitleStyle-CssClass="calTitleStyle" OtherMonthDayStyle-CssClass="calOtherMonthDayStyle" NextPrevStyle-CssClass="calNextPrevStyle" DayHeaderStyle-CssClass="calDayHeaderStyle" TodayDayStyle-CssClass="calTodayDayStyle" SelectorStyle-CssClass="calSelectorStyle" WeekendDayStyle-CssClass="calWeekendDayStyle" SelectedDayStyle-CssClass="calSelectedDayStyle" DayStyle-CssClass="calDayStyle"></asp:Calendar>

<div style="padding-top: 5px; text-align: center; width: 180px;">
     <asp:Button ID="btnClearDates" runat="server" Text="Clear Selection" CssClass="button"></asp:Button>
</div>
 
2. Create a global list variable to hold the selected dates.
 
Public Shared g_list As New List(Of DateTime)() 'List used for holding multiple date selections
 
3. Check to see if a date is selected and save it to the list/session.
 
Protected Sub calRunDate_DayRender(ByVal sender As Object, ByVal e As DayRenderEventArgs) Handles calRunDate.DayRender

     'Check to see if a day has been selected
     If e.Day.IsSelected = True Then

          'If so add it to the global list variable
          g_list.Add(e.Day.[Date])

     End If

     'Save the list to a session variable
     Session("SelectedDates") = g_list

End Sub

4. Check to see if user has selected/deselected a date.

Protected Sub calRunDate_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs) Handles calRunDate.SelectionChanged

     'Let's grab the date the user selected
     'This will be needed to determine if they are unselecting a date
     'see below

     Dim mydate As Date
     mydate = calRunDate.SelectedDate

     'Check to see if the session variable exists
     If Session("SelectedDates") IsNot Nothing Then

          'If so, assign the session variable to a new list variable
          Dim newList As List(Of DateTime) = DirectCast(Session("SelectedDates"), List(Of DateTime))

          'loop through the list
          For Each dt As DateTime In newList

               'Check to see if the date in the list is equal to the date
                   'they selected. If so, then they are deselecting this date
             If CType(dt, Date) = mydate Then

                    'Remove the date from the selected dates
                    calRunDate.SelectedDates.Remove(dt)
                Else

                    'Add the date the selected dates on the calendar
                    calRunDate.SelectedDates.Add(dt)

                End If

          Next

          'Clear the list
          g_list.Clear()

     End If

End Sub

5. Grab the dates the user selected.

Via a button or some other object, run this code to get all of the dates the user selected.

     'Create a date variable to be used for looping through
      'the selected dates on the calendar
      'Dim item As Date

     'loop through the selected dates on the calendar
     'For Each item In calRunDate.SelectedDates

          'Add the dates to a text box.
          'Use commas between them
          txtRunDate.Text = txtRunDate.Text & ", " & item.Date

      'Next

6. Clear all selected dates.

You can also clear all of the selected dates by using the following code:

Protected Sub btnClearDates_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnClearDates.Click

     'Clear the selected dates on the calendar
     calRunDate.SelectedDates.Clear()

     'Clear the session variable of any dates
     Session("SelectedDates") = Nothing

     'Clear the global list variable
     g_list.Clear()

End Sub

Adding mouse over events to a .NET Calendar Control

The .NET calendar control is handy way to display a functional calendar. However, the styling of the control out of the box is pretty generic.

One way to spruce things up is to enable a mouse over as the user is browsing the dates.

Below is the code I used to do this. This code should be placed in the DayRender sub of the calendar control:

'Create colors for the mouse over and out

Dim onmouseoverStyle As String = "this.style.backgroundColor='#A8C0D0';"
Dim onmouseoutStyle As String = "this.style.backgroundColor='@BackColor'"

'create a variable to hold the row back color
Dim rowBackColor As String = String.Empty

'Add the attributes to the individual calendar day cells
e.Cell.Attributes.Add("onmouseover", onmouseoverStyle)
e.Cell.Attributes.Add("onmouseout", onmouseoutStyle.Replace("@BackColor", rowBackColor))

Styling a .NET Calendar Control

ASP.NET comes with a very handy calendar control. This control will allow a user to click on a calendar icon and view a calendar. They can browse the different years and months and select a date. Once a date has been selected, it is displayed in the .NET control wired to the calendar control.

While this calendar control is very handy, the default styling is very generic. Below is my attempt at styling the calendar. I have found the control to be very finicky with using CSS. So, therefore, I am using a combination of control properties and CSS.

For the control properties, I am using this:

<asp:Calendar ID="calRunDate" runat="server" OnDayRender="calRunDate_DayRender" CssClass="myCalendar" DayNameFormat="FirstTwoLetters" ShowGridLines="true" CellPadding="1" TitleStyle-BackColor="Transparent" OtherMonthDayStyle-BackColor="white" OtherMonthDayStyle-ForeColor="gray" PrevMonthText=" <img src='images/caltriangleleft.gif' border='0'>" NextMonthText="<img src='images/caltriangleright.gif' border='0'> " TitleStyle-CssClass="calTitleStyle" OtherMonthDayStyle-CssClass="calOtherMonthDayStyle" NextPrevStyle-CssClass="calNextPrevStyle" DayHeaderStyle-CssClass="calDayHeaderStyle" TodayDayStyle-CssClass="calTodayDayStyle" SelectorStyle-CssClass="calSelectorStyle" WeekendDayStyle-CssClass="calWeekendDayStyle" SelectedDayStyle-CssClass="calSelectedDayStyle" DayStyle-CssClass="calDayStyle"></asp:Calendar>

For the CSS, I am using this:

.myCalendar { border: solid 1px #CDCDB5; width: 180px; background: url(images/calendarbg.gif) repeat-x; z-index: 1000; }
.myCalendar .calDayStyle a { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: bold; }
.myCalendar .calDayStyle a:hover { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calSelectedDayStyle { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calWeekendDayStyle a { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: bold; }
.myCalendar .calSelectorStyle { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calTodayDayStyle a { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: bold; }
.myCalendar .calDayHeaderStyle { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calNextPrevStyle { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calOtherMonthDayStyle a { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calTitleStyle { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; height: 10px; }