Day view calendar is a JS vanilla day view calendar that enables you to view all your events by the hour.

css grid calendar day view, task calendar javascript, simple javascript calendar with events, daily schedule javascript, event calendar using javascript

Features:

• Built with Vanilla JavaScript, HTML, and CSS.
• Events are stored in an array of elements with start and end times.
• get collisions iterates events and tells you which events are in each 30-minute slot.
• getAttributes gets the width and position of each event (event collisions are handled without overlap).

Vue Material Style Monthly Calendar View Plugin Library

How to make use of it:

1. Include the basic style sheet and JavaScript file on the web page.

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

2. Create the HTML for today’s 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>

3. 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} ];

4. Push events to the day view calendar.

layOutDay(events);

Day View Calendar Plugin/Github, full year calendar javascript, javascript weekly calendar

See Demo And Download

Official Website(meijiao): Click Here

This superior jQuery/javascript plugin is developed by meijiao. For extra Advanced Usage, please go to the official website.