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