« RBI - Rich Web Interface
Why doesn’t America believe in evolution? »

Making a Single Calendar Popup with Yahoo UI

As I briefly mention in Yahoo UI Library Tooltips, Menus, and Calendar, the YUI examples for the Calendar controls do not include an example of a single month calendar (as opposed to a 2-up which shows two months in one glance) that pops up and hides itself after a selection. The only examples of popups are the 2-ups, which use the Calendar2up class from YUI.

Yahoo Calendar 1-Up

Yahoo Calendar

Yahoo Calendar 2-Up

Yahoo Calendar2up

After a browse through the API documentation, I came up with an example that exhibits the desired behavior from the single-month calendar control.

First, to construct

function init() {
// CALENDAR INIT
this.link1 = document.getElementById(’dateLink1′);
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar(”YAHOO.example.calendar.cal1″,”cal1Container”)
YAHOO.example.calendar.cal1.title = “Select the desired workout day:”;

Next, hooking up a callback function when a selection is made

YAHOO.example.calendar.cal1.onSelect = setDate1;
YAHOO.example.calendar.cal1.render();
}

A function to be called from a button onClick or Javascript link on the page


function showCalendar1() {
var pos = YAHOO.util.Dom.getXY(link1);
YAHOO.example.calendar.cal1.oDomContainer.style.display='block';
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal1.oDomContainer, [pos[0],pos[1]+link1.offsetHeight+1]);
}

The callback function to handle selections. Note how the calendar is hidden by manipulating the display style property

function setDate1() {
var date1 = YAHOO.example.calendar.cal1.getSelectedDates()[0];
YAHOO.example.calendar.cal1.oDomContainer.style.display=’none’;
alert(date1);
}

The obligatory onload hook

YAHOO.util.Event.addListener(window, “load”, init);

The div to contain the calendar

<div id=”cal1Container” style=”position: absolute; display: none”>

Lastly, here’s a link that invokes the popup

<a id="chooseday" onclick="showCalendar1()" href="javascript:void(null)"><img border="0" id="dateLink1" style="margin: 5px; vertical-align: middle" src="http://www.bironology.org/wp-admin/pdate.gif" /></a>

And here’s a page that brings it all together.

This entry was posted on Wednesday, August 16th, 2006 at 7:21 pm and is filed under General, Web Development, AJAX. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

5 Responses to “Making a Single Calendar Popup with Yahoo UI”

  1. Luis Carlos Says:
    August 22nd, 2006 at 10:54 am

    Thanks for the code… but in line ” YAHOO.example.calendar.cal1.onSelect = setDate; ” is ” YAHOO.example.calendar.cal1.onSelect = setDate1; “

  2. Joe Biron Says:
    August 22nd, 2006 at 10:57 am

    Woops. Nice catch. Updated.

  3. Yellek Says:
    September 8th, 2006 at 8:07 pm

    Awesome example, just what I was looking for for a project I am working on. Thanks.

  4. Tudor Says:
    December 8th, 2006 at 4:41 am

    Why not just call hide() which does exactly what you want?
    YAHOO.example.calendar.cal1.hide() will make the calendar disappear. Cheers!

  5. David Miller Says:
    February 20th, 2008 at 9:18 am

    Thanks so much for this simple help. I went through loads of other examples to hide a yui calendar that were really complicated before finding yours. @Tudor’s suggestion also works btw. Now all I need to do is work out how to do this when the calendar loses focus too! Thanks again.

Leave a Reply