Drawing a Schedule in JavaScript

The Problem

I had a dynamic web page that displayed a linear calendar showing activities and events across the page, a bit like a Gantt chart. I'd done this using an HTML table, very crude but it worked. I wanted a clean-looking chart like flot or the lovely JQuery charting tools. I couldn't find what I was looking for so I've had a go at writing my own.

The Solution

My first attempt was to use the HTML 5 canvas object. I was using a Chrome browser and everything was going really well, until I tried running the code in IE, Firefox and Safari. They all failed in different ways, so after struggling for a number of days I abandoned that approach.

The next approach was to use the wz_jsGraphics.js library. This is a great utility for drawing graphics using JavaScript. It works by creating div regions, sometimes lots of tiny 1x1 pixel divs to represent curves and diagonal lines. It's surprisingly quick.

I wanted to go further though: I wanted more control over the graphic objects, so I could add event handling to the chart. I realised that my schedule would only have straight lines and rectangular shapes, and after browsing through the source code of wz_jsGraphics.js I thought I could create these myself. I've now got a simple application working as a proof of concept which I can now extend and refine.

Schedule Example

Here's a link to an example page so you can see how to add it to a page.

Here's the JavaScript source code.

The styling is controlled using a css file.