YUI Library: Calendar and CalendarGroup 2011-3-21 v2.

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