The Yahoo! User Interface (YUI) is a free library of JavaScript source code you can use to build interesting and interactive web pages. As we saw in this article, it also contains a number of useful CSS resources. The Calendar is one of the many cool YUI components you can integrate into your website.

This control lets you place a calendar onto your webpage and customise it to fit your needs. Let’s take a look at how we can implement a basic calendar.

Firstly, you will need to import the following files into your page in the same order as below: 


<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/calendar/assets/skins/sam/calendar.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/calendar/calendar-min.js"></script>

The JS scripts handle the functionality of the calendar and the CSS file controls the look of it.

Next, you will need to create a <div> element in your page and give it an ID. This <div> will serve as the container for the calendar.

<div id="calendarContainer"></div>

To apply the look specified in the CSS file, do the following:

<body class="yui-skin-sam">

If you want to change the visual appearance of the calendar, you will need to edit the CSS file directly. In the example below, I have changed the background colour, the border and padding. 


/* CALENDAR BOUNDING BOX */
.yui-skin-sam .yui-calcontainer 
{
 background-color:#0066FF;
 border:2px solid black;
 padding:20px;
}

The following code will generate the calendar: 


<script>
YAHOO.namespace("example.calendar");
YAHOO.example.calendar.init = function() 
{
 YAHOO.example.calendar.calendar1 = new YAHOO.widget.Calendar("calendar1","calendarContainer");
 YAHOO.example.calendar.calendar1.render();
}
YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);
</script>

This is how the default calendar will look like:

That was a very simple implementation of the Calendar tool. Let’s now add the navigator feature to allow the user to enter the year and month without having to browse through the pages.

All you need to do is make a slight change to the code and set the navigator property to true. 


YAHOO.example.calendar.calendar1 = new
YAHOO.widget.Calendar("calendar1","calendarContainer",{navigator:true});

And this is how it will look like:

If you move your mouse over the month on the calendar, the navigator will pop up.

Putting it all together, including the navigator feature:


<html>
<head>
<title>Calendar</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/calendar/assets/skins/sam/calendar.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/calendar/calendar-min.js"></script>

<script>
YAHOO.namespace("example.calendar");
YAHOO.example.calendar.init = function() 
{
 YAHOO.example.calendar.calendar1 = new YAHOO.widget.Calendar("calendar1","calendarContainer",{navigator:true});
 YAHOO.example.calendar.calendar1.render();
}
YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);
 
</script>
</head>

<body class="yui-skin-sam">
<div id="calendarContainer"></div>
</body>
</html>

There are many other calendar features you can take advatage of, such as multi-select, multi-page and localisations. Try out the examples at http://developer.yahoo.com/yui/examples/calendar/index.html.