Generando horarios responsivos en Vanilla JavaScript-calendario. js

Vista prévia

Descripción

Calendario. js es un plugin de JavaScript diminuta vainilla que se utiliza para mostrar sus eventos programados en un cronograma horizontal y receptivo.

Funcionamiento

Ponga el timetablejs. CSS en la sección Head para los estilos primarios.

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

Cree un elemento vacío que servirá como contenedor para su horario.

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

Pon el calendario. min. js en la parte inferior de tu página web.

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

Agregar eventos programados al calendario.

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), '#');

Represente un cronograma dentro del contenedor vacío que acaba de crear.

var renderer = new Timetable.Renderer(timetable);



renderer.draw('.timetable');

Registro de cambios

v0.8.0 (07/20/2018)

• se agregó compatibilidad para el encabezado Sticky: el indicador de tiempo se desplaza a lo largo de cuando el horario es mayor que la ventanilla
• convertido los estilos flotantes restantes a Flexbox