Previous Page
Next Page

Adding a Calendar to Your Page

Many Web applications need a calendar that the user can refer to and interact with. Reservation forms, to-do lists, navigation for posts on weblogs, the list goes on and on. The YUI library has a good calendar widget that is easy to implement (Figure 16.3).

Figure 16.3. When you hover over a future date, the date highlights.

[View full size image]


The simple HTML for our calendar appears in Script 16.4. The CSS is in Script 16.5, and Script 16.6 shows you how to add the JavaScript for an interactive, one-up calendar (where only one month appears).

Script 16.4. This relatively simple HTML mostly calls external files for the Calendar example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
     <title>Yahoo! Calendar Control: 1 up</title>
     <link type="text/css" rel="stylesheet" href="yui/reset.css"/>
     <link type="text/css" rel="stylesheet" href="yui/calendar.css"/>
     <link type="text/css" rel="stylesheet" href="script02.css"/>
     <script type="text/javascript" src="yui/yahoo.js"></script>
     <script type="text/javascript" src="yui/event.js"></script>
     <script type="text/javascript" src="yui/dom.js"></script>
     <script type="text/javascript" src="yui/calendar.js"></script>
     <script type="text/javascript" src="script02.js"></script>
</head>
<body>
     <div class="column left">
        <h1>Make a Reservation</h1>
        <p>Use the calendar to your right to pick your preferred date to visit:</p>
        <p id="datePicked"> </p>
     </div>
     <div class="column right">
        <div id="cal1Container"></div>
        <a class="navLink" id="resetCal"> Reset</a>|
        <a class="navLink" id="getSelectedDate"> Choose Date</a>
     </div>
</body>
</html>

Script 16.5. The Calendar style sheet.

a.navLink {
     font-size: 12px;
     text-decoration: underline;
     padding: 5px;
     color: #000;
     cursor:pointer;
}

div.right div {
     margin-left: auto;
     margin-right: auto;
     width: 150px;
}

h1 {
     font-size: 1.5em;
}

.column p {
     margin: 10px 0px;
     font: normal 14px verdana, sans-serif;
     line-height: 15px;
}

.column.right {
     text-align: center;
     background-color: #C2C2D7;
     float: left;
     margin-left: 10px;
     width: 200px;
     padding: 50px 0px;
     height: 425px;
}

.column.left {
     float: left;
     display: inline;
     margin-left: 80px;
     width: 300px;
}

Script 16.6. The JavaScript can get a bit long for the calendar, but it isn't that complex.

[View full width]
YAHOO.namespace("calendar");

function init() {
     YAHOO.calendar.cal1 = new YAHOO.widget. Calendar("YAHOO.calendar.cal1", "cal1Container");
     YAHOO.calendar.cal1.render();

     document.getElementById("resetCal"). onclick = YAHOO.calendar.cal1.reset;
     document.getElementById("getSelectedDate"). onclick = showSelected;
}

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

function showSelected() {
     var pickedDate = YAHOO.calendar.cal1. getSelectedDates()[0];
     var outDate = YAHOO.calendar.cal1.Locale. WEEKDAYS_LONG[pickedDate.getDay()] + ", " +
 YAHOO.calendar.cal1.Locale. MONTHS_LONG[pickedDate.getMonth()] + " " + pickedDate.getDate
() + ".";

     document.getElementById("datePicked"). innerHTML = "We're looking forward to seeing 
you on " + outDate;
}

To add a one-up calendar:

1. 
<link type="text/css" rel="stylesheet" href="yui/reset.css"/>
<link type="text/css" rel="stylesheet" href="yui/calendar.css"/>



For a calendar, we need to include Yahoo!'s reset.css and calendar.css files in Script 16.4.

2. 
<script type="text/javascript" src="yui/yahoo.js"></script>
<script type="text/javascript" src="yui/event.js"></script>
<script type="text/javascript" src="yui/dom.js"></script>
<script type="text/javascript" src="yui/calendar.js"></script>



For scripts, we need yahoo.js (as always) and event.js, dom.js, and calendar.js. That's in addition to our own CSS and JavaScript files, of course.

3. 
YAHOO.namespace("calendar");



This line of code that starts off Script 16.6 tells the browser that we're going to be working with variables and objects that have to do with YUI's calendar. This way, we not only can't step on non-YUI code, we can't even interfere with code from YUI's other modules.

4. 
YAHOO.calendar.cal1 = new YAHOO. widget.Calendar("YAHOO.calendar. cal1","cal1Container");
YAHOO.calendar.cal1.render();

document.getElementById("resetCal"). onclick = YAHOO.calendar.cal1.reset;
document.getElementById("getSelected Date").onclick = showSelected;



This code, inside the init() function, is all called when the page is first loaded. We start off by creating a new calendar object: cal1, and we tell it to render (that is, create itself) on the screen. We also set the event handlers for two links: resetCal, which resets the dates on the calendar, and getSelectedDate, which allows a user to choose a date on the calendar.

5. 
[View full width]
var pickedDate = YAHOO.calendar. cal1.getSelectedDates()[0];
var outDate = YAHOO.calendar.cal1. Locale.WEEKDAYS_LONG[pickedDate. getDay()] + ", " +
 YAHOO.calendar. cal1.Locale.MONTHS_LONG [pickedDate.getMonth()] + " " + pickedDate.getDate
() + ".";

document.getElementById ("datePicked").innerHTML = "We're looking forward to seeing you
 on " + outDate;



Sometimes, you'll want your Web application to do something that isn't already built in to YUI, and that's what's happening here. We want our picked date to display in a friendly manner on the screen after the user selects a date. In step 4, we told the showSelected() function that it was to handle that event, and here's the code. The YUI toolkit has the date we want stored in YAHOO.calendar.cal1.getSelectedDates()[0]. That's not the friendliest (or the shortest, or most memorable) variable, so we start off by putting it into the pickedDate variable instead.

Next, we set outdate to be the string that we want displayed on the screen. We could use the date methods you learned in Chapter 13, but it's simpler to use the ones built into YUI: YAHOO.calendar.cal1.Locale.WEEKDAYS_LONG and YAHOO.calendar.cal1.Locale.MONTHS_LONG are arrays that contain the names of the days of the week and the months of the year, respectively. And to finish, we set datePicked's innerHTML to display our message (Figure 16.4).

Figure 16.4. Clicking the Choose Date link adds a message to the text and locks the date into the calendar.

[View full size image]


Tip

  • It's so simple to do a single calendar with YUI that you'd expect writing a standard 2-up calendar would be similar. Unfortunately, while it's still much easier than writing it from scratch, there's no simple, "just add this" method to go from one to anotherwhich is why it's a task of its own, next.



Previous Page
Next Page