CS1301 Introduction To Computer Programming (08-09 Semester B)
www.cs.cityu.edu.hk/~helena
PAGE 1 OF 3
WEEK 9 TUTORIAL
Monthly Calendar
More practices on control structures, Dynamic creation of html table contents Date object and methods
In this tutorial, you will create a Monthly Calendar like:
Figure 1 Preparation: Download the given html file. The body contains only a header and an empty span:
Monthly Calendar
Step 1. [ We first ASSUME that the month starts on Sunday and has 31 days !!! ] Modify the code to display a row of 31 day numbers in a table, within the days span (See Figure 2). Note - Write a function named showCalendar( ), that sets the html contents of the span. Call this function during onload of the page body. - In showCalendar( ), the 31 cells should be generated using a while-loop. (i) Before and after the while-loop, add
. (ii) In the loop, if the day is 1 or 31 (ie. row start/end), add
and
correspondingly. (iii) The days are in the form:
1 | 2 | 3 | …
Figure 2 Step 2. Split the table into rows (see figure 3). Note: In showCalendar( ), add var x; that stands for Sun - Sat : x = 0, 1, 2, .. 6
Sunday Saturday
(i) Handle the value of x : … x=0; // Assume first day is Sun while (..) { … At the end of each round, update x to x=..; prepare for next round: } Add 1 to x, if x becomes 7, reset x to 0,
(Shortcut: use %)
(ii) With the value of x, it is easy to split the table into rows:
and
st
Start a row (Just before showing a Sunday)
End of row (after a Saturday or 31 day)
Figure 3
CS1301 Introduction To Computer Programming (08-09 Semester B)
www.cs.cityu.edu.hk/~helena
PAGE 2 OF 3
Step 3. Make Sundays red and bold (see figure 3). Note: Use if-else statement to generate different html code for the cells: check the value of x.
Step 4. Ask the user to tell the number of days in the month (28, 29, 30, or 31):
Figure 4 Note: Add a variable, totDays, in showCalendar( ) and call the prompt dialog to get its value: var totDays=parseInt(prompt("What is the total number of days in the month?",31)); Change the condition of the while-loop to check totDays.
Step 5. Ask the user to tell the weekday of the first day as shown in figure 5.
Figure 5 Note: Add a variable, startWeekDay, in showCalendar( ) and call the prompt dialog to get its value: var startWeekDay=parseInt(prompt("What is the weekday of the first day? \n(0: Sun, 1: Mon, etc..)",0));
Given Code
Add the createBlankCells(n) function (Figure 6) to your file. This function generates HTML code for n blank cells. We will use it to make the starting blank cells in the calendar: Consider Figure 5: if startWeekDay is 4 (Thur), then there should be 4 blank cells in first row. See? startWeekDay can determine the starting blank cells!! So, in showCalendar( ), just before showing the first day of the month, you can add ..+=createBlankCells(startWeekDay) to create and add the HTML code (blank cells) to the calendar. Also, before the while-loop, the value of x should be set to startWeekDay, not 0. (Review the code and check whatever else is to be modified.)
//Create a number of blank cells //based on the argument n function createBlankCells(n) { var i=0; var result=""; while (i