Dynamic Daily Event Calendar Plugin With jQuery - Layoutday

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.