A JavaScript Calendar

As I’ve said before, Google maps are great; this time the starting point is the dragging. After quite a while using the site I started to think about what other tools could benefit from the dragging treatment.

Google maps style dragging seems to work with any tool that has the following properties:

• It would take up far more than one page
• Chopping it up into lots of pages makes life difficult

After some thought, I realised that it doesn’t matter what the tool is, the mechanism is the same:

1. Create a window on to the larger tiled space
2. Move that window around the space in response to dragging
3. If the space is too large to hold in memory then seamlessly add and remove tiles as needed

The first one to my mind was the calendar, which I decided to build. Before talking about the issues I had building a drag-able calendar, here is the demo.

Right, I trust you’ve had a good play. I’m not going to tell you exactly how I did it here because frankly you can look at the source code. What I will describe here are the few major problems I had to deal with:

• Only having a passing knowledge of JavaScript

This is my way of saying I’m sorry the code isn’t perfect. I didn’t create an event model for the calendaring system like Google maps has, mainly because I don’t really understand fully how the built in ones work.

• Expansion or contraction of tiles

This was a major headache. When you create an entry the current row expands (try it if you haven’t already) and overlaps with the one below. I couldn’t work out which one had moved until I realised that only the bottom edge moves. So if two rows overlap, it was the top one that changed and we need to move the bottom one down. Easy.

• The built in Date object

As you may have noticed from the demo, the range of dates is huge. The built in Date object doesn’t seem to be able to cope with this and still give accurate days of the week. Also, if one tries to add or remove an arbitrary number of days, weeks or months, the result is a complete mess.

Thus I wrote my own, called DateTime. The code in quite a few major places is directly copied from the SQLite date code. The interface has been written differently because I wanted an almost drop in object to replace my Date code. I’d just like to say that I think the ideas behind the date modification code (DataTime.modify()) are inspired: just being able to change the date so easily is brilliant.

I did start work on storing the entries (you’ve probably noticed they vanish on reload or zooming) but it was taking forever. It’s fair to say that I’m not really one of the world’s completer-finishers: I’m interested in fleshing out new ideas, but only to the point where I know they work. So, there you are: A JavaScript Calendar.

MattLG:

This is certainly the coolest web calendar I’ve ever seen. I’ll probably be using this on at least one of my upcoming websites :-)

One thing though. What’s it like for browser compatibility? Does it require stuff like XMLHTTPRequest? What happens on older JS browsers that don’t support that? Would it fall over nicely?

Or is that an exercise for the reader :-)