Day View Calendar In Vanilla JavaScript

Preview:

Description:

A vanilla JS day view calendar which enables you to view all your events by the hour.

Features:

• Events are stored in an array of objects with a start and end time
• getCollisions iterates through events and tells you which events are in each 30min slot
• getAttributes gets you the width and positioning of each event (event collisions are handled with no overlap)

How to use it:

Include the core style sheet and JavaScript file on the webpage.

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

Create the html for the day view calendar.

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

Create your own events with start/end times.

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

Push the events to the day view calendar.

layOutDay(events);