Author: | Grible |
---|---|
Views Total: | 7,171 views |
Official Page: | Go to website |
Last Update: | July 4, 2019 |
License: | MIT |
Preview:

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
It is really good. I am novice and want to know how to plot the timetable using MySQL data through PHP code.
how can i use multiple time table