Calendar in GridView in ASP.NET

Question

I want to show yearly calendar in GridView in my ASP.NET project please help me.

Marish Balasubramanian · Answer

Use the following Scripts //var cal1; var cal2; function pageLoad() { // cal1 = $find(calendar1); cal2 = $find(calendar3); // modifyCalDelegates(cal1); modifyCalDelegates(cal2); } function modifyCalDelegates(cal) { //we need to modify the original delegate of the month cell. cal._cell$delegates = { mouseover: Function.createDelegate(cal cal._cell_onmouseover) mouseout: Function.createDelegate(cal cal._cell_onmouseout) click: Function.createDelegate(cal function(e) { /// /// Handles the click event of a cell /// /// The arguments for the event 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); 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()) { //this._switchMode(days); } else { cal._visibleDate = target.date; //this._switchMode(days); } cal.set_selectedDate(target.date); cal._switchMonth(target.date); cal._blur.post(true); cal.raiseDateSelectionChanged(); break; case year: if (target.date.getFullYear() == visibleDate.getFullYear()) { cal._switchMode(months); } else { cal._visibleDate = target.date; cal._switchMode(months); } break; // case day: // this.set_selectedDate(target.date); // this._switchMonth(target.date); // this._blur.post(true); // this.raiseDateSelectionChanged(); // break; case today: cal.set_selectedDate(target.date); cal._switchMonth(target.date); cal._blur.post(true); cal.raiseDateSelectionChanged(); break; } }) } } function onCalendarShown(sender args) { //set the default mode to month sender._switchMode(months true); // changeCellHandlers(cal1); } function changeCellHandlers(cal) { if (cal._monthsBody) { //remove the old handler of each month body. for (var i = 0; i var row = cal._monthsBody.rows[i]; for (var j = 0; j $common.removeHandlers(row.cells[j].firstChild cal._cell$delegates); } } //add the new handler of each month body. for (var i = 0; i var row = cal._monthsBody.rows[i]; for (var j = 0; j $addHandlers(row.cells[j].firstChild cal._cell$delegates); } } } } function onCalendarHidden(sender args) { if (sender.get_selectedDate()) { if (cal1.get_selectedDate() && cal2.get_selectedDate() && cal1.get_selectedDate() > cal2.get_selectedDate()) { alert('The From Date should smaller than the To Date please reselect!'); sender.show(); return; } //get the final date var finalDate = new Date(sender.get_selectedDate()); var selectedMonth = finalDate.getMonth(); finalDate.setDate(1); if (sender == cal2) { // set the calender2's default date as the last day finalDate.setMonth(selectedMonth + 1); finalDate = new Date(finalDate - 1); } //set the date to the TextBox sender.get_element().value = finalDate.format(sender._format); } } function onCalendarShown1() { var cal = $find(calendar2); cal._switchMode(years true); if (cal._yearsBody) { for (var i = 0; i var row = cal._yearsBody.rows[i]; for (var j = 0; j Sys.UI.DomEvent.addHandler(row.cells[j].firstChild click call); } } } } function onCalendarHidden1() { var cal = $find(calendar2); if (cal._yearsBody) { for (var i = 0; i var row = cal._yearsBody.rows[i]; for (var j = 0; j Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild click call); } } } } function call(eventElement) { var target = eventElement.target; switch (target.mode) { case year: var cal = $find(calendar2); cal.set_selectedDate(target.date); cal._blur.post(true); cal.raiseDateSelectionChanged(); break; } } BehaviorID=calendar2 Format=yyyy OnClientHidden=onCalendarHidden1 OnClientShown=onCalendarShown1 TargetControlID=TextBox2>