Calendar Example: Get DOM Element on Click

This example illustrates a method for accessing the DOM element associated with a calendar cell when it is clicked. There is no built-in method for doing this; what's illustrated here involves listening for the click event on the calendar's container element and then extracting information about the cell that was clicked on from the event object.

Hence, our first step is to create a calendar as per the usual steps; our Calendar instance will live in a div whose id is cal1Container:

this.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calExample.cal1","cal1Container"); 			
this.cal1.render ();

Next, we'll write a method that will listen for clicks in cal1Container and will determine what cell was clicked on. We need to handle the click whether it was on the cell's encompassing td element or on the a element within the td (the a element contains the date number); if the target of the event isn't a td, we'll assume that the td is the event target's parent element. Once we have identifed the target, we'll alert its id (you would obviously want to do something more interesting than write an alert):

trapClick = function(e) {
	var thisTarget = YAHOO.util.Event.getTarget(e);
	if (thisTarget.nodeName == "TD") {
		alert(thisTarget.id);
	} else { 
		alert(thisTarget.parentNode.id);
	}
}

Once we've done that, we can hook up our trapClick handler to listen for click events on our container element, cal1Container:

YAHOO.util.Event.addListener("cal1Container", "click", YAHOO.example.calExample.trapClick, YAHOO.example.calExample, true);

That's the simplest way we know of to access the id of the clicked cell in the calendar. Note: This approach would need to be refined to discriminate between clicks in cells and clicks, say, on the month-navigation arrows...but it's a basis from which to start if you want access to a Calendar instance's dom elements on click.

— Eric Miraglia, Yahoo Presentation Platform Engineering