today's timetable

March 1, 2010: Update

I'm launching a new website: SlashJob
It's been a project on the works for years now, and I'd really like to see it grow. Please take a look at it.
On SlashJob you can search for a job on several job sites at the same time. Sign in, tell it what you are looking for and where, add keywords, and each time you will log in, Slashjob will load your settings and start your customized search.

November 28, 2008: Update
First of all, I'd like to thank everyone who took the time to look at this script. Many people from all around the world, I really appreciate that.
I have one regret though, most of the people don't go to cod3.net , where I post links to web design and development related articles everyday. Give it a try, you may like it.
And now for the update in itself : I've made a tool which makes it even easier to integrate my script into your website.

This script makes it easy to add a timetable to your webpage. I wrote it for a local radio station but didn't use it yet. I think it could be useful for TV programmes too, students' schedules, or many other applications. I only provide the timetable, the rest is up to you (data coming from SQL, XML, by PHP, ASP, that's your choice). Also, I don't filter, validate or sanitize the arguments of the methods, because I think it goes beyond the boundaries of this script (it's your job, in my opinion). You can have multiple instances of it in the same page, and it is relatively small (5kb uncompressed). The html it generates is W3C valid. You can embed HTML (=> images, links...) into each event you create, and assign a function to them. It works best with numbers divisible by 0.5 (15, 30, 60, 120, ...). In Opera it displays a scrollbar at the bottom of your page, but it disappears when you resize the window... Will fix that later. It works with every browser I've tried (Opera 9.5, IE 7, Firefox 3, Chrome 0.2, Safari 3.1.2). I think it illustrates well some of the techniques I like best, like KISS and OOP. You are free to use it without my permission, but I'd like to know where I can see it in action (only for personal pride). If you want to hire me or send me some money, feel free to do so as well. And please, don't delete the first line of the files. Don't ask why ;). BTW, the images in the examples are from Wikipedia.

Examples

Example 1

Example 2

Example 3

Instructions

  1. Download the .zip file below timetable.zip
  2. Unzip it and place the Timetable folder in your server
  3. Include the CSS stylesheet into the head of your webpage
    <link rel="stylesheet" type="text/css" href="Timetable/timetable.packed.css" />
  4. Include the JavaScript script into the head of your webpage
    <script type="text/javascript" src="Timetable/timetable.packed.js"></script>
  5. Create a DIV and give it an Id

How to use it?

Tool

I've made a tool to automate everything, if you are uncomfortable with Javascript (or just lazy), you just have to copy the contents of the Preview box to your code (before the </body> tag). But, keep in mind you still have to include the .js and .css files into the head of your page (read the instructions).
Enter the details below:

id of the DIV which will contain your timetable

Event contents (ex: Lunch with Susan)

Event start (ex: 12:30)

Event duration (ex: 1:20)


Preview

Example

example.html <html>
<head>
<link rel="stylesheet" type="text/css" href="css/timetable.packed.css" />
<script type="text/javascript" src="Timetable/timetable.packed.js"></script>
</head>
<body>
<div id="mondayTable"></div>
<script type="text/javascript">
var Monday = new Timetable("mondayTable");
Monday.addEvent("French", 8, 1.3);
Monday.addEvent("Sport", 9.3, 1.3);
Monday.addEvent("Spanish", 11, 1);
Monday.addEvent("Maths", 14, 2);
Monday.addEvent("History", 16, 1);
</script>
</body>
</html>