intro
this calendar control can be used in a web page to provide the user a way to choose month and year alone. it's a user control and so any number of this control can be added to a web page. this control is highly customizable, and could be extended much more. some of the features in this control include - limiting the number of years the calendar allows the user to choose from, type of view (popup/panel), specify/extend the modes by which the date chosen is returned, specify the starting and ending years the calendar would allow the user to choose from, along with the ability to specify what comes first - the beginning year or the end year and so on. this user control and the sample application would also be very helpful to understand the core concepts of using a user control that greatly reduces the amount of duplicate code in a project apart from speeding things up.
some background
once, i had to design a user control that allows the user to choose month and year alone. the day part would have to be decided after this step to be the first or the last day of the month. for this, a simple option would be to have 2 drop down boxes - one for the month part and one for the year part. but i felt that wouldn't be visually pleasing. so i set out to write a user control that is similar to the calendar extender that comes with the AjaxControlToolkit (or the calendar control available as a server control). there were multiple reasons why i chose to write a user control instead of using 1 of the 2 i ihave mentioned above. first, in case we use the AjaxControlToolkit, the control does not directly expose a way by which the calendar could be limited to month/year alone. sure, there are a number of ways posted in the web to circumvent this problem with a lot of javascript code. but in this case, if we need to use a number of similar calendar controls in the same page, we are in for a problem of spending a lot of time to achieve it, as it involves a lot of changes/experiment to the corresponding javascript. and we do not have the flexibility of limiting the user to a certain subset directly and so again we have to add javascript to solve this problem. for these reasons and many other, i thought of writing a user control. so, i wrote a user control to accomplish this. now i wanted to expand this idea to a broader perspective and present it for others to use. hope this could be of help for others. i feel that a small explanation of how the user interface presented could be used is required at this point. if the mode is set to 'popup', clicking on the text box pops up the calendar and selecting any of the month links or the current month link hides the popup after setting the chosen value in the text box. clicking outside the popup dismisses the popup (see "points of interest" for more information on this). in case the mode is set to 'panel', a calendar icon is displayed next to the text box. clicking on it displays the calendar and clicking on the calendar icon again hides the panel. similar to the popup mode, selecting any of the month links or the current month link hides the panel after setting the chosen value in the textbox.
things to note
please look into the source code for the control. Here the update panels are used with number of <asp:AsyncPostBackTrigger /> tags. this is to stop the link buttons from causing a post-back (links that represent the month and current month). another way to take care of this is to put all of the calendar related controls inside another update panel. this was one thing that extended the overall time taken to code this control. Also, please notice the javascript functions show() and click() [jquery]. this user control uses the AjaxControlToolkit's popup control extender for the popup mode. if this extender is used in a user control, clicking outside of the calendar and outside of the <div> area of the user control does not dismiss the popup. to solve this problem, show() and click() javascript code is used. show() function is attached to the textbox that is used to trigger the popup and click() function is attached to the root document so that the popup is dismissed on clicking anywhere in the document.
