15 Nov 2011

AJAX Calander Extender - allow month and year selection

<cc1:CalendarExtender ID="ceFor" runat="server" Format="MMM-yyyy" PopupButtonID="imgFor"
                                           BehaviorID="calendar1" TargetControlID="txtFor" OnClientHidden="onCalendarHidden"  OnClientShown="onCalendarShown">
                                        </cc1:CalendarExtender>
                                        <script type="text/javascript">
                                            function onCalendarShown() {
                                                 var cal = $find("calendar1");
                                                 //Setting the default mode to month
                                                 cal._switchMode("months", true);
                                                 //Iterate every month Item and attach click event to it
                                                 if (cal._monthsBody) {
                                                     for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                                                         var row = cal._monthsBody.rows[i];
                                                         for (var j = 0; j < row.cells.length; j++) {
                                                             Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call);
                                                         }
                                                     }
                                                 }
                                             }
                                             function onCalendarHidden()
                                             {
                                                 var cal = $find("calendar1");
                                                 //Iterate every month Item and remove click event from it
                                                   if (cal._monthsBody) {
                                                     for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                                                         var row = cal._monthsBody.rows[i];
                                                         for (var j = 0; j < row.cells.length; j++) {
                                                             Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild,"click",call);
                                                         }
                                                     }
                                                 }
                                             }
                                             function call(eventElement)
                                            {
                                                var target = eventElement.target;
                                                switch (target.mode) {
                                                case "month":
                                                    var cal = $find("calendar1");
                                                    cal._visibleDate = target.date;
                                                    cal.set_selectedDate(target.date);
                                                    cal._switchMonth(target.date);
                                                    cal._blur.post(true);
                                                    cal.raiseDateSelectionChanged();
                                                    break;
                                                }
                                            }

                                        </script>

No comments:

Post a Comment