Link to home
Start Free TrialLog in
Avatar of adamtrask
adamtrask

asked on

selecting multiple date in asp.net calendar control

Hello experts,

I need to be able to select multiple dates on a calendar control and highlight the selected cells' background color.

To be more precise, I need to let the user select a start date and an end date and have all the cells through these two dates highlighted.

I tried the code below which does exactly what I want when the user clicks a date in the calendar, but once he/she click on another date the highlight is moved from the first date to the latter. I need the highlight to stay on all selected dates. Or, better still, the user enters a start date into a text box and and and an end date into a second box and the dates from start to end be highlighted.

Thanks

 Protected Sub Calendar1_DayRender(ByVal sender As Object, _
  ByVal e As DayRenderEventArgs) Handles calendar1.DayRender

        If e.Day.IsSelected = True Then
            e.Cell.BackColor = System.Drawing.Color.Yellow
        End If

    End Sub

thanks
ASKER CERTIFIED SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of adamtrask
adamtrask

ASKER

Please, let me have it... thanks
The standard solution is to present the user with two calendar controls, one for the start date, one for the end date which can be in a different month. Here's a sample pulled from an old project. It uses the DayRender event to disable all dates prior to today's date. Then, after the user selects a start date, the second calendar is enabled but all dates prior to the start date are disabled. It also allows for the selection of a start time and end time, but you can ignore that.

Aspx and code behind below.
Public Partial Class Multi_dateCalendar
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Private Function BuildDateString(ByVal calendarControl As Integer) As String
        Dim dateStr As String = ""
        dateStr = calControM1.SelectedDate.ToString("yyyy-MM-dd") & " "
        If Me.ddAmPm1.SelectedValue = "PM" Then
            dateStr &= convertTime(Me.ddHourM1.SelectedValue) & ":" & Me.ddMinuteM1.SelectedValue
        Else
            dateStr &= Me.ddHourM1.SelectedValue & ":" & Me.ddMinuteM1.SelectedValue
        End If
        Return dateStr
    End Function

    Function convertTime(ByVal timeStr As String) As String
        Dim converted As String = ""
        Select Case timeStr
            Case "01"
                converted = "13"
            Case "02"
                converted = "14"
            Case "03"
                converted = "15"
            Case "04"
                converted = "16"
            Case "05"
                converted = "17"
            Case "06"
                converted = "18"
            Case "07"
                converted = "19"
            Case "08"
                converted = "20"
            Case "09"
                converted = "21"
            Case "10"
                converted = "22"
            Case "11"
                converted = "23"
            Case "12"
                converted = "12"
            Case Else
                converted = "00"
        End Select
        Return converted
    End Function

    Protected Sub CalContro_DayRender(ByVal sender As Object, ByVal e As DayRenderEventArgs) Handles calControM1.DayRender
        If (e.Day.Date > Today()) Then
            e.Day.IsSelectable = True
        Else
            e.Day.IsSelectable = False
        End If
    End Sub

    Protected Sub CalControM2_DayRender(ByVal sender As Object, ByVal e As DayRenderEventArgs) Handles calControM2.DayRender
        Dim startDate As DateTime = DateTime.MaxValue
        startDate = DateTime.Parse(calControM1.SelectedDate.ToString("yyyy-MM-dd"))
        'for end date calendar, make days prior to start date unselectable
        If (e.Day.Date > startDate) Then
            e.Day.IsSelectable = True
        Else
            e.Day.IsSelectable = False
        End If
    End Sub

    Protected Sub calControM1_SelectionChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles calControM1.SelectionChanged
        Me.textboxMultiDate1.Text = calControM1.SelectedDate.ToString("MMM d, yyyy")
        Me.textboxMultiDate2.Text = ""
        Me.calControM2.VisibleDate = calControM1.SelectedDate.ToString("yyyy-MM-dd") 'move end date calendar to same month as newly selected date on start date calendar
        Me.calControM2.SelectedDate = calControM1.SelectedDate.ToString("yyyy-MM-dd") 'select same date as start calendar as an initial value
        Me.calControM2.Enabled = True  'enable end date calendar after start date is chosen
    End Sub

    Protected Sub calControM2_SelectionChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles calControM2.SelectionChanged
        Me.textboxMultiDate2.Text = calControM2.SelectedDate.ToString("MMM d, yyyy")
        Me.butMultiDateSubmit.Enabled = True
    End Sub

    Protected Sub butMultiDateSubmit_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles butMultiDateSubmit.Click
        Dim dateStr As String = calControM1.SelectedDate.ToString("yyyy-MM-dd") & " "
        If Me.ddAmPm1.SelectedValue = "PM" Then
            dateStr &= convertTime(Me.ddHourM1.SelectedValue) & ":" & Me.ddMinuteM1.SelectedValue
        Else
            dateStr &= Me.ddHourM1.SelectedValue & ":" & Me.ddMinuteM1.SelectedValue
        End If
        Dim dateStr2 = calControM2.SelectedDate.ToString("yyyy-MM-dd") & " "
        If Me.ddAmPm2.SelectedValue = "PM" Then
            dateStr2 &= convertTime(Me.ddHourM2.SelectedValue) & ":" & Me.ddMinuteM2.SelectedValue
        Else
            dateStr2 &= Me.ddHourM2.SelectedValue & ":" & Me.ddMinuteM2.SelectedValue
        End If
        Me.resultsLabel.Text = "You selected from " & dateStr & " to " & dateStr2
    End Sub

End Class

Open in new window

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Multi-dateCalendar.aspx.vb" Inherits="testApp.Multi_dateCalendar" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <!--Multiple Date Panel-->
<asp:Panel runat="server" ID="pnlSelectMultiDate" Width="750" BackColor="#F0ECB7">
    <table cellpadding="0" cellspacing="0" style="border:0px;">
        <tr style="background-color:#00CC00;">
            <td style="width:50px;">
            </td>
            <td style="width:175px; padding-top:5px; padding-bottom:5px;">
                <span style="font-size:1.3em; font-weight:bold; color:White;">Date and Time </span>
            </td>
            <td style="width:175px;">
            </td>
            <td style="width:175px;">
            </td>
            <td style="width:175px;">
            </td>
        </tr>
        <tr>
            <td style="width:50px;">
            </td>
            <td style="width:175px; padding-top:5px; padding-bottom:5px;">
                <span>Choose a start date.</span>
            </td>
            <td style="width:175px;">
            </td>
            <td style="width:175px; padding-top:5px; padding-bottom:5px;">
                <span>Choose an end date.</span>
            </td>
            <td style="width:175px;">
            </td>
        </tr>
        <tr>
            <td style="width:50px;">
            </td>
            <td style="width:175px; padding-top:10px;">
                <asp:Calendar ID="calControM1" BackColor="#F0ECB7" BorderWidth="2" BorderStyle="Solid" BorderColor="#157500" runat="server" TodayDayStyle-Font-Bold="true" OnDayRender="CalContro_DayRender">
                    <SelectorStyle Font-Size="10pt" backcolor="AliceBlue" HorizontalAlign="Left"></SelectorStyle>
                    <DayStyle Font-Size="9pt" ForeColor="#000000" />
                    <NextPrevStyle font-size="9pt" forecolor="#FFFFCC"></NextPrevStyle>
                    <DayHeaderStyle Font-Size="9pt" height="1px" ForeColor="#000000" backcolor="AliceBlue"></DayHeaderStyle>
                    <SelectedDayStyle Font-Size="9pt" font-bold="True" backcolor="AliceBlue" ForeColor="#000080"></SelectedDayStyle>
                    <TitleStyle font-size="10pt" font-bold="True" forecolor="AliceBlue" backcolor="#157500"></TitleStyle>
                    <OtherMonthDayStyle Font-Size="9pt" forecolor="#999999"></OtherMonthDayStyle>
                </asp:Calendar>
            </td>
            <td style="width:175px; text-align:center;">
                <span>Selected Start date</span>
                <br />
                <asp:TextBox ReadOnly="True" runat="server" ID="textboxMultiDate1" Width="100" AutoPostBack="false"></asp:TextBox>
                <br /><br />
                <span>Start time. (Optional)</span>
                <br />             
                <asp:DropDownList runat="server" ID="ddHourM1" AutoPostBack="false">
                    <asp:ListItem Value="00" Text="00"></asp:ListItem>
                    <asp:ListItem Value="01" Text="1"></asp:ListItem>
                    <asp:ListItem Value="02" Text="2"></asp:ListItem>
                    <asp:ListItem Value="03" Text="3"></asp:ListItem>
                    <asp:ListItem Value="04" Text="4"></asp:ListItem>
                    <asp:ListItem Value="05" Text="5"></asp:ListItem>
                    <asp:ListItem Value="06" Text="6"></asp:ListItem>
                    <asp:ListItem Value="07" Text="7"></asp:ListItem>
                    <asp:ListItem Value="08" Text="8"></asp:ListItem>
                    <asp:ListItem Value="09" Text="9"></asp:ListItem>
                    <asp:ListItem Value="10" Text="10"></asp:ListItem>
                    <asp:ListItem Value="11" Text="11"></asp:ListItem>
                    <asp:ListItem Value="12" Text="12"></asp:ListItem>
                </asp:DropDownList>
                <span style="font-size:1.5em;">:</span>
                <asp:DropDownList runat="server" ID="ddMinuteM1" AutoPostBack="false">
                    <asp:ListItem Value="00" Text="00"></asp:ListItem>
                    <asp:ListItem Value="15" Text="15"></asp:ListItem>
                    <asp:ListItem Value="30" Text="30"></asp:ListItem>
                    <asp:ListItem Value="45" Text="45"></asp:ListItem>
                </asp:DropDownList>
                <asp:DropDownList runat="server" ID="ddAmPm1" AutoPostBack="false">
                    <asp:ListItem Value="PM" Text="PM"></asp:ListItem>
                    <asp:ListItem Value="AM" Text="AM"></asp:ListItem>
                </asp:DropDownList>
            </td>
            <td style="width:175px; padding-top:10px;">
                <asp:Calendar ID="calControM2" BackColor="#F0ECB7" BorderWidth="2" BorderStyle="Solid" Enabled="false" BorderColor="#157500" runat="server" TodayDayStyle-Font-Bold="true" SelectorStyle-HorizontalAlign="Left" OnDayRender="CalControM2_DayRender">
                    <SelectorStyle Font-Size="10pt" backcolor="AliceBlue" HorizontalAlign="Left"></SelectorStyle>
                    <DayStyle Font-Size="9pt" ForeColor="#000000" />
                    <NextPrevStyle font-size="9pt" forecolor="#FFFFCC"></NextPrevStyle>
                    <DayHeaderStyle Font-Size="9pt" height="1px" ForeColor="#000000" backcolor="AliceBlue"></DayHeaderStyle>
                    <SelectedDayStyle Font-Size="9pt" font-bold="True" backcolor="AliceBlue" ForeColor="#000080"></SelectedDayStyle>
                    <TitleStyle font-size="10pt" font-bold="True" forecolor="AliceBlue" backcolor="#157500"></TitleStyle>
                    <OtherMonthDayStyle Font-Size="9pt" forecolor="#999999"></OtherMonthDayStyle>
                </asp:Calendar>
            </td>
            <td style="width:175px; text-align:center;">
                <span>Selected End Date</span>
                <br />
                <asp:TextBox ReadOnly="True" runat="server" ID="textboxMultiDate2" Width="100" AutoPostBack="false"></asp:TextBox>
                <br /><br />
                <span>End time. (Optional)</span>
                <br />                            
                <asp:DropDownList runat="server" ID="ddHourM2" AutoPostBack="false">
                    <asp:ListItem Value="00" Text="00"></asp:ListItem>
                    <asp:ListItem Value="01" Text="1"></asp:ListItem>
                    <asp:ListItem Value="02" Text="2"></asp:ListItem>
                    <asp:ListItem Value="03" Text="3"></asp:ListItem>
                    <asp:ListItem Value="04" Text="4"></asp:ListItem>
                    <asp:ListItem Value="05" Text="5"></asp:ListItem>
                    <asp:ListItem Value="06" Text="6"></asp:ListItem>
                    <asp:ListItem Value="07" Text="7"></asp:ListItem>
                    <asp:ListItem Value="08" Text="8"></asp:ListItem>
                    <asp:ListItem Value="09" Text="9"></asp:ListItem>
                    <asp:ListItem Value="10" Text="10"></asp:ListItem>
                    <asp:ListItem Value="11" Text="11"></asp:ListItem>
                    <asp:ListItem Value="12" Text="12"></asp:ListItem>
                </asp:DropDownList>
                <span style="font-size:1.5em;">:</span>
                <asp:DropDownList runat="server" ID="ddMinuteM2" AutoPostBack="false">
                    <asp:ListItem Value="00" Text="00"></asp:ListItem>
                    <asp:ListItem Value="15" Text="15"></asp:ListItem>
                    <asp:ListItem Value="30" Text="30"></asp:ListItem>
                    <asp:ListItem Value="45" Text="45"></asp:ListItem>
                </asp:DropDownList>
                <asp:DropDownList runat="server" ID="ddAmPm2" AutoPostBack="false">
                    <asp:ListItem Value="PM" Text="PM"></asp:ListItem>
                    <asp:ListItem Value="AM" Text="AM"></asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td style="width:50px; background-color:#EBE49C;">&nbsp;</td>
            <td colspan="4" style="font-weight:bold; padding-top:5px; padding-bottom:15px; background-color:#EBE49C; text-align:left;">
                <asp:Button runat="server" ID="butMultiDateSubmit" Text="Submit" /> 
            </td>
        </tr>
    </table>
</asp:Panel>
    <asp:Label ID="resultsLabel" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

Open in new window

But the selection is not visually apparent.
I thought you will have the multiple contiguous dates  (from the start date to the end date) highlighted with some color, but they are not.

Or am I doing some thing wrong....??
No, that was not part of the old project. It could still be done as I described earlier.
It's still not going to be visually apparent if the range spans more than two months. The middle month(s) will never be seen.
Thank you