How to add a Year View to the Ajax Control Toolkit Calendar Extender control

Further to Zhi-Qiang Ni’s article on showing a Month View in the Calendar Extender control, the next obvious step is to produce a Year View. I have separated out the javascript that was in the CreateDelegate function. I added that as a separate function, called _cell_onclick.

I added a separate calendar extender control to the page, so that the Year view can be demonstrated, and I changed the output date format so that it displays a full year.

I created a javascript method for each of the different start modes. By modifying the start mode of the calendar it displays the different calendar view. I do the same thing in the InitialView property I added in a previous article.

Because only one calendar shows at a time, I will leave the cal variable and create two new variables, monthCalendar and yearCalendar. I’ve also renamed the BehaviorID properties to monthCalendar and yearCalendar. The BehaviorID is what is used to find the calendar control from within client script. $find is then used to find the client side javascript Ajax control object.

I couldn’t help myself, so I’ve refactored the code in the _cell_onclick function.

The result is this:

Year View in the Calendar Extender control

Year View in the Calendar Extender control

<!--Page Language="C#" AutoEventWireup="true" CodeBehind="Sample5.aspx.cs" Inherits="CalendarSample.Sample5"-->

 

<script type="text/javascript"><!--
        var cal;
        var monthCalendar;
        var yearCalendar;

        function _cell_onclick(e) {
            /// <summary>
            /// Handles the click event of a cell
            /// </summary>
            ///
<span  name="e" type="Sys.UI.DomEvent" class="mceItemParam"></span>The arguments for the event</param>
            e.stopPropagation();
            e.preventDefault();
            if (!cal._enabled) return;
            var target = e.target;
            var visibleDate = cal._getEffectiveVisibleDate();
            Sys.UI.DomElement.removeCssClass(target.parentNode, "ajax__calendar_hover");
            //S1
            if ((target.mode == "year" && cal == yearCalendar)
              || (target.mode == "month" && cal == monthCalendar)
              || target.mode == "today")
                closeCalendar(cal, target.date);
            else if ((target.mode == "month" && target.month != visibleDate.getMonth())
                 || (target.mode == "year" && target.year != visibleDate.getYear())) {
                cal._visibleDate = target.date;
            }
            else if (target.mode == "prev" || target.mode == "next") {
                cal._switchMonth(target.date);
            }
            else if (target.mode == "title") {
                switch (cal._mode) {
                    case "days": cal._switchMode("months"); break;
                    case "months": cal._switchMode("years"); break;
                }
            }
            //            switch (target.mode) {
            //                case "prev":
            //                case "next":
            //                    cal._switchMonth(target.date);
            //                    break;
            //                case "title":
            //                    switch (cal._mode) {
            //                        case "days": cal._switchMode("months"); break;
            //                        case "months": cal._switchMode("years"); break;
            //                    }
            //                    break;
            //                case "month":
            //                    //if the mode is month, then stop switching to day mode.
            //                    if (target.month != visibleDate.getMonth()) {
            //                        cal._visibleDate = target.date;
            //                    }
            //                    //this._switchMode("days");
            //                    break;
            //                case "year":
            //                    if (target.date.getFullYear() != visibleDate.getFullYear()) {
            //                        cal._visibleDate = target.date;
            //                    }
            //                    break;
            //                //                case "day":
            //                //                    this.set_selectedDate(target.date);
            //                //                    this._switchMonth(target.date);
            //                //                    this._blur.post(true);
            //                //                    this.raiseDateSelectionChanged();
            //                //                    break;
            //                case "today":
            //                    closeCalendar(cal, target.date);
            //                    break;
            //            }
            //E1
        }

        function pageLoad() {
            monthCalendar = $find("monthCalendar");
            yearCalendar = $find("yearCalendar");
            //we need to modify the original delegate of the month cell.
            monthCalendar._cell$delegates = {
                mouseover: Function.createDelegate(monthCalendar, monthCalendar._cell_onmouseover),
                mouseout: Function.createDelegate(monthCalendar, monthCalendar._cell_onmouseout),
                click: Function.createDelegate(monthCalendar, _cell_onclick)
            }
            yearCalendar._cell$delegates = {
                mouseover: Function.createDelegate(yearCalendar, yearCalendar._cell_onmouseover),
                mouseout: Function.createDelegate(yearCalendar, yearCalendar._cell_onmouseout),
                click: Function.createDelegate(yearCalendar, _cell_onclick)
            }
        }

        function closeCalendar(cal, targetDate) {
            cal.set_selectedDate(targetDate);
            cal._switchMonth(targetDate);
            cal._blur.post(true);
            cal.raiseDateSelectionChanged();
        }

        function onCalendarMonth(sender, args) {
            //set the default mode to month
            cal = monthCalendar;
            sender._switchMode("months", true);
        }

        function onCalendarYear(sender, args) {
            cal = yearCalendar;
            sender._switchMode("years", true);
        }

// --></script>

 

<form id="form1" enctype="application/x-www-form-urlencoded">
<div>The Month:</div>
<div>The Year:</div>
</form>

Now I will move this code back into my already enhanced Ajax Control Toolkit calendar control. The code will take me about 20 minutes to do, but the time to write the article takes a lot longer (seems to be a ratio of about 1 to 4 at the moment). I’ll do that next week.

Code for this is at http://cid-5e237543fffb2891.skydrive.live.com/self.aspx/Public/CalendarSampleWithYearView.zip

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: