YUI.Net: Calendar Control

The first control I will highlight in the Yui.Net control library is the calendar. I find that I often need a client side calendar control to allow users to just choose a quick date without having to deal with the overhead brought on by the Asp.Net calendar control (ViewState, Postback, etc). When I ran across the YUI calendar I was really impressed with both its functionality as well as it customizability.

The Basics

In order to just get a basic calendar displayed on your page, you need to include two things:

1. The YahooScriptManager

<yui:YahooScriptManager ID="manager" runat="server" />

2. The Calendar Control

<yui:Calendar id="cal" runat="server" />

On the server site, the Script manager generates the following code:

<script src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script> 
<script src="http://yui.yahooapis.com/2.2.2/build/calendar/calendar-min.js" type="text/javascript"></script> 

<script type="text/javascript" media="Screen"> 
function SetHiddenSelectedDates(type, args, obj) { 
    var txtDate1 = document.getElementById(obj.id + "_selectedDates"); 
    var selected = ""; 
    var dates = obj.getSelectedDates(); 
    for(var i = 0; i < dates.length; i++) 
    { 
        var month = dates[i].getMonth() + 1; 
        var day = dates[i].getDate(); 
        var year = dates[i].getFullYear(); 
        selected = selected + month + "/" + day + "/" + year + ","; 
    } 
    txtDate1.value = selected.substring(0, selected.length - 1); 
} 
</script> 

<link href="http://yui.yahooapis.com/2.2.2/build/calendar/assets/calendar.css" rel="stylesheet" type="text/css" media="Screen" /> 

<script type="text/javascript" media="Screen"> 
    var cal; 
    function init() { 
        cal = new  YAHOO.widget.Calendar("cal", "cal_container", { pagedate: "05/2007"} ); cal.render();cal.selectEvent.subscribe(SetHiddenSelectedDates, cal, true); 
    } 
    YAHOO.util.Event.addListener(window, "load", init); 
</script>

There are 3 things I would like to point out in this code (not necessarily in the order they appear):

First, there are the includes of the yahoo-dom-event.js and the calendar-min.js files which are hosted on the yahoo servers. YUI.Net also allows you to host the files yourself if you need access to the debug scripts or if you just prefer to store the files locally. the calendar.css file is also included which contains the default styles for the calendar control.

Second, there is the javascript initialization code in the last script block. This initializes the calendar with the default values and hooks up the event handler for the selectEvent event. This allows the calendar to store the selected dates in a hidden html field for use on the server side.

Lastly, there is the SetHiddenSelectedDates method which is responsible for taking the selected dates and storing them as a comma delimited string in a hidden html field.

The calendar control renders the following html markup:

<div id="cal_container"></div><input type="hidden" name="cal_selectedDates"></input>

This is basically just the div which will contain the calendar and the hiddent field to hold the selected dates. Notice that the name of the div is the same that is passed in to the YAHOO.widget.Calendar constructor.

Server Side Properties

public DateTime[] SelectedDates

This returns a list of dates currently selected. It achieves this by parsing through the hidden html field mentioned earlier which stores all of the selected dates in a comma delimited list. This property is read only.

public string SelectedDateString

This string maps to the ‘selected’ property of the YUI calendar configuration property. (Side note: this can get a little confusing because there is a while javascript object model which does not always map directly to the sever side .Net object model). Here is an excerpt from the YUI documentation for this property:

Sets the calendar’s selected dates. The built-in default date format is MM/DD/YYYY. Ranges are defined using MM/DD/YYYY-MM/DD/YYYY. Month/day combinations are defined using MM/DD. Any combination of these can be combined by delimiting the string with commas. For example: “12/24/2005,12/25/2005,1/18/2006-1/21/2006”

public DateTime? SelectedDate

Allows for a quick way to access the selected date for calendars which are limited to just one selection. A nullable date is used so a null can be returned if no date is selected.

public int Pages

This allows support for multiple calendars in one control which appears like:

This causes the calendar to be rendered as a YAHOO.widget.CalendarGroup rather than a YAHOO.widget.Calendar. This is an example of where I have tried to make such functionality transperant to the user.

Here is how the rest of the properties map to the YUI javascript properties:

Yui.Net Server Side Property	YUI client side javascript property
PageDate	pagedate
MinDate	mindate
MaxDate	maxdate
Title	title
Closable	close
UseIFrame	iframe
MultiSelect	MULTI_SELECT
ShowWeekdays	SHOW_WEEKDAYS
MonthFormat (enum)	LOCALE_MONTHS
WeekdayFormat (enum)	LOCALE_WEEKDAYS
WeekStartDay	START_WEEKDAY
ShowWeekHeader	SHOW_WEEK_HEADER
ShowWeekFooter	SHOW_WEEK_FOOTER
HideBlankWeeks	HIDE_BLANK_WEEKS
NavLeftImageUrl	NAV_ARROW_LEFT
NavRightImageUrl	NAV_ARROW_RIGHT

In some cases I have renamed some properties to make them more Asp.Net like and changed thier types from numbers to enums to provide a better user experience.

As you can see, most of the power of this control comes from the javascript provided by Yahoo – which is why the YUI.Net is mostly a wrapper with some funcationlity added.

Technorati tags: YUI, Asp.Net

Advertisement