YUI Library: Calendar and CalendarGroup 2007-2-19 2.

5
Simple Use Case: YAHOO.widget.Calendar Interesting Moments in Calendar, CalendarGroup YAHOO.widget.Calendar &
See online docs for complete list of Calendar and CalendarGroup events. CalendarGroup Properties
Markup:
<div id="container"></div> Event Fires... Arguments: id (str)
selectEvent After a date is selected. Array of date fields selected by cfg (Config)
the cal’s configuration object
Script: the current action (e.g.,
var myCal = new YAHOO.widget.Calendar("container"); [[2008,8,1],[2008,8,2]]) oDomContainer (el)
the cal’s outer container
myCal.render(); Array of date fields deselected by
deselectEvent After a date has been
deselected. the current action (e.g., YAHOO.widget.Calendar &
Creates a single page Calendar instance set to the current month. [[2008,8,1],[2008,8,2]])
CalendarGroup Methods
changePageEvent When the Calendar none
Constructor: YAHOO.widget.Calendar, CalendarGroup navigates to a new Navigation:
month. addMonths(int)
YAHOO.widget.Calendar([str calId,] str|HTMLElement
container [,obj config]); showEvent When the Calendar’s none addYears(int)
show() method is called. subtractMonths(int)
YAHOO.widget.CalendarGroup([str calId,] str|HTMLElement subtractYears(int)
container [,obj config]); hideEvent When the Calendar’s none setMonth(int)
hide() method is called. setYear(int)
calId: HTML ID for the new element created by the control All Calendar events are Custom Events (see Event Utility docs); subscribe to these nextMonth()
to house the Calendar's DOM structure (optional, as of 2.4.0).
events using their subscribe method: nextYear()
myCal.selectEvent.subscribe(fnMyHandler);. Event-specific arguments, if previousMonth()
If not provided, the container’s ID with a “_t” suffix is used. present, will be passed in an array as the second argument to the event handler. Some
events also have a "before" event which can be subscribed to previousYear()
container: HTML ID of (or a reference to) an existing but empty HTML
Rendering:
element into which the new Calendar will be inserted. Calendar Options render()
Configure options using the constructor configuration object or setProperty, as described in “Solutions”
config: Calendar configuration settings object (optional). renders current state to page
addRenderer
Calendar objects include several configurable options, including:
(s dates, fn renderer)
Solutions addWeekdayRenderer
SHOW_WEEKDAYS SHOW_WEEK_ HEADER MULTI_SELECT (int wkd, fn renderer)
Render a single page calendar set displaying January 2008 with Spanish HIDE_BLANK_WEEKS PAGES (CalendarGroup only) NAVIGATOR addMonthRenderer
weekdays and month names: (int month, fn renderer)
myCal = new YAHOO.widget.Calendar("container",
Localizing Calendar and CalendarGroup show()
hide()
{ pagedate: "1/2008", Calendar instances can be localized via configuration options, including:
MONTHS_LONG:["Jenero","Febrero", … ,"Diciembre"], Selection:
WEEKDAYS_SHORT:["Lu", "Ma", … , "Do"]});
myCal.render(); MONTHS_SHORT WEEKDAYS_1CHAR WEEKDAYS_MEDIUM select(str date)
MONTHS_LONG WEEKDAYS_SHORT WEEKDAYS_LONG selectCell(int cellIdx)
LOCALE_MONTHS LOCALE_WEEKDAYS deselect(str date)
Add highlighting for Mexican holidays using CSS styles:
<style> deselectCell(int cellIdx)
.m1 .d1, .m1 .d6, .m2 .d5, .m2 .d14, .m2 .d24 Applying localization properties requires the same syntax as any other deselectAll()
{ background-color:yellow; } properties in a Calendar’s cfg object: getSelectedDates()
returns array of JS date objects
</style>
myCal = new YAHOO.widget.Calendar("calEl", "container"); clear()
myCal.cfg.setProperty("MONTHS_SHORT", removes all selected dates,
There are two ways to configure options on your Calendar: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", resets month/year
"Sep", "Okt", "Nov", "Dez"] );
// 1. In the constructor, via an object literal: myCal.cfg.setProperty("LOCALE_MONTHS", "short"); Other:
myCal = new YAHOO.widget.Calendar("container", myCal.render(); reset()
{pagedate: "5/2008"}); resets calendar to original state
// 2. Via "setProperty" after rendering: myCal.cfg.setProperty
myCal.cfg.setProperty("pagedate", "5/2008"); Dependencies (propName, propValue)
myCal.cfg.getProperty
Calendar requires the YAHOO Object, Event, and Dom. (propName)