Calendar in JavaScript

cal.js is a Javascript program that can be called from a web page to return a calendar for one month, formatted as an HTML table, which can be inserted into the page.

Control files ending in .calin specify the layout and contents of the calendar. (They must reside in the same Web domain as the page invoking calendar(), because of same-origin security restrictions.) Control files can specify lines that precede and follow the calendar, so the resulting web page can include any other HTML items you specify, from calendar pictures to web links.

You can view the source of this page and the JavaScript file to see how it works. Your page has to have SCRIPT tags to include cal.js, and then contain a little JavaScript function to call the calendar program and cause its output to display.

This JavaScript program is derived from a PL/I program I wrote in 1980 for Multics. I have re-implemented this algorithm in Tandem TAL, Perl, Java, and JavaScript over the years. Many improvements could be made. Open source, MIT license, share and enjoy.

Example: Calling the Calendar Progran and Displaying Its Output

The file runcal.js is an example of one way to invoke calendar() on an input file and show its results. It obtains the file name from the "query string" for the web page, e.g.

  <a href="yourpage?file.calin">

to cause the control file to come from file.calin.

Control Files

Control files are plain text, consisting of lines in the following format:

* Comment
month nn Print calendar for month nn (1-12)
year nn Print calendar for year nn (e.g. 99 or 1999)
title restofline Calendar title
head restofline Any number of these, precede calendar
foot restofline Any number of these, follow calendar
mm/dd/yy text Put text in box for dd if it's mm in yy
mm/dd text Put text in box for dd if it's mm
class mm/dd cls Attach a CSS class of "cls" to the box for dd
every thursday[+1] in Nov text Put text in box for date
first thursday[+1] in Nov text Put text in box for date
second thursday[+1] in Nov textPut text in box for date
third thursday[+1] in Nov text Put text in box for date
fourth thursday[+1] in Nov textPut text in box for date
fifth thursday[+1] in Nov text Put text in box for date
last thursday[+1] in Nov text Put text in box for date
include fn Process fn as input (holidays etc)
boxwidth nn Set box width (15)
boxheight nn Set box height (4)

Control file lines that specify a date that doesn't fall in the month and year of the calendar being generated are silently ignored. The text placed in the boxes can contain HTML, such as hyperlinks. The program tries to make all boxes the same size, but they'll expand to hold the input provided if necessary, and graphics in a box will confuse the sizing.

CSS formatting

Elements of the calendar have CSS attributes specified by the page that contains the calendar. Here is an example.

.calendar {font-family: Arial,Helvetica,Sans-serif;}
.calendar H1 {text-align: center;}
.calendar H2 {text-align: center;}
.calendar .head {font-size: 80%;}
.calendar TABLE {border: 2px solid black; background: white; border-collapse: collapse;}
.calendar TABLE tr {border: 1px solid black; vertical-align: top;}
.calendar TABLE th {border: 2px solid black; background: white;}
.calendar TABLE td {border: 1px solid black; background: white;}
.calendar TABLE .headbox {background-color: pink; color: black;}
.calendar TABLE .unused {background: #cccccc;}
.calendar TABLE .col1 {background-color: #ffffcc;} /* show Sunday in pale yellow */
.calendar TABLE .col7 {background-color: #ffffcc;} /* show Saturday in pale yellow */
.calendar TABLE .daynumber {font-family: monospace; font-weight: bold; font-size: 100%;}
.calendar TABLE .boxcontent {font-size: 70%;}
.calendar .foot {font-size: 70%;}

Holidays Control File

The calendar above loaded the example control file, calinput.calin, which in turn included holidays.calin to put US holidays in appropriate boxes. The holidays file shows examples of many date formats.

* Holidays file
1/1 New Year's Day
7/4 Independence Day
12/25 Christmas day
third Monday in February (Presidents' Day)
last Monday in May Memorial Day
first Monday in September Labor Day
fourth Thursday in November Thanksgiving
fourth Thursday+1 in November Thanksgiving hol
third Monday in January (M L King Day)
second Sunday in March (Daylight Savings)
third Monday in April (Patriots' Day)
second Sunday in May (Mothers' Day)
third Sunday in June (Fathers' Day)
second Monday in October (Columbus Day)
first Sunday in November (Standard Time)
first Monday+1 in November (Election Day)
01/17 (Ben Franklin Bday)
02/02 (Ground Hog Day)
02/12 (Lincoln Bday)
02/14 (Valentine Day)
02/22 (Washington Bday)
03/17 (St Patrick's Day)
06/14 (Flag Day)
06/17 (Bunker Hill Day)
08/06 (Hiroshima)
08/09 (Count the Spoons Day)
10/31 (Halloween)
11/09 (Sadie Hawkins Day)
11/11 (Veterans' Day)

December 2016