Simple Responsive Availability Calendar Plugin For jQuery

File Size: 4.64 KB
Views Total: 47268
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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.


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