J. Blustein

Web-centric Computing

Assignment 2: Javascript Calendar



  1. To gain experience with the basics of the following WWW technologies:
  2. To prepare for a later appointment book assignment.


Fri. 05 Jan.
Fri. 19 Jan.


Create a webpage that uses Javascript (aka JScript or ECMAScript) and XHTML tables and forms to produce a calendar for any single month between the years 1799 and 9999.

Choose one browser (Netscape version ≥ 7.1; Opera version ≥ 4; Internet Explorer version ≥ 4, for example) to implement your calendar. You must specify which browser it is designed for in the webpage. I will test your webpage with that browser.

Your Javascript program must get input from a form and using popup prompt()s. The input you need is the month and the year. Both inputs can be numeric (e.g. 2 for February).

Your calendar might be shown in a table like either of these two examples:

February 2005
Su Mo Tu We Th Fr Sa
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 18
20 21 22 23 24 25 26
27 28

Or one that looks like the calendar your syllabus:

February section of syllabus calendar

The bare-bones XHTML code for the first table is:

   <table id="cal" class="centre">
    <caption class="centre">February 2005</caption>
      <th>Su</th> <th>Mo</th> <th>Tu</th> <th>We</th>
      <th>Th</th> <th>Fr</th> <th>Sa</th>
      <td></td>   <td></td>   <td> 1</td> <td> 2</td>
      <td> 3</td> <td> 4</td> <td> 5</td>
      <td> 6</td> <td> 7</td> <td> 8</td> <td> 9</td>
      <td>10</td> <td>11</td> <td>12</td>
      <td>13</td> <td>14</td> <td>15</td> <td>16</td>
      <td>17</td> <td>18</td> <td>18</td>
      <td>20</td> <td>21</td> <td>22</td> <td>23</td>
      <td>24</td> <td>25</td> <td>26</td>
      <td>27</td> <td>28</td> 

Obviously, the calendar can be made with nested counting loops. Each week has seven days and it is easy to determine the number of days in a month. If we know the weekday that the first day of the month begins on then it is trivial to create the calendar. You may get the first weekday from the user or use Zeller's algorithm to determine the day the month begins on. Remember also that February sometimes has 28 days and sometimes 29 days.

Of course, your table will include axis or other markup to make it more accessible. Your assignment must conform to level 2 (AA) of the WAI. For examples of good table markup you should see the HTML 4.01 standard (especially section 11.4: Table rendering by non-visual user agents) and my schedule.


Tips & Suggestions


The criteria given above are the baseline (B flat) for the assignment. Anything you do on top of those will increase your overall points for this assignment such as using CSS to display appointments when a date is selected, error handling, leap year and automated date calculations.

Submission Instructions

  1. I will be checking the files from your home directory on your server, but you will need to turn-in a copy for the record too. You will use the submit program for that official copy.
  2. You will be submitting an entire directory of files electronically.
  3. The files you submit must all be in a directory named 2-cal.
  4. Your webpage must be named 2-cal.html.
  5. You may name the other files whatever you like.
  6. Be sure that your name and student number are in all program source code files and XHTML pages.
  7. Be sure that your webpage clearly says which browser and version it is intended for. If the marker doesn't know which browser to use and your program doesn't work on the browser he/she chooses then your program does not work and you will lose many marks.
  8. turn in all the files in your 2-cal directory using the /opt/bin/submit program on torch.
    1. Before you run the program, make sure that your current directory is the parent of the directory you will be submitting. For example, if your assignment is in your ~/cs4173/2-cal/ directory then use cd to make ~/cs4173 your current directory before you run submit.
    2. When submit prompts you for a file or directory name, input 2-cal.

06 January 2007
CS 4173 Prof.:
J. Blustein <jamie@cs.dal.ca>
Valid XHTML 1.0!
This webpage uses valid cascading style sheets