# YUI Calendar: Handling 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 an alert 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).

var mySelectHandler = function(type,args,obj) { var selected = args[0]; alert("Selected: " + this._toDate(selected[0])); }; var myDeselectHandler = function(type,args,obj) { var selected = args[0]; alert("Deselected: " + this._toDate(selected[0])); }; 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();
Continue to Functional Example >