How to create a customized Yahoo Calendar within your PHP 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 http://developer.yahoo.com/yui/calendar/

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: dd.mm.yyyy, dd.mm, 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"]);

calDatum.render();

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.show, 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.hide();
}

calDatum.selectEvent.subscribe(handleSelect, calDatum, true);
/script>

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