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: ,

Advertisements

3 Responses to YUI.Net: Calendar Control

  1. am dotnet biggenner brother
    how to use imagebutton use so the clander in aspx explanin it brother

  2. am dotnet biggenner brother
    how to use imagebutton use show the clander in aspx explanin it brother

  3. It’s nearly impossible to find well-informed people for this subject,
    however, you sound like you know what you’re talking about!
    Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: