Simple Responsive Availability Calendar Plugin For jQuery

A lightweight, responsive jQuery availability calendar plugin used to display booking availability with dates highlighted on a navigatable monthly calendar.

How to use it:

1. Load the stylesheet availability-calendar.css in the head section, and the JavaScript file availability-calendar.js at the bottom of the webpage. Be sure you first have jQuery library installed.

<link href="availability-calendar.css" rel="stylesheet">
  ...
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="availability-calendar.js"></script>

2. The plugin expects a very basic HTML markup structure inside your document.

<div id="calendar"></div>

3. Create an array of booked date ranges.

var unavailableDates = [
    {start: '2015-09-11', end: '2015-09-15'},
    {start: '2015-09-15', end: '2015-09-23'},
    {start: '2015-10-01', end: '2015-10-07'}
];

4. Initialize the plugin to render an availability calendar inside the empty container you just created.

$('#calendar').availabilityCalendar(unavailableDates);

---

This awesome jQuery plugin is developed by bendjguest. For more Advanced Usages, please check the demo page or visit the official website.