How to Restrict the Calendar Dates on Microsoft AJAX Calendar Extender

• Download demo - 1.3 MB

Introduction

This post gives you some insight on how one can restrict date(s) while using Microsoft AJAX Calendar Extender.

Background

As a .NET developer, I often came across various requirements to do some unusual things while developing/enhancing the new or existing ASP.NET Internet Application(s). This post is from one of such requirements.

Recently, I came across one of the requirements; I needed to implement the date selection functionality which allows user to pick only Sundays and Saturdays.

At high level it looks simple, but I didn’t want to implement any intricate logic just to validate From Date and To Date. Secondly, all our other report screens are already using Microsoft AJAX Calendar Extender to allow user to pick a date. (Note: I perfectly understand and agree with the questions arising in readers minds, that is why you did not use jQuery UI or any other components to achieve the same?, and the answer is I did not want to add anything extra in the application already running in production).

So here is what I’ve implemented.

The final output will look like the one shown in the screenshot below:

Using the Code

First of all, I’ve designed the Web UserControl for the report screen. This Web UserControl eventually will be registered in ASPX page. The user control has the following markup:

<table>
    <tbody>
        <tr>
            <td align="right" valign="top" width="20%">
            <asp:Label ID="lblFromDate" runat="server" Text="From Date"/>:</td>
            <td align="left" valign="top" width="20%">
            <font color="red">*</font></td>
            <td align="left" colspan="2" valign="top">
            <asp:TextBox ID="txtFromDate" runat="server"/> 
            <ajaxToolkit:CalendarExtender ID="caltxtFrom" runat="server" 
            Format="MM/dd/yyyy" /> <asp:Label ID="lblToDate" 
            runat="server" Text="To Date"/> 
            <asp:TextBox ID="txtToDate" runat="server" /> 
            <ajaxToolkit:CalendarExtender ID="caltxtToDate" runat="server" 
            Format="MM/dd/yyyy" /></td>
        </tr>
    </tbody>
</table>

If you have noticed, I’ve added OnClientShown function handler as “AllowFrom” and “AllowTo”. These are JavaScript / jQuery functions I’ve added on Report ASPX page.

///Restricts the From Date Calendar Extender
     function AllowFrom(sender, args) {
            $('div[id$="caltxtFrom_container"] 
            div[class="ajax__calendar_day"]').each(function () {
                var date = new Date();
                date = $(this).attr('date');
                if (date.getDay() != 0)
                    $(this).css('cursor', 'pointer').attr
                    ('disabled', 'disabled').css('text-decoration', 'line-through');
                else
                    $(this).css('font-weight', 'bold');
            });
        }

        //Restricts the To Date Calendar Extender
        function AllowTo(sender, args) {
            $('div[id$="caltxtToDate_container"] 
            div[class="ajax__calendar_day"]').each(function () {
                var date = new Date();
                date = $(this).attr('date');
                if (date.getDay() == 6)
                    $(this).css('font-weight', 'bold');
                else
                    $(this).css('cursor', 'pointer').attr('disabled', 
                    'disabled').css('text-decoration', 'line-through');
            });
        }

So basically, the idea is to get each day from the rendered Calendar and check against the condition for allowing Sunday I’m checking date.getDay() !=0 and for Saturday date.getDay()==6.

One can add validations as per their own requirement to validate the selected or typed dates to make From and To date validations more solid. I have added SetDate() JavaScript function in production version of this code. SetDate() is added under ASPX page script tags.

Points of Interest

Before implementing this solution, I did some live searches with some luck, which gave me some start in designing this solution since my options were very limited in deciding the solution.

Since I needed to show the unwanted days in different formatting other than the default formatting, I used line-though font style.