Geeks With Blogs

News

Agha Usman Ahmed JILAWATAN

In this post I will explain you, How to make calendar extender control to show month / year view by default and instead of selecting dates how can we use calendar extender to select months.

Before I start, let me say that I got extensive support from this forum post http://forums.asp.net/t/1349086.aspx. Thanks to Zhi-Qiang Ni, but the way he follow was a little bit lengthy. However, all credit still goes to him because I gain the exact idea from his post.

Let me start by creating a calendar extender control and attach it to a textbox.

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" OnClientHidden="onCalendarHidden"  OnClientShown="onCalendarShown" BehaviorID="calendar1"
    Enabled="True" TargetControlID="TextBox1">
</cc1:CalendarExtender>


Now, in extender markup, notice onClientHidden and OnClientShown event which I implemented as below.

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);
             }
         }
     }
 
 }

Pretty simple, In onCalendarShown method I just set the default mode to month and then iterate the control to get month item and attach on click event to it. So that, it will not go further to show us dates of that month and select the first day of that month instead.

Where as, In onCalendarHidden I am simply detaching the click event from month items. Now notice the last parameter of Sys.UI.DomEvent.addHandler function, it is the name of the function which will do the rest of the magic as below.

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;
            }
        }

Here we are simply selecting the month as the selected date of calendar control. and finally the control will look like as below.

cal_extender

You can get the source code from here :
http://cid-cdbfe38dc780f729.skydrive.live.com/self.aspx/.Public/Calendar%20Extender%20Month.zip

Posted on Sunday, May 31, 2009 3:19 AM Asp.net , Javascript Tricks , AJAX | Back to top


Comments on this post: How to show and select month/year in Calendar Extender

# re: How to show and select month/year in Calendar Extender
Requesting Gravatar...
Hi Mr.Agha Usman,

This is the solution I have been searching for. Thank you verymuch.
Your code works for one calander extender. but i want to do the same job for 2 calendar extender's on the same page.is there any way to do it other than your answer in other blog to run the same code after $find("second calendar extender").

Thanking you.
Left by Alekhya on Oct 19, 2009 5:39 PM

# re: How to show and select month/year in Calendar Extender
Requesting Gravatar...
Hi!

Please tell me something. Where the hell did u get the methods from?

Like.. where did u get the methods
cal._visibleDate cal.set_selectedDate
cal._switchMonth
cal._etc...

Where do I find that documentation???
Left by CC on Nov 14, 2009 7:44 PM

# re: How to show and select month/year in Calendar Extender
Requesting Gravatar...
How to disable a few certain date in Calendar Extender?

eg, if i wanna disable 01Jan2010 and 03Jan2010, how do i do in in Calendar Extender?
Left by kheng on Apr 12, 2010 6:04 PM

# re: How to show and select month/year in Calendar Extender
Requesting Gravatar...
Very nice job. Thanks
Left by Sridhar on Dec 03, 2013 4:49 AM

# re: How to show and select month/year in Calendar Extender
Requesting Gravatar...
it is great
10x!!
Left by shoshi on Jun 16, 2014 8:47 PM

# re: How do I get the last day of the month
Requesting Gravatar...
Great work! How do I get the last day of the month?
Left by Shama on Jun 25, 2014 4:05 AM

# re: How to show and select month/year in Calendar Extender
Requesting Gravatar...
nice .....
how to show day on next textbox at the same time using same calendar extender
Left by preetha on Jun 08, 2015 5:13 PM

# re: How to show and select month/year in Calendar Extender
Requesting Gravatar...
Thank you so much Agha Usman Ahmed.
Left by Naveen on Dec 08, 2015 12:10 AM

Your comment:
 (will show your gravatar)


Copyright © Agha Usman Ahmed | Powered by: GeeksWithBlogs.net