YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Calendar Control: Handling Calendar Events

# Calendar Control: Handling Calendar Events

The Calendar control exposes a number of CustomEvents, so that applications can listen for and react to interesting moments in the Calendar's operation. This example demonstrates how to listen for the select and deselect events, which are fired whenever a date in the Calendar is selected or deselected.

View example in new window.

Select/Deselect Events

## Setting up the Calendar

Calendar provides several events to which an application can subscribe in order to react easily to changes in the state of the Calendar. The events provided are:

- beforeRenderEvent - Fired prior to the rendering of the Calendar
- renderEvent - Fired after the Calendar is rendered
- beforeSelectEvent - Fired before a selection is made
- selectEvent - Fired after a date selection is made. This event receives one argument -- an array of dates fields in the format: [[yyyy,mm,dd],[yyyy,mm,dd]]
- beforeDeselectEvent - Fired before a deselection is made
- deselectEvent - Fired after dates are deselected. This event receives one argument -- an array of dates fields in the format: [[yyyy,mm,dd],[yyyy,mm,dd]]
- changePageEvent - Fired when the active Calendar page is changed
- clearEvent - Fired when the Calendar is cleared. Calling clear on a Calendar removes all of its selections and sets the page to the current month and year.
- resetEvent - Fired when the Calendar is reset. Calling a Calendar's reset method resets the Calendar to its original view and selection state.

The events are each defined by YAHOO.util.CustomEvent, and are subscribed to using the subscribe method of CustomEvent. In this example, we will display a message each time a date is selected or deselected. The selectEvent and deselectEvent events will fire when selections and deselections are made via user interaction (eg, when a user clicks to select a date) or programatically (eg., if a script on the page executes the select method to select a date).

The `dateToLocaleString` function used to generate the messages demonstrates how you can use the locale configuration properties for Calendar when creating string representations of dates

function dateToLocaleString(dt, cal) { var wStr = cal.cfg.getProperty("WEEKDAYS_LONG")[dt.getDay()]; var dStr = dt.getDate(); var mStr = cal.cfg.getProperty("MONTHS_LONG")[dt.getMonth()]; var yStr = dt.getFullYear(); return (wStr + ", " + dStr + " " + mStr + " " + yStr); } function mySelectHandler(type,args,obj) { var selected = args[0]; var selDate = this.toDate(selected[0]); logEvent("SELECTED: " + dateToLocaleString(selDate, this)); }; function myDeselectHandler(type, args, obj) { var deselected = args[0]; var deselDate = this.toDate(deselected[0]); logEvent("DESELECTED: " + dateToLocaleString(deselDate, this)); }; YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container"); YAHOO.example.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.example.calendar.cal1, true); YAHOO.example.calendar.cal1.deselectEvent.subscribe(myDeselectHandler, YAHOO.example.calendar.cal1, true); YAHOO.example.calendar.cal1.render();

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Calendar Control Examples:

- Quickstart Tutorial
- Multi-Select Calendar
- Multi-Page Calendar
- Minimum/Maximum Dates
- Calendar Navigator
- Handling Calendar Events
- Calendar and Text Fields
- Calendar and Select Fields
- Using the Render Stack
- Popup Calendar - Basic
- Popup Calendar - Advanced
- Interval Selection Calendar
- Localization - Germany
- Localization - Japan
- Localization - Taiwan (Year Offset)
- Skinning The Calendar
- Calendar Plugin (included with examples for Rich Text Editor)
- Inline Cell Editing (included with examples for DataTable Control)
- Using YUI Loader to Load the Calendar Control (included with examples for YUI Loader Utility)
- Simple Calendar Menu Button (included with examples for Button Control)
- Calendar Menu Button with Date on Button Face (included with examples for Button Control)
- Simple Application (included with examples for Layout Manager)
- Complex Application (included with examples for Layout Manager)
- Simple Profiling (included with examples for ProfilerViewer Control)

### More Calendar Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings