jQuery HTML Timetable Layout

jQuery Timetable Mobile

jQuery Timetable Mobile

One of the key bits of information we need to display in the education sector are timetables.  This could be for learners, tutors or rooms.  I wrote my first HTML/Javascript Timetabling interface back in 2002 for ebs (Tribal’s further education product) which was a fairly painful mashup of HTML tables and Netscape/IE6 Javascript hacking.  It worked but the code wasn’t pretty.  The time had come to bring the HTML timetable up-to-date and once again, up steps jQuery to make life much, much easier.

Once again I’m using the Twitter Bootstrap component library to provide a nice responsive site so it will display nicely on phone and tablet devices, also catering for touch interfaces very nicely when you can’t rely on hover over text.

jQuery Timetable

jQuery Timetable

To see it out for yourself and check out the code then have a look it on our demo site.  I’ve tested it on a number of desktop browsers, iPhone/iPad, Android and Windows Phone devices successfully.

As you can see from the source the lessons/events themselves are just an <ul> (unordered list) so assistive technologies should be more than happy.

It can also print out ok if the browser is sized right but a few extra css tweaks will be needed to get that fully dialled.

Follow me on Twitter


About Ben Lowe

Ben has been involved in designing and implementing systems in the education sector specialising in facilitating complex processes, actions and data visualisations in intuitive and targeted solutions that optimise the users’ productivity and experience. Follow Ben on Twitter.
This entry was posted in Open Source, Projects, User Experience and tagged , , , , . Bookmark the permalink.
  • Jerome Di Pietro

    Very nice indeed. Are you releasing this code under any type of creative commons or GNU license, or even paid? I guess your demo can just be saved and tweaked but wanted to check your terms of reuse.

    • ben_lowe

      Hi Jerome. Thanks for your interest. All the content and code on this blog is under a Creative Commons Attribution-NonCommercial-ShareAlike 2.0 UK: England & Wales License: http://creativecommons.org/licenses/by-nc-sa/2.0/uk/
      As long as you comply with that (and ideally post a link to what you’ve used it for on here) then go for it!

  • Tim

    Looks good, but usage? Docco?