Disable dates in CalendarExtender

Hello Friends,

I was using MS Ajax Calender Extender. It was working fine until I faced a case where I wanted to disable all the dates which are lesser than the current date.

After some help through internet I was able to solve the problem.

I modified the CalendarBehavior.js & Calendar.css.

These files can be found under the calendar folder under the AJaxControltoolkit source file.

Following is the solution for the problem.

I made following changes to the CalendarBehavior.js.

• in the function _performLayout add the lines in bold.

   _performLayout : function() {
        /// <summmary>
        /// Updates the various views of the calendar to match the current selected and visible dates
        /// </summary>
       
        var elt = this.get_element();
        if (!elt) return;
        if (!this.get_isInitialized()) return;
        if (!this._isOpen) return;

        var dtf = Sys.CultureInfo.CurrentCulture.dateTimeFormat;       
        var selectedDate = this.get_selectedDate();
        var visibleDate = this._getEffectiveVisibleDate();
        var todaysDate = this.get_todaysDate();
       
        switch (this._mode) {
            case “days”:
               
                var firstDayOfWeek = this._getFirstDayOfWeek();
                var daysToBacktrack = visibleDate.getDay() – firstDayOfWeek;
                if (daysToBacktrack <= 0)
                    daysToBacktrack += 7;
                   
                var startDate = new Date(visibleDate.getFullYear(), visibleDate.getMonth(), visibleDate.getDate() – daysToBacktrack, this._hourOffsetForDst);
                var currentDate = startDate;

                for (var i = 0; i < 7; i++) {
                    var dayCell = this._daysTableHeaderRow.cells[i].firstChild;
                    if (dayCell.firstChild) {
                        dayCell.removeChild(dayCell.firstChild);
                    }
                    dayCell.appendChild(document.createTextNode(dtf.ShortestDayNames[(i + firstDayOfWeek) % 7]));
                }
                for (var week = 0; week < 6; week ++) {
                    var weekRow = this._daysBody.rows[week];
                    for (var dayOfWeek = 0; dayOfWeek < 7; dayOfWeek++) {
                        var dayCell = weekRow.cells[dayOfWeek].firstChild;
                        if (dayCell.firstChild) {
                            dayCell.removeChild(dayCell.firstChild);
                        }
                        dayCell.appendChild(document.createTextNode(currentDate.getDate()));
                        dayCell.title = currentDate.localeFormat(“D”);
                        dayCell.date = currentDate;

                        var todaysDate = this.get_todaysDate();
                        var myTodaysDate = new Date(todaysDate.getFullYear(), todaysDate.getMonth(), todaysDate.getDate(), this._hourOffsetForDst);
                        var myCurrentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), this._hourOffsetForDst);
                        $common.removeCssClasses(dayCell.parentNode, [ “ajax__calendar_other”, “ajax__calendar_active”, “ajax__calendar_deactive” ]);       
                        if(myCurrentDate < myTodaysDate){
                           Sys.UI.DomElement.addCssClass(dayCell.parentNode, “ajax__calendar_deactive”);
                        } 
                        else{
                          Sys.UI.DomElement.addCssClass(dayCell.parentNode, this._getCssClass(dayCell.date, ‘d’));
                        } 
                        currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 1, this._hourOffsetForDst);
                    }
                }
               
                this._prevArrow.date = new Date(visibleDate.getFullYear(), visibleDate.getMonth() – 1, 1, this._hourOffsetForDst);
                this._nextArrow.date = new Date(visibleDate.getFullYear(), visibleDate.getMonth() + 1, 1, this._hourOffsetForDst);
                if (this._title.firstChild) {
                    this._title.removeChild(this._title.firstChild);
                }
                this._title.appendChild(document.createTextNode(visibleDate.localeFormat(“MMMM, yyyy”)));
                this._title.date = visibleDate;

                break;
            case “months”:

                for (var i = 0; i < this._monthsBody.rows.length; i++) {
                    var row = this._monthsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        var cell = row.cells[j].firstChild;
                        cell.date = new Date(visibleDate.getFullYear(), cell.month, 1, this._hourOffsetForDst);
                        cell.title = cell.date.localeFormat(“Y”);
                        $common.removeCssClasses(cell.parentNode, [ “ajax__calendar_other”, “ajax__calendar_active” ]);
                        Sys.UI.DomElement.addCssClass(cell.parentNode, this._getCssClass(cell.date, ‘M’));
                    }
                }
               
                if (this._title.firstChild) {
                    this._title.removeChild(this._title.firstChild);
                }
                this._title.appendChild(document.createTextNode(visibleDate.localeFormat(“yyyy”)));
                this._title.date = visibleDate;
                this._prevArrow.date = new Date(visibleDate.getFullYear() – 1, 0, 1, this._hourOffsetForDst);
                this._nextArrow.date = new Date(visibleDate.getFullYear() + 1, 0, 1, this._hourOffsetForDst);

                break;
            case “years”:

                var minYear = (Math.floor(visibleDate.getFullYear() / 10) * 10);
                for (var i = 0; i < this._yearsBody.rows.length; i++) {
                    var row = this._yearsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        var cell = row.cells[j].firstChild;
                        cell.date = new Date(minYear + cell.year, 0, 1, this._hourOffsetForDst);
                        if (cell.firstChild) {
                            cell.removeChild(cell.lastChild);
                        } else {
                            cell.appendChild(document.createElement(“br”));
                        }
                        cell.appendChild(document.createTextNode(minYear + cell.year));
                        $common.removeCssClasses(cell.parentNode, [ “ajax__calendar_other”, “ajax__calendar_active” ]);
                        Sys.UI.DomElement.addCssClass(cell.parentNode, this._getCssClass(cell.date, ‘y’));
                    }
                }

                if (this._title.firstChild) {
                    this._title.removeChild(this._title.firstChild);
                }
                this._title.appendChild(document.createTextNode(minYear.toString() + “-” + (minYear + 9).toString()));
                this._title.date = visibleDate;
                this._prevArrow.date = new Date(minYear – 10, 0, 1, this._hourOffsetForDst);
                this._nextArrow.date = new Date(minYear + 10, 0, 1, this._hourOffsetForDst);

                break;
        }
        if (this._today.firstChild) {
            this._today.removeChild(this._today.firstChild);
        }
        this._today.appendChild(document.createTextNode(String.format(AjaxControlToolkit.Resources.Calendar_Today, todaysDate.localeFormat(“MMMM d, yyyy”))));
        this._today.date = todaysDate;       
    },

• in the function _cell_onclick add the lines in bold.

_cell_onclick : function(e) {
        /// <summary>
        /// Handles the click event of a cell
        /// </summary>
        /// <param name=”e” type=”Sys.UI.DomEvent”>The arguments for the event</param>
       
        e.stopPropagation();
        e.preventDefault();

        if (!this._enabled) return;

        var target = e.target;
        var visibleDate = this._getEffectiveVisibleDate();
        Sys.UI.DomElement.removeCssClass(target.parentNode, “ajax__calendar_hover”);
        var todaysDate = this.get_todaysDate();       
        switch(target.mode) {
            case “prev”:
            case “next”:
                this._switchMonth(target.date);
                break;
            case “title”:
                switch (this._mode) {
                    case “days”: this._switchMode(“months”); break;
                    case “months”: this._switchMode(“years”); break;
                }
                break;
            case “month”:
                if (target.month == visibleDate.getMonth()) {
                    this._switchMode(“days”);
                } else {
                    this._visibleDate = target.date;
                    this._switchMode(“days”);
                }
                break;
            case “year”:
                if (target.date.getFullYear() == visibleDate.getFullYear()) {
                    this._switchMode(“months”);
                } else {
                    this._visibleDate = target.date;
                    this._switchMode(“months”);
                }
                break;
            case “day”:
                if(target.date > todaysDate) {
                   this.set_selectedDate(target.date);
                   this._switchMonth(target.date);
                   this._blur.post(true);
                   this.raiseDateSelectionChanged();
                }
                break;
            case “today”:
                var todaysTargetDate = target.date;
                todaysTargetDate = new Date(todaysTargetDate.getFullYear(), todaysTargetDate.getMonth(), todaysTargetDate.getDate(), this._hourOffsetForDst);
                if(todaysTargetDate > todaysDate) {
                   this.set_selectedDate(target.date);
                   this._switchMonth(target.date);
                   this._blur.post(true);
                   this.raiseDateSelectionChanged();
                }
                break;
        }
    },

and in Calendar.css add the following lines:

.ajax__calendar .ajax__calendar_deactive .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff;color:#646464;text-decoration:line-through;}
.ajax__calendar .ajax__calendar_deactive .ajax__calendar_month {background-color:#ffffff;border-color:#ffffff;color:#646464;text-decoration:line-through;}
.ajax__calendar .ajax__calendar_deactive .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;text-decoration:line-through;}

After making all these changes, rebuild the project & get the dll from the bin folder.

~ by gratisaccount on October 22, 2008.