Interval Calendar Control
May 27th, 2008 by JohnThe Yahoo! User Interface (YUI) library Calendar control is a very useful item for any dynamic web application requiring users to input dates–for example, when scheduling bill payments, searching for plane flights, booking hotel accommodations, and so on. The YUI control is particularly nice because it is programmatically rich and yet easily customizable.
When preparing to implement a calendar interface for our Vermont travel planner site GoVermont which would allow users to specify hotel arrival and departure dates, we experimented with alternatives to the typical approach of having two separate calendars for arrival and departure, respectively. Personally I have always thought this interface to be a little odd. After all, when people use real, physical calendars to mark off the days of a trip (say), they don’t put two calendars side-by-side and mark the arrival date on one, and then the departure date on the other. Instead, they typically just circle or mark off a block of days on the calendar–in other words, they define an interval of days on the calendar.
The near standardization on the web of the two-calendar interface stems primarily, I think, from the underlying form-based HTML input mechanism where there is one field for arrival date and a separate field for departure date. Given this framework, it seems natural to just attach a separate calendar to each field. But stepping back from HTML forms for a minute, it seems more natural to me, if one is going to implement a clickable calendar at all, to make it more like a real calendar, and for purposes such as the above just allow the user to easily define an interval of dates on a single calendar.
With this idea in mind I created an extension of the YUI CalendarGroup control (a generalization of the YUI Calendar supporting multiple pages) called the iCalendarGroup, which is designed specifically for user selection of an interval of dates. On this calendar, one simply clicks on two different dates to define an interval, and clicks a third time to start over. It functions similarly to the non-multi-select version of the YUI CalendarGroup, but the basic unit is now an interval of dates instead of a single date. Here is a working example:
When using this control in an application, you can easily set and reset the interval selection programmatically, as well as obtain the lower and upper dates for use with other user interface elements (e.g. fields for arrival and departure date, etc.). You can also respond to selection events and take advantage of the other things that the YUI CalendarGroup provides.
The code for this example is extremely simple. The HTML consists of:
<div class="yui-skin-sam"> <div id="iCalSample"></div> </div>
The Javascript consists of:
// create interval calendar control
var ical = new YAHOO.whardy.iCalendarGroup('iCalSample',
{ pages: 1, title: 'iCalendar Sample' });
ical.render();
Here is a working two page example, obtained by changing the ‘pages’ value above:
You can obtain the complete, fully documented JavaScript source code for this control here.
Thanks to Eric and Satyen at the YUI team, this control is also now available on the YUI site here.
Tags: calendar, calendargroup, control, custom control, date range, interval, yahoo, yahoo calendar, yui, yui calendar, yui calendargroup
