asp.net - Deselect Calendar selected date on second click

Deselect Calendar selected date on second click
Calendar is an asp.net rich web server control that provide us a way to select an individual date or date range. this example code demonstrate us an interesting technique to deselect calendar selected date on second click.

first click on any date cell we can select a date from calendar control and we can change the selection of calendar date by selecting another date or date range from calendar control. calendar server control has no built in feature to deselect selected date on second click and it has no feature to select random date from calendar control.

to select random date from calendar control and deselect selected date on second click we need to apply few techniques. to do this we created an event handler for calendar SelectionChanged event. we stored the calendar selected dates in a bulletedlist items collection. when users click a date in calendar control then we test it that the buletedlist items contains the clicked date. if we found the selected date in bulletedlist items then it is the second click of same date. if it second click of a date in calendar control then we removed it from bulltedlist items collection and calendar selected dates collection. finally it deselect the calendar selected date on second click.

the following asp.net c# example code demonstrate us how can we deselect calendar selected date on second click.
DeselectCalendarSelectedDateOnSecondClick.aspx

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>

<script runat="server">
    protected void Page_Load(object sender, System.EventArgs e)
    {
        if (Page.IsPostBack && Calendar1.SelectedDates.Count ==1)
        {
            Calendar1.SelectedDates.Clear();
        }
    }
    
    protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
    {
        ListItem li = new ListItem();
        li.Text = Calendar1.SelectedDate.ToShortDateString();

        int counter = 0;
        foreach (ListItem litem in BulletedList1.Items)
        {
            if (litem.Text == li.Text)
            {
                counter += 1;
            }
        }

        if (counter > 0)
        {
            BulletedList1.Items.Remove(li);
        }
        else
        {
            BulletedList1.Items.Add(li);
        }
                
        Calendar1.SelectedDates.Clear();
        SelectedDatesCollection dates = Calendar1.SelectedDates;
        
        foreach (ListItem litem in BulletedList1.Items)
        {
            DateTime date = Convert.ToDateTime(litem.Text);
            dates.Add(date);
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>How to deselect Calendar selected date on second click</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:SlateBlue; font-style:italic;">
            How to deselect Calendar selected date on second click
        </h2>
        <hr width="600" align="left" color="SlateGray" />
        <asp:BulletedList
             ID="BulletedList1"
             runat="server"
             Visible="false"
             >
        </asp:BulletedList>
        <asp:Calendar
            ID="Calendar1" 
            runat="server"
            NextPrevFormat="FullMonth"
            ForeColor="WhiteSmoke"
            SelectionMode="Day"
            DayNameFormat="Full"
            Font-Names="Book Antiqua"
            Font-Size="Medium"
            OnSelectionChanged="Calendar1_SelectionChanged"
            >
            <DayHeaderStyle
                 BackColor="OliveDrab"
                 />
            <DayStyle
                 BackColor="DarkOrange"
                 BorderColor="Orange"
                 BorderWidth="1"
                 Font-Bold="true"
                 Font-Italic="true"
                 Font-Size="Large"
                 />
            <NextPrevStyle
                 Font-Italic="true"
                 Font-Names="Arial CE"
                 />
            <OtherMonthDayStyle BackColor="Tomato" />
            <SelectedDayStyle
                 BackColor="Green"
                 BorderColor="MediumSeaGreen"
                 />
            <TitleStyle
                 BackColor="MidnightBlue"
                 Height="36"
                 Font-Size="Large"
                 Font-Names="Courier New Baltic"
                 />
        </asp:Calendar>
    </div>
    </form>
</body>
</html>
More asp.net examples