Generating Responsive Timetables In Vanilla JavaScript – Timetable.js

Timetable.js is a tiny vanilla javascript plugin used to display your scheduled events in a responsive, horizontal timetable.

How to use it:

Put the timetablejs.css in the head section for primary styles.

<link rel="stylesheet" href="styles/timetablejs.css">

Create an empty element that will serve as the container for your timetable.

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

Put the timetable.min.js at the bottom of your web page.

<script src="scripts/timetable.min.js"></script>

Add scheduled events to the timetable.

var timetable = new Timetable();
timetable.addLocations(['Rotterdam', 'Madrid', 'London', 'New York', 'Los Angeles', 'Jakarta', 'Tokyo']);
timetable.addEvent('Sightseeing', 'Rotterdam', new Date(2015,7,17,10,45), new Date(2015,7,17,12,30), '#');
timetable.addEvent('Zumba', 'Madrid', new Date(2015,7,17,12), new Date(2015,7,17,13), '#');
timetable.addEvent('Zumbu', 'Madrid', new Date(2015,7,17,13,30), new Date(2015,7,17,15), '#');
timetable.addEvent('Hackathon', 'Tokyo', new Date(2015,7,17,11,30), new Date(2015,7,17,20), '#');
timetable.addEvent('Tokyo Hackathon Livestream', 'Los Angeles', new Date(2015,7,17,12,0), new Date(2015,7,17,16), '#');
timetable.addEvent('Lunch', 'Jakarta', new Date(2015,7,17,9,30), new Date(2015,7,17,11), '#');

Render a timetable within the empty container you just created.

var renderer = new Timetable.Renderer(timetable);
      renderer.draw('.timetable');

Changelog:

v0.8.3 (07/04/2019)

• Bugfix

v0.8.0 (07/20/2018)

• added support for sticky header: time indicator scrolling along when the timetable is larger than the viewport
• converted remaining floating styles to flexbox