Author: | meijiao |
---|---|
Views Total: | 13,919 views |
Official Page: | Go to website |
Last Update: | January 4, 2017 |
License: | MIT |
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);