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 14.3).

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


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

To add a one-up calendar:

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



For a calendar, all we need to include is Yahoo!’s calendar.css files in Script 14.4.

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



For scripts, we need yahoo-dom-event.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 14.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("cal1Container");
resetCal();

document.getElementById("resetCal").onclick = resetCal;
document.getElementById("getSelectedDate").onclick = showSelected;

function resetCal() {
  YAHOO.calendar.cal1.cfg.setProperty("pagedate", new Date());
  YAHOO.calendar.cal1.cfg.setProperty("selected","");
  YAHOO.calendar.cal1.render();
}



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. 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. We end up by defining our reset function, which will set the date back to its default value and render the calendar.

Script 14.4. This relatively simple HTML mostly calls external files for the Calendar example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Yahoo! Calendar Control: 1 up</title>
     <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-dom-event.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 yui-skin-sam">
        <div id="cal1Container"></div>
        <a class="navLink" id="resetCal">Reset</a>|
        <a class="navLink" id="getSelectedDate">Choose Date</a>
     </div>
</body>
</html>

5. 
var dateString = "Please select a date";
var pickedDate = YAHOO.calendar.cal1.getSelectedDates()[0];
if (pickedDate) {
  var outDate =  YAHOO.calendar.cal1.Locale.WEEKDAYS_LONG [pickedDate.getDay()] + ", " + YAHOO.calendar.cal1.Locale.MONTHS_LONG[pickedDate.getMonth()] + " " + pickedDate.getDate() + ".";
  dateString = "We're looking forward to seeing you on " + outDate;
}
document.getElementById("datePicked").innerHTML = dateString;



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.

Because users can do all kinds of wacky things, we want to make sure that they actually did choose a date. On the off chance they didn’t, we set our default output to prompt them to try again.

In step 4, we told the showSelected() function that it was to handle when the user was done, 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 put it into the pickedDate variable instead.

Script 14.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 12px verdana, sans-serif;
     line-height: 15px;
}

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

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

If pickedDate exists, they chose a date, so we set outdate to be the string that we want displayed on the screen. We could use the date methods you learned in Chapter 12, 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 14.4).

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


✓ 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 another—which is why it’s a task of its own, next.


Script 14.6. The JavaScript can get a bit long for the calendar, but it isn’t too complex.
YAHOO.namespace("calendar");

YAHOO.calendar.init = function() {
     YAHOO.calendar.cal1 = new YAHOO.widget.Calendar("cal1Container");
					resetCal();
					document.getElementById("resetCal").onclick = resetCal;
					document.getElementById("getSelectedDate").onclick = showSelected;
					function resetCal() {
					YAHOO.calendar.cal1.cfg.setProperty("pagedate",new Date());
					YAHOO.calendar.cal1.cfg.setProperty("selected","");
					YAHOO.calendar.cal1.render();
					}
}
YAHOO.util.Event.onDOMReady(YAHOO.calendar.init);

function showSelected() {
     var dateString = "Please select a date";
					var pickedDate = YAHOO.calendar.cal1.getSelectedDates()[0];
					if (pickedDate) {
					var outDate =  YAHOO.calendar.cal1.Locale.WEEKDAYS_LONG[pickedDate.getDay()] + ", " + YAHOO.calendar.cal1.Locale.MONTHS_LONG[pickedDate.getMonth()] + " " + pickedDate.getDate() + ".";
					dateString = "We're looking forward to seeing you on " + outDate;
					}
					document.getElementById("datePicked").innerHTML = dateString;
}

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.147.65.247