| Table of Contents | Previous Next |
12.4 Generating calendars12.4.1 Adding a month calendar to a pageWithout doubt, another popular use of the date object is to generate a calendar. Since we know how to get the year, month, and date from a date object, to generate a calendar is just a formatting process. Our first aim here is to generate the current month calendar to a page. Consider the following example code ex12-18.htm:
Example: ex12-18.htm - A Page To Show A Month Calendar
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>A Month Calendar -- ex1218.htm</title></head>
6: <style> .mSt{font-size:16pt;color:#ffff00;font-weight:bold } </style>
7: <script src="calendar.js"></script>
8: <body style="background:#000088;text-align:center;font-family:arial">
9:
10: <div class="mSt" style="font-size:20pt;color:#00ffff" align="center">
11: <br />The Calendar of Current Month<br /><br />
12: <div id="cMonthL"></div>
13: <div id="calendarL"></div>
14: </div>
15:
16: <script>
17: dateObj = new Date()
18: tmpMonth = dateObj.getMonth()
19: tmpYear = dateObj.getFullYear()
20: document.getElementById("cMonthL").innerHTML=
21: mMonth[tmpMonth]+" "+tmpYear
22: document.getElementById("calendarL").innerHTML=
23: getCalendar(tmpYear,tmpMonth)
24: </script>
25: </body>
26: </html>
Again, in this example XHTML is used as an interface. Line 12 defines a location for the current month (cMonthL). This location is used in lines 2021 to output the month and year. Line 13 is our main location for the calendar. We use a script function getCalendar() (see line 23) to output the month calendar to this location. The script function returns an XHTML table and is defined in a program file called calendar.js.
Example: calendar.js - The ECMAScript For ex1218.htm
1: mDay = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday",
2: "Friday","Saturday")
3: mMonth = new Array("January","February","March","April","May","June",
4: "July","August","September","October","November","December")
5:
6:
7: function getCalendar(yy,mm)
8: {
9: calDay = new Array(43)
10: for (ii=0;ii<=42;ii++) calDay[ii]=''
11:
12: calObj = new Date(yy,mm,1,0,0,0)
13: cal2Obj = new Date(yy,mm+1,1,0,0,0)
14: stDays = calObj.getDay()
15: noDays=Math.round((cal2Obj.getTime() - calObj.getTime())/(1000*60*60*24))
16:
17: for (ii=stDays+1;ii<=noDays+stDays;ii++)
18: {
19: calDay[ii]=ii-stDays
20: }
21:
22: calSt='<table class="mSt" cellspacing="5"><tr><td>Sun</td><td>Mon</td>'+
23: '<td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td>'
24:
25: for(jj=0;jj<=5;jj++){
26: calSt = calSt +"<tr align='center'>"
27: for (ii=1;ii<=7;ii++){
28: calSt=calSt + "<td>"+calDay[(ii+jj*7)]+"</td>"
29: }
30: calSt=calSt+"</tr>"
31: }
32: calSt=calSt+"</table>"
33: return(calSt)
34: }
35:
There are a number of ways to implement a calendar function. Some of them may include clever tricks to manipulate the days. Our implementation is just a simple one and easy to understand. This function takes two arguments, year (yy) and month (mm). First we need to find out the number of days noDays and the starting weekday stDays of the given month. For simplicity, we arrange all the days into six rows. Each row consists of seven days. The for-loop used in lines 1720 is to shift the starting day of the month (stDays) to fit into the calendar array (calDay). The variable calSt (line 22) is an XHTML string (a table) representing the calendar. The double for-loops in lines 2531 are used to fill up the month. At the end this string (calSt) returns to the caller in line 33. A screen shot of this example is shown in Fig. 12.20. Figure 12.20. ex12-18.htm
12.4.2 A general page for calendarsAs a more practical example, we want to build a general page for calendars. This page has a drop-down box containing years from 1998 to 2020 inclusive. When the page is loaded, the 12-month calendar of the current year is displayed. When the user picks another year from the drop-down box, the calendar changes instantly. This page uses the same getCalendar()function in the program file calendar.js. First, the interface part of this page is listed in ex12-19.htm.
Example: ex12-19.htm - A General Calendar Page
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http:o/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>A General Calendar -- ex1219.htm</title></head>
6: <style>
7: .mSt{font-size:12pt;color:#ffff00;font-weight:bold }
8: .hSt{font-size:18pt;color:#00ffff;font-weight:bold }
9: .bSt{font-size:18pt;color:#000088;font-weight:bold;
10: width:100px;height:35px;background:#aaccaa}
11: </style>
12:
13: <script src="calendar.js"></script>
14: <body style="background:#000088;text-align:center;font-family:arial">
15:
16: <div align="center">
17: <table width=800>
18: <tr><td align="left" width="20%">
19: <img src="logo_web.jpg" width="110" height="60" /></td>
20: <td width="60%" align="center"><div style="font-size:64pt;
21: color:#00ffff;font-weight:bold" id="cYearHead"></div></td>
22: <td align="right"><div id="yearBox"></div></td>
23: </tr></table>
24: </div>
25: <img src="line1.gif" width="800" height="6" /><br /><br />
26:
27: <div id="cCalendar"></div>
28:
29: <script>
30: dateObj = new Date()
31: defaultYear = dateObj.getFullYear()
32: disCalendar(1998,2020,defaultYear,"cYearHead","yearBox","cCalendar")
33: </script>
34:
35: </body>
36: </html>
Lines 1723 define a table to accommodate a header. This header contains an image (logo), a location id="cYearHead" (lines 2021) to display a year string in a big font size, and a location id="yearBox" for a drop-down box. Line 27 defines a location id="cCalendar" for the actual calendar. The main part of this page is the function disCalendar() (see line 32). This function takes a number of arguments. The first two represent the start and end year for which the calendar is constructed. In this case, the calendar covers the years from 1998 to 2020 inclusively. From the statements in lines 3031, we know that the default year defaultYear for display is the current year. The final three arguments are for the locations to display. The year header displays in id="cYearHead", the drop box displays in id="yearBox", and the actual calendar displays in id="cCalendar". If the value of the drop box is changed, the calendar will change immediately. Some screen shots of the page in action are shown in Figs. 12.21 and 12.22. Figure 12.21. ex12-19.htm
Figure 12.22. Year 2020 calendar
The function disCalendar()is added to the end of calendar.js and is listed in ex12-11.txt.
Listing: ex12-11.txt - Adding The Function disCalendar() In calendar.js
37: gl_stYear = 2000
38: gl_endYear = 2010
39: gl_disYear = 2000
40: gl_headL = ""
41: gl_boxL = ""
42: gl_calendarL = ""
43:
44: function disCalendar(stYear,endYear,disYear,headL,boxL,calendarL)
45: {
46: gl_stYear = stYear
47: gl_endYear = endYear
48: gl_headL = headL
49: gl_boxL = boxL
50: gl_calendarL = calendarL
51: gl_disYear = disYear
52:
53: showYearBox()
54: document.getElementById("gYear").selectedIndex =
55: (gl_disYear - gl_stYear)
56: showCalendar()
57: }
58:
To simplify passing variables among functions, global variables are used to implement this function. The six global variables (see lines 3742) represent the starting year gl_stYear, ending year gl_endYear, default display year gl_disYear, and various display locations. The first three variables have arbitrary initial values. The first part of this disCalendar() function is to fill up the global variables (lines 4651). The showYearBox() function in line 53 is to display the year drop box. The statements in lines 5455 set the initial value of the box. Since the selected items of the drop box start from zero, the difference in line 55 is necessary to reset the correct value. The function showCalendar() in line 56 is used to display the calendar. The coding for the showYearBox() function is shown below.
Listing: ex12-12.txt - Adding The Function showYearBox() In calendar.js
59: function showYearBox()
60: {
61: yearSt ='<select id="gYear" name="gYear" class="bSt" '+
62: 'onchange="chgYear()">'
63:
64: for (ii=gl_stYear;ii<=gl_endYear;ii++){
65: yearSt = yearSt + '<option>'+ii+'</option>'
66: }
67: yearSt = yearSt + '</select>'
68: document.getElementById(gl_boxL).innerHTML=yearSt
69: }
70:
This function displays the string yearSt of a drop box to the location gl_boxL in line 68. If the selected value of the box has changed, the chgYear()function is called in line 62. The chgYear()function displays the calendar to the location defined by the global variable gl_calendarL. The function chgYear()is listed as follows:
Listing: ex12-13.txt - Adding The Function chgYear() In calendar.js
71: function chgYear()
72: {
73: gl_disYear=(document.getElementById("gYear").selectedIndex + gl_stYear)
74: showCalendar()
75: }
76:
This function gets the selected year from the drop box. Since the selected value from the box starts from zero, you need to add the starting year to reveal the true identity of the year (line 73). When you have the selected year, you can call the function showCalendar() to show the actual calendar. The listing of the function showCalendar() is given in ex12-14.txt.
Listing: ex12-14.txt - Adding The Function showCalendar() In calendar.js
77: function showCalendar()
78: {
79: calYear = gl_disYear
80: document.getElementById(gl_headL).innerHTML=calYear
81:
82: cMonth= new Array("January","February","March","April","May","June",
83: "July","August","September","October","November","December")
84:
85: calTable = '<table class="mSt" cellspacing="15">'
86: for (ii=0;ii<=3;ii++){
87: calTable = calTable + '<tr valign="top">'
88: for (jj=0;jj<=2;jj++){
89: calTable=calTable+'<td width="250" height="210" align="center">'+
90: '<span class="hSt">'+ (cMonth[jj+ (ii*3)])+
91: '</span><div id="'+cMonth[jj+(ii*3)]+'"></div>'
92: }
93: calTable = calTable + '</tr>'
94: }
95: calTable = calTable + '</table>'
96: document.getElementById(gl_calendarL).innerHTML=calTable
97:
98: for (nn=0;nn<=11;nn++) {
99: document.getElementById(cMonth[nn]).innerHTML=getCalendar(calYear,nn)
100: }
101: }
Line 80 is to display the year value to the global header location gl_headL. The remaining part of this function is an example of a double-table (i.e., a table within a table) application. The double for-loops in lines 8694 define a 4 x 3 table to accommodate the 12 months. This string or calendar table calTable is then displayed at the location gl_calendarL in line 96. Once this table is displayed, the for-loop in lines 98100 is used to fill up each element of the table by a single-month calendar. This way you can have a full calendar (i.e., 12 months) on the screen. The array cMonth used in lines 8283 is to make the function more independent, so that this function can be taken out as a standalone function more easily. So far, we have presented a comprehensive discussion on client-side date and time functions and their applications on the Web. In practice, and in many cases, date and time are obtained from the server to reflect the true status of the Web site. Once the date and time information is obtained from the server, all the client-side techniques that we discussed can be applied. |
| Table of Contents | Previous Next |
