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.
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:
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
1 | function dateToLocaleString(dt, cal) { |
2 | var wStr = cal.cfg.getProperty("WEEKDAYS_LONG")[dt.getDay()]; |
3 | var dStr = dt.getDate(); |
4 | var mStr = cal.cfg.getProperty("MONTHS_LONG")[dt.getMonth()]; |
5 | var yStr = dt.getFullYear(); |
6 | return (wStr + ", " + dStr + " " + mStr + " " + yStr); |
7 | } |
8 | |
9 | function mySelectHandler(type,args,obj) { |
10 | var selected = args[0]; |
11 | var selDate = this.toDate(selected[0]); |
12 | |
13 | logEvent("SELECTED: " + dateToLocaleString(selDate, this)); |
14 | }; |
15 | |
16 | function myDeselectHandler(type, args, obj) { |
17 | var deselected = args[0]; |
18 | var deselDate = this.toDate(deselected[0]); |
19 | |
20 | logEvent("DESELECTED: " + dateToLocaleString(deselDate, this)); |
21 | }; |
22 | |
23 | YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container"); |
24 | |
25 | YAHOO.example.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.example.calendar.cal1, true); |
26 | YAHOO.example.calendar.cal1.deselectEvent.subscribe(myDeselectHandler, YAHOO.example.calendar.cal1, true); |
27 | |
28 | YAHOO.example.calendar.cal1.render(); |
view plain | print | ? |
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.
INFO 529ms (+0) 9:48:08 PM:
Config
Firing Config event: iframe=false
INFO 529ms (+0) 9:48:08 PM:
Config
Firing Config event: close=false
INFO 529ms (+1) 9:48:08 PM:
Config
Firing Config event: title=
CELL 528ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-7-12)
CELL 528ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell41 (20250-7-12)
CELL 528ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-7-11)
CELL 528ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell40 (20250-7-11)
CELL 528ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-7-10)
CELL 528ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell39 (20250-7-10)
CELL 528ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-7-9)
CELL 528ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell38 (20250-7-9)
CELL 528ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-7-8)
CELL 528ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell37 (20250-7-8)
CELL 528ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-7-7)
CELL 528ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell36 (20250-7-7)
CELL 528ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-7-6)
CELL 528ms (+1) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell35 (20250-7-6)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-7-5)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell34 (20250-7-5)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-7-4)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell33 (20250-7-4)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-7-3)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell32 (20250-7-3)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-7-2)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell31 (20250-7-2)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-7-1)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell30 (20250-7-1)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-30)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-30)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell29 (20250-6-30)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-29)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-29)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell28 (20250-6-29)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-28)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-28)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell27 (20250-6-28)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-27)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-27)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell26 (20250-6-27)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-26)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-26)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell25 (20250-6-26)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-25)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-25)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell24 (20250-6-25)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-24)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-24)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell23 (20250-6-24)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-23)
CELL 527ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-23)
CELL 527ms (+1) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell22 (20250-6-23)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-22)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-22)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell21 (20250-6-22)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-21)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-21)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell20 (20250-6-21)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-20)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-20)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell19 (20250-6-20)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-19)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-19)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell18 (20250-6-19)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-18)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-18)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell17 (20250-6-18)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-17)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-17)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell16 (20250-6-17)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[2] for (20250-6-16)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-16)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-16)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell15 (20250-6-16)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-15)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-15)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell14 (20250-6-15)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-14)
CELL 526ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-14)
CELL 526ms (+1) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell13 (20250-6-14)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-13)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-13)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell12 (20250-6-13)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-12)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-12)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell11 (20250-6-12)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-11)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-11)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell10 (20250-6-11)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-10)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-10)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell9 (20250-6-10)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-9)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-9)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell8 (20250-6-9)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-8)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-8)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell7 (20250-6-8)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
renderer[1] for (20250-6-7)
CELL 525ms (+0) 9:48:08 PM:
Calendar cal1
renderer[0] for (20250-6-7)
CELL 525ms (+54) 9:48:08 PM:
Calendar cal1
Rendering cell cal1_cell6 (20250-6-7)
INFO 471ms (+471) 9:48:08 PM:
LogReader instance0
LogReader initialized
INFO 0ms (+0) 9:48:07 PM:
global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Copyright © 2010 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings