YUI: Calendar with Tooltip Overlay

Updated this example to work with YUI Version 2.2.2. The original 0.11 version can be found here.

This example allows you to create an associative array containing dates and tooltips. It will populate the calendar with the selected dates & build the tooltip widget. So hover over the highlighted dates.

Update: Updated this example to Version 2.2.2.

UPDATED: This example now supports multiple months, I have the below calendar set with dates for the next year.

Currently, I am using PHP to generate the array of dates. It would not be that hard to use JSON or XHR to accomplish this.

Updated: Here is an updated example using a JSON XHR request.

The HTML

The Javascript

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        cal1 = null,
        dateHolder = [],
        myTooltip = null,
        myDates = {
            '8/1/2007':    'Aug 1st - This is a test. This is a test. This is a test. This is a test. This is a test.',
            '8/6/2007':    'Aug 6th - This is a test. This is a test. This is a test. This is a test. This is a test.',
            '8/13/2007':    'Aug 13th - This is a test. This is a test. This is a test. This is a test. This is a test.',
            '7/25/2008':    'Jul 25th - This is a test. This is a test. This is a test. This is a test. This is a test.'
            //Example code snipped
        };

function init() {
        strDates = '';
        for (var tmpDate in myDates) {
            strDates = strDates + ',' + tmpDate;
        }
        cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Container', {
            pagedate: '8/2007',
            selected: strDates,
            MULTI_SELECT: true
        }
        );
        cal1.renderEvent.subscribe(addListeners);
        cal1.render();

Event.addListener('addTip', 'click', addDynamicTip);
        dp.SyntaxHighlighter.HighlightAll('code'); 
    }
    function addDynamicTip(ev) {
        Event.stopEvent(ev);
        var nDate = Dom.get('newDate').value;
        var nTip = Dom.get('newTip').value;
        if (nDate && nTip) {
            myDates[nDate] = nTip;
            try { //For Internet Explorer, not sure why,,
                cal1.select(nDate);
            } catch (e) {}
            cal1.render();
        }
    }
    function addListeners() {
        var tds = Dom.getElementsByClassName('calcell', 'td', cal1.table);
        var tipTds = [];
        if (myTooltip) {
            myTooltip.destroy();
        }
        for (var i = 0; i < tds.length; i++) {
            //Parse the current date to (m/d/yyyy)
            var tmpDate = cal1.cellDates[i][1] + '/' + cal1.cellDates[i][2] + '/' + cal1.cellDates[i][0];
            if (myDates[tmpDate]) {
                tds[i].title = myDates[tmpDate];
                tipTds[tipTds.length] = tds[i].id;
            }
        }
        myTooltip = new YAHOO.widget.Tooltip('cal_tooltip', { 
                context: tipTds, 
                showDelay:500 } );
    }

Event.on(window, 'load', init);
})();

YUI: Calendar with Tooltip Overlay (YUI Version 2.2.2)

The HTML

The Javascript