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
ASP.NETVisual Basic.NETC#

Avatar of undefined
Last Comment
adamtrask

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Tom Beck

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
adamtrask

Please, let me have it... thanks
Tom Beck

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

ASKER
adamtrask

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....??
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Tom Beck

No, that was not part of the old project. It could still be done as I described earlier.
Tom Beck

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.
ASKER
adamtrask

Thank you
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.