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">

Calendar in GridView in ASP.NET

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (1)