How to create a customized Yahoo Calendar within your PHP form

During the implementation of a project for my current employer i wanted to add some "glamour" to my web-forms. A big part of the project is to add a lot of data into a database. To make that a little bit easier i wanted a date picker, so that someone does not always have to switch between mouse and keyboard (which takes quite long for unexperienced users). There are a lot of calendar applications out in the web, and there are also some solutions how to implement such applications by your own, but who wants to invent the wheel a second time? I chose the Yahoo Calendar. It has great functionality and a huge potential to personalize the calendar. Luckily i attendet the lecture "Usabilty Engineering" at the same time, so i thought about "efficiency", how to make my calendar more easy to use, more comfortable than others. So i decided that my calendar should pop up, when the user clicks in the date-field within the web-form and it should disappear when the user enters something via the keyboard or clicks somewhere else on the webpage. In addition i wanted the calendar in german, which also needs quite a lot of typing, for all settings to be edited.
1 answer

Howto insert/edit a Yahoo Calendar in your Homepage/Form

First of all i have to say, that i had to remove all "<" from my code, because the "code" tag didn't work and the script-lines weren't displayed ;)

Step 1: Download the package
At first you have to download the calendar sources from

Step 2: Find a place
Now copy the calendar sources somewhere where you want to use it

Step 3: Insert it into your homepage/form
-) First you have to include the necessary javascripts and css files. For my kind of calendar the following were enough.

script type="text/javascript" src="yui/build/yahoo/yahoo.js">/script>
script type="text/javascript" src="yui/build/event/event.js" >/script>
script type="text/javascript" src="yui/build/dom/dom.js" >/script>
script type="text/javascript" src="yui/build/calendar/calendar.js">/script>
link type="text/css" rel="stylesheet" href="yui/build/calendar/assets/skins/sam/calendar.css">

-) Now you need an empty div-Tag somewhere were you want to add your calendar

div id="calDatumContainer" style="display:none; position:absolute;">/div>

-) Now we simply add the calendar script of our choice, in my case the following

script type="text/javascript">

Here i configured the calendar to use the german specifications.

var navConfig = {
strings : {
month: "Monat",
year: "Jahr",
submit: "OK",
cancel: "Abbrechen",
invalidYear: "G¸ltiges Jahr eingeben!"
monthFormat: YAHOO.widget.Calendar.LONG,
initialFocus: "Jahr"
var calDatum = new YAHOO.widget.Calendar("calDatum","calDatumContainer",
{ LOCALE_WEEKDAYS:"short", START_WEEKDAY: 1, navigator:navConfig });

// Correct formats for Germany:,, mm.yyyy
calDatum.cfg.setProperty("DATE_FIELD_DELIMITER", ".");
calDatum.cfg.setProperty("MDY_DAY_POSITION", 1);
calDatum.cfg.setProperty("MDY_MONTH_POSITION", 2);
calDatum.cfg.setProperty("MDY_YEAR_POSITION", 3);
calDatum.cfg.setProperty("MD_DAY_POSITION", 1);
calDatum.cfg.setProperty("MD_MONTH_POSITION", 2);

// Date labels for German locale
calDatum.cfg.setProperty("MONTHS_SHORT", ["Jan", "Feb", "M\u00E4r", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]);
calDatum.cfg.setProperty("MONTHS_LONG", ["Januar", "Februar", "M\u00E4rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]);
calDatum.cfg.setProperty("WEEKDAYS_1CHAR", ["S", "M", "D", "M", "D", "F", "S"]);
calDatum>.cfg.setProperty("WEEKDAYS_SHORT", ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]);
calDatum.cfg.setProperty("WEEKDAYS_MEDIUM",["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"]);
calDatum.cfg.setProperty("WEEKDAYS_LONG", ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"]);


Here i added some Event-Listeners:
The "focus" event, so that the calendar shows up when clicking in the field "datum"
The "keypress" event, so that the calendar is hidden when the user wants to insert the date by typing it in

YAHOO.util.Event.addListener("datum", "focus",, calDatum, true);
YAHOO.util.Event.addListener("datum", "keypress", calDatum.hide, calDatum, true);

With this function i add the selected date into the "datum"-field, in the date-format i specify.

function handleSelect(type,args,obj) {
var dates = args[0];
var date = dates[0];
var year = date[0], month = date[1], day = date[2];

document.anlegen.datum.value = year + "-" + month + "-" + day;

calDatum.selectEvent.subscribe(handleSelect, calDatum, true);

It took me some time to figure it out, but once you have a guideline its very easy to use.