Timetable.js - Beautiful responsive timetables

Timetable.js is a vanilla javascript plugin for creating great responsive timetables in a blink of an eye. It provides a simple javascript interface to add events and locations. Works like a charm on desktop and mobile (swipe in the demo above, or see the full page demo). You can easily change the looks with css/sass.

Easy to use

Make a timetable object, and optionally set the scope (the visible hours in the timetable):

var timetable = new Timetable();
timetable.setScope(9, 17); // optional, only whole hours between 0 and 23

Add some locations:

timetable.addLocations(['Silent Disco', 'Nile', 'Len Room', 'Maas Room']);

Add your events using addEvent(name, location, startDate, endDate, url):

timetable.addEvent('Frankadelic', 'Nile', new Date(2015,7,17,10,45), new Date(2015,7,17,12,30));

Last, render the thing in your previously created timetable placeholder:

var renderer = new Timetable.Renderer(timetable);
renderer.draw('.timetable'); // any css selector

Getting Started

Install with bower, or alternatively download the zip:

$ bower install timetable

Load the plugin and styles in your HTML from the dist folder:

<link rel="stylesheet" href="timetablejs.css">
<script src="timetable.min.js"></script>

Add a timetable placeholder:

<div class="timetable"></div>

Changing the looks

Instead of adding the included css directly to your HTML, you could import the sass file. All colors and spacing values are defined as default variables which you can easily override.

Timetable.js has been designed to work with modern browsers (only). It has been tested with the latest version of the most common browsers.