Calendario de vista de día en Vanilla JavaScript

Vista prévia

Descripción

Un calendario de vista de día JS de vainilla que le permite ver todos sus eventos por hora.

Características

• Los eventos se almacenan en una matriz de objetos con una hora de inicio y finalización
• Getcolisiones recorre en iteración los eventos y le indica qué eventos están en cada slot de 30min
• getAttributes obtiene el ancho y la posición de cada evento (las colisiones de eventos se controlan sin solapamiento)

Funcionamiento

Incluya la hoja de estilos principal y el archivo JavaScript en la Página Web.

<link href="style.css" rel="stylesheet">
<script src="script.js"></script>

Cree el HTML para el calendario de la vista de día.

<div class ="container">

<div class="timings">


<div> <span> 9:00 </span> AM </div>


<div> 9:30 </div>


<div> <span> 10:00 </span>AM </div>


<div> 10:30 </div>


<div> <span> 11:00 </span>AM </div>


<div> 11:30 </div>


<div> <span> 12:00 </span>PM </div>


<div> 12:30 </div>


<div> <span> 1:00 </span>PM </div>


<div> 1:30 </div>


<div> <span> 2:00 </span>PM </div>


<div> 2:30 </div>


<div> <span> 3:00 </span>PM </div>


<div> 3:30 </div>


<div> <span> 4:00 </span>PM </div>


<div> 4:30 </div>


<div> <span> 5:00 </span>PM </div>


<div> 5:30 </div>


<div> <span> 6:00 </span>PM </div>


<div> 6:30 </div>


<div> <span> 7:00 </span>PM </div>


<div> 7:30 </div>


<div> <span> 8:00 </span>PM </div>


<div> 8:30 </div>


<div> <span> 9:00 </span>PM </div>

</div>


<div class="days" id="events">

</div>

</div>

Crea tus propios eventos con las horas de inicio y finalización.

const events = [ {start: 30, end: 150}, {start: 540, end: 600}, {start: 560, end: 620}, {start: 610, end: 670} ];

Inserte los eventos en el calendario de la vista de día.

layOutDay(events);