2023-11-08
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.
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 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 text | Put text in box for date |
| third thursday[+1] in Nov text | Put text in box for date |
| fourth thursday[+1] in Nov text | Put 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.
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%;} |
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