Dynamic Daily Event Calendar Plugin With jQuery - Layoutday
File Size: | 28.1 KB |
---|---|
Views Total: | 13379 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Layoutday is a simple, lightweight jQuery Daily Event Calendar plugin that you can dynamically add as many events onto a daily schedule.
How to use it:
1. Download the jQuery Layoutday plugin's files and add them to your page. Make sure that jQuery is loaded.
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="jquery-layoutday.js"></script> <link rel="stylesheet" href="jquery-layoutday.css">
2. Create the html for the daily schedule.
<div id="calendar"></div> <div class="time"> <ul> <li>9:00 <span>AM</span></li> <li class="halfhour">9:30</li> <li>10:00 <span>AM</span></li> <li class="halfhour">10:30</li> <li>11:00 <span>AM</span></li> <li class="halfhour">11:30</li> <li>12:00 <span>PM</span></li> <li class="halfhour">12:30</li> <li>1:00 <span>PM</span></li> <li class="halfhour">1:30</li> <li>2:00 <span>PM</span></li> <li class="halfhour">2:30</li> <li>3:00 <span>PM</span></li> <li class="halfhour">3:30</li> <li>4:00 <span>PM</span></li> <li class="halfhour">4:30</li> <li>5:00 <span>PM</span></li> <li class="halfhour">5:30</li> <li>6:00 <span>PM</span></li> <li class="halfhour">6:30</li> <li>7:00 <span>PM</span></li> <li class="halfhour">7:30</li> <li>8:00 <span>PM</span></li> <li class="halfhour">8:30</li> <li>9:00 <span>PM</span></li> </ul> </div>
3. Initialize the Daily Event Calendar with default options.
$('#calendar').layOutDay();
4. Add your own events as these:
myEvents = { dateStart: new Date(/* year */ 2017, /* month */ 01, /* day */ 09, /* hour */ 18, /* minute */ 30, /* senconds */ 10, /* milliseconds */ 10), dateEnd: new Date(/* year */ 2017, /* month */ 01, /* day */ 09, /* hour */ 19, /* minute */ 30, /* senconds */ 10, /* milliseconds */ 10), title: "title", description: "description" } // or var myEvents = [ {start: 30, end: 150}, // start and end are the minutes from midnight {start: 540, end: 600}, // start and end go from calendar_start to calendar_end {start: 560, end: 620}, {start: 610, end: 670} ]; // add events to the calendar $('#calendar').addEvents(myEvents)
5. Available options to customize the Daily Event Calendar.
$('#calendar').layOutDay({ calendar_width: null, calendar_height: null, calendar_start: 0, calendar_end: 1440, events_selector: ".events", time_selector: null });
This awesome jQuery plugin is developed by albertocolella. For more Advanced Usages, please check the demo page or visit the official website.