Generating Responsive Timetables In Vanilla JavaScript – Timetable.js

Category: Date & Time , Javascript | July 4, 2019
Author: Grible
Views Total: 5,660 views
Official Page: Go to website
Last Update: July 4, 2019
License: MIT

Preview:

Generating Responsive Timetables In Vanilla JavaScript – Timetable.js

Description:

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

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.

    Reply

Leave a Reply