Generating Responsive Timetables In Vanilla JavaScript – Timetable.js

Category: Date & Time , Javascript | July 4, 2019
Views Total:7,348 views
Official Page:Go to website
Last Update:July 4, 2019


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);


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

You Might Be Interested In:

2 thoughts on “Generating Responsive Timetables In Vanilla JavaScript – Timetable.js

  1. Arun

    It is really good. I am novice and want to know how to plot the timetable using MySQL data through PHP code.


Leave a Reply