For our first coding example, we'll take a quick look at the Calendar Control. The YUI Calendar allows you to easily create a variety of attractive and highly functional calendar interfaces that can allow your visitors to quickly and easily select single dates or range of dates.
It's an easy component to master, making it ideal for our very first coding example. Not much coding is required for a basic calendar implementation, and the control can easily be customized using the Calendar classes' extensive range of properties or by overriding the default styling.
There is also a range of different formats of Calendar that we can create; there's the basic, single select, one-page calendar control, which displays one month at a time, or there's a larger, multi-page calendar, which allows multiple months to be displayed at once. Multi-select calendars can come in either single or multiple month display formats.
The rendered calendar is instinctively intuitive to use and is presented in a very attractive manner. Almost anyone being presented with it will instantly know how to use it. By default, it features a clear and sensible interface for selecting a date, arranging the dates of the current or starting month in a grid headed by the day of the week.
It also features automatic rollovers for valid or selectable dates, automatic current date selection, and an infinite date range both forwards and backwards in time that the visitor can move through to select the date of their choice. When navigating between months, the individual days automatically reorder themselves so that the correct date appears in the correct day of the week.
Several classes make up the Calendar Control; two separate classes represent the two different types of calendar that can be rendered and another class contains math utilities that allow you to add, subtract, or compare different dates. We will take a look at the classes that make up this control to see what is available and exactly how it works before we begin coding.
The most basic type of calendar is the single-panel Calendar, which is created with the YAHOO.widget.Calendar class. To display a calendar, an HTML element is required to act as a container for the calendar. The following screenshot shows a basic Calendar Control:
 |
The constructor can be called specifying, at the very least, a reference to the HTML element that will contain the calendar. This can either be an actual DOM reference or it can be its id attribute.
You can also specify an additional argument that can accept a literal object containing various configuration properties. The configuration object is defined within curly braces within the class constructor. This is a pattern frequently used in YUI components.
When the constructor for an object might take many optional arguments, instead of reserving a slot in the argument list for each possible one, a configuration object is accepted instead, which is nothing more than a regular JavaScript object literal or an expression that returns an object. This object should have properties corresponding to the configuration attributes that you want to set different from the default.
For the Calendar Control you would set attributes such as its title, a comma-delimited range of pre-selected dates or a close button shown on the calendar.
There are many methods defined in the basic Calendar caliber class. Some of the more useful methods are:
A method for determining whether a date is outside of the current month:
isDateOOM.Navigation methods such as
nextMonth, nextYear, previousMonth, andpreviousYearthat can be used to programmatically change the month or year displayed in the current panel.Operational methods such as
addMonths, addYears, subtractMonths, andsubtractYears, which are used to change the month and year shown in the current panel by the specified number of months or years.The
rendermethod is used to draw the calendar on the page and is called for every implementation of a calendar, after it has been configured. Without this method, no calendar appears on the page.Two reset methods:
reset, which resets the calendar to the month and year originally selected, andresetRenderers, which resets the render stack of the calendar.Selection methods that select or deselect dates such as
deselect, deselectAll, deselectCell, select, andselectCell.
As you can see, there are many methods that you can call to take advantage of the advanced features of the Calendar Control.
In addition to the basic calendar, you can also create a grouped calendar that displays two or more month panels at once using the YAHOO.widget.CalendarGroup class. The control automatically adjusts the calendar's UI so that the navigation arrows are only displayed on the first and last calendar panels, and so that each panel has its own heading indicating which month it refers to.
The CalendarGroup class contains additional built-in functionality for updating the calendar panels on display, automatically. If you have a two-panel calendar displaying, for example, January and February, clicking the right navigation arrow will move February to the left of the panel so that March will display as the right-hand panel. All of this is automatic and nothing needs to be configured by you.
Though showing two or more calendars in the page looks very different to the user, for the programmer it hardly makes any difference at all.