XHTML & CSS-compliant Use of FTLS Calendar Script via SSI

Note: This material is intended to assist LVSOnline students in the XHTML/SSI class to modify the calender.cgi script used in Week 5 so that it will be XHTML-compliant. (A link to the original author's site and the unmodified script is provided below.)

Disclaimer

The modifications in this article are subject to the following terms & conditions:

• Author: Becky Peters
• Date: December 13, 2004
• Released: "As Is" and governed by the GNU General Public License (Ver 2 or later) as published by the Free Software Foundation. No warranty is offered nor liability assumed should you implement these modifications.
• Testing: Testing was conducted on a Linux box running Apache 1.3.33 (Unix) and Perl 5.8.0; as far as I know, the original script was written in 1999 and is compliant with Perl 4 and higher.
   
  

Download the Script

Before we begin, download the calendar script from the original author's site if you have not already done so:
 
        Original Script @ ftls.org
 
Please be sure to read the README file included in the author's downloadable archive file.
 

Modifying the Script

Extract the calendar.cgi script to your local hard drive and open it in a text editor.

The script should be easily readable, a typical text document. If it is not, for instance if you used Textpad and it opened this file as 1 or 2 long lines, use a different text editor such as EditPad Pro (or the free version, EditPad Lite). Whatever you use, do not use Word or Wordpad or any other word processing program or you may get unexpected results when trying to use the script!

1. Line 1 of the script contains the path to Perl on your server. You probably will not have to change this, but it never hurts to check with your hosting provider:

   Line 1:   #! /usr/bin/perl

   Be careful not to remove the #! at the beginning of this line!
    
   
2. Scroll down to the "Necessary Variables" section of the script (line 40 or thereabouts). This is the area where you can modify the variables used in this script. For a detailed explanation of the variables here, please refer to the original README file.
   
   We'll just go ahead and make sure a couple of specific variables are set to work the way we require:

   Line 47:    $SSI = 1;

   We'll be using this script via SSI, so make sure that $SSI is set to 1 (0 = off, 1 = on);

   Line 50:    $Border = 0;

   Here we need to shut the standard table border off -- we'll use CSS to style the final results. Set the $Border variable to 0 (off).
    
   
3. The problem with older scripts is that they are usually written for HTML 4 or earlier, so are full of forbidden CAPS. We're simply going to replace any capitalized HTML tags being written by this script with lowercase letters.
    
   Ok, hang on to your hats... we're going into forbidden territory! Scroll past the warning that "Nothing Below this line needs to be altered!" to Line 91 or thereabouts, containing this line of script:

   Line 91:    $ret = "<TABLE Border=\"$Border\"><CAPTION ALIGN=\"TOP\"><B>$Month</B></CAPTION>\n<TR>";

   ...and change the applicable bits & pieces to lowercase as shown in red and remove the border attribute on the <table> tag as well as the align and bold attributes on the <caption> so that you end up with this:

   Line 91 becomes:    $ret = "<table><caption>$Month</caption>\n<tr>";

   Keep in mind that if a script contains any tags that are self-closing it is necessary to change them from > to /> to maintain XHTML compliance. While that's not necessary here, it's something you'll want to remember when you fix other scripts for the purpose of maintaining standards compliance.

   
   
4. Not too hard, right? Ok, now go through remaining lines in this script looking for the HTML coding and change it so that it is XHTML-compliant! Use the lines below and the bits & pieces in red as a guide to what you need to change :

   Line 95:    $ret .= "<th>$dy</th>";

   Line 97:    $ret .= "</tr>\n";

   Line 107:   $ret .= "<tr>";

   Line 110:   $ret .= "<td><BLINK><b>$no</b></BLINK></td>";

   Line 112:   $ret .= "<td>$no</td>";

   Line 115:   $ret .= "</tr>\n";

   Line 117:   $ret .= "</table>\n";

   
   
5. There's one other non-compliant tag that we need to get rid of -- you may have noticed it in Line 110 -- the <Blink> tags. Remove those tags so that the line looks like this:

   Line 110:   $ret .= "<td><b>$no</b></td>";

   ...and add this to the <td> tag so we can style the current date using CSS!
   

   Line 110 is now:   $ret .= "<td class=\"today\">$no</td>";

   
   
6. If you were to upload this script right now and run it, you'd find that it still won't validate -- there is an empty table row at the end of the table. To pass muster, this row needs at least one cell. Long story short, we're going to add a conditional test to the loop that creates the cells and rows containing the dates.
     
   Scroll down to Line 99, move your cursor to the end of the line and press {ENTER} to insert a new line after Line 99:

   Line  99:   foreach $line (@Result) {
   Line 100:	$line =~ s/\n//;
   Line 101:   $line =~ s/   /ccs/g;
   

   ...should now look like this:

   Line  99:   foreach $line (@Result) {
   Line 100:   
   Line 101:	$line =~ s/\n//;

   
   
7. Add this line of script to Line 100:

   Line 100:	if (($line >= 1) && ($no == "")){ #add $no value testing to solve empty row problem

   
   
8. Scroll down to Line 116, move your cursor to the end of the line and press {ENTER} to insert a new line after Line 116:

   Line 116:   $ret .= "</TR>\n";
   Line 117:	}
   Line 118:   $ret .= "</TABLE>\n";

   ...should now look like this:

   Line 116:   $ret .= "</TR>\n";
   Line 117:   
   Line 118:	}

   
   
9. Add this line of script to Line 117:

   Line 117: } #end $no value testing

   
   
10. And that's all there is to it! Save this file and close it.
     
    

Installing the Script

This is really simple. You'll need FTP software and access so you can upload the script to your site's server. Because there are so many programs out there, I'll just cover the basic process involved in installing this script on your server:

1. Upload the modified calendar.cgi script to the /public_html/cgi-bin directory (or scgi-bin, if a wrapper is being used) of your web site.
     
2. CHMOD the script you just uploaded to '755'.

   The assumption made here is that your FTP software provides you the ability to change permissions on files or that you have access to your site's files via a cPanel that offers the standard File Manager features; if not, contact your hosting provider for assistance in changing the permissions on this script.
    
   If using FTP software check out the Help file for instructions. Try right-clicking on the script's file name in the listing of files on the server... most programs have a shortcut menu with CHMOD or [Change] Permissions as one of the options.
    
   If using cPanel's File Manager drill your way through the directory structure to /public_html/cgi-bin/calendar.cgi (or scgi-bin) and click on the icon to the left of calendar.cgi. In the upper right corner, click on 'Change Permissions' and set it to 755 (tick all fields under User, tick read & execute under Group, and tick read & execute under World, then click on 'Change' to apply the new permissions).

   
   
3. And that's that! Here's a tip for the future... once you have changed permissions on a file you generally won't have to do it again if you upload a new copy of that file and overwrite the original. However, if you delete the original file on the server and upload a new copy -- or if you upload a copy called "calendar1.cgi" and rename it to "calender.cgi", overwriting the original -- you have to go through the CHMOD process again or the page calling this script will throw up an error.
    
   

Styling the Calendar

Use this line of SSI script to include this calendar in your SHTML page:

<!--#include virtual="/cgi-bin/calendar.cgi"-->

Pay special attention to the spaces in the above string... there are no spaces between '<!--#' and 'include', nor are there any spaces between 'cgi" ' and '-->'.
 

Default Style:

This is the default calendar from the script as modified in this article. In its base form, it is totally fluid (resizable).

Rather plain and boring, isn't it? That's ok... you can use CSS to style the table anyway you like!
 

Simple Styling:

In this example, I simply tossed a border around the table and applied a bit of styling to the cell holding the current date. Remember removing the <Blink> tags and adding a class named "today" to the <td> tag? Here's how you make use of it!

caption {vertical-align: top; font-weight: bold;  }

table {border: 1px solid #6d93ba; padding: 4px 6px 0px 6px;  }

td.today { font-weight: bold; color: red; text-align: center; }
 
 

text-decoration: blink;

A Styling Challenge:

That last one is still too functional looking and lacks 'jazz'. Here's one to challenge you... not only does it use more styling, it involves making another simple change to the script's variables!

Need some clues? Look carefully at this last calendar in comparison to either of the earlier versions. Then view the source of this page to see what CSS styling I used (#example3 styles). Finally, see if you can locate the variables in the script that need changing and change your script so that it generates the output in this example.

Can't figure it out? If you gave it the old college try but are floundering, you can download a modified version of this file via the link at the end of this article and compare it to your modified version of the script.

Note: Calendars styled as shown are all resizable and valid XHTML 1.0 Trans/CSS2. However, they could use some work for accessibility's sake. A topic for another day. "-)
 

Just for Fun:
 

Need more than one calendar on your page? No problem, you can have as many as you like, wherever you like and styled the way you like! In the example above, I wanted to have the current month's calendar flanked on either side by the preceding month and the coming month. Then I floated them left and reduced the font size to accomodate screen resolutions of less than 1024x768 for purposes of this particular page. Notice too that I removed borders from the calendar tables (example4 styles) -- not all calendars generated by this script will have the same number of rows and bordering the tables unbalanced the display in this case.
 

To place more than one calendar on a page, simply place the standard SSI include calling this script wherever you want a calendar to appear. Simple!
 

To display a calendar for a specific month, you add a query string to the end of the include:

<!--#include virtual="/cgi-bin/calendar2.cgi?01-2005"-->

Note that the date format is MM-YYYY; you must use a 0 before single digits!
 

Those of you who are quick studies may already have thought ahead and realize that using this version of the include means you'll have to go in each month and change the MM portion of the date on the previous/next month calendar includes. Aren't you clever! That's exactly the case. However, if you come back here next month you'll see it's not the case with this implementation. I used XSSI to test conditions and declare variables; so instead of "11-2004" my include calls "$lastMonth-$year. That's a whole 'nother article by itself, so I'll leave that for another time.

Download the Modified Script

If you have any problems making your own modifications you can dowload a copy of the modified script here:
 
        Modified Script @ stylehack.com (zip)
 
The zip file contains 2 versions of this script... calendar1.cgi (the base modified script), and calendar2.cgi (the script modified to produce the final example above). I purposely named them 1 and 2 so you would not accidentally overwrite the file you were modifying. If you choose to use one of these files in place of your own modified file, don't forget to rename it without the number at the end!

I also included copies of the original text files shipped with the script: README, COPYING and LISEZMOI. All terms/conditions in those files as assigned by the script's author also apply to this modified version.

Keep in mind that you do yourself a disservice if you skipped to this download section rather than modifying the script yourself with the help of this article. The techniques described in this article, for the most part, will stand you in good stead modifying other scripts that are not XHTML compliant due to outdated HTML coding being used.
 

Questions?

If you have any questions related to the modifications made in this article or basic CSS styling questions related to the calendar generated by these modifications, drop me a note and I'll try to help you as time permits.

If you have questions about the script itself please visit the author's site and contact him for assistance.