jQuery Ajax-enabled Month Calendar Plugin with Bootstrap - Zabuto Calendar

jQuery Ajax-enabled Month Calendar Plugin with Bootstrap - Zabuto Calendar
File Size: 61.8 KB
Views Total: 53183
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Zabuto Calendar is a jQuery calendar plugin working with twitter's bootstrap that allows you to create a monthly calendar with ajax data events support on your web page. 


  • You can add date events to the calendar by using an AJAX GET request. The response has to return a JSON encoded array of events in a specified format. Use a Bootstrap JS modal window. The information will be shown with a click on the day of the event.
  • You can add a legend to clarify the styling of the date events shown on the calendar.
  • The calendar supports these language codes: de (German), en, es (Spanish), fr (French), nl (Dutch).
  • You can add a function to the calendar to execute when the onclick event is triggered on a specific day.
  • You can alter the navigation and appearance of the calendar in several ways

Basic Usage:

1. Include the latest jQuery javascript library on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Include required Twitter's Bootstrap 3 Framework on your web page.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

3. Include jQuery Zabuto Calendar Plugin files on your web page, after jQuery library.

<script src="zabuto_calendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="zabuto_calendar.min.css">

4. Create a container where you want to place your calendar.

<div id="demo"></div>

5. Initialize the plugin.

$(document).ready(function () {

6. Default settings.

var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var settings = {
    language: false,
    year: year,
    month: month,
    show_previous: true,
    show_next: true,
    cell_border: false,
    today: false,
    show_days: true,
    weekstartson: 1,
    nav_icon: false, // object: prev: string, next: string
    data: false,
    ajax: false, // object: url: string, modal: boolean,
    legend: false, // object array, [{type: string, label: string, classname: string}]
    action: false, // function
    action_nav: false // function



  • Changes for new languages: Catalan (ca) and Serbian (sr)

v1.6.3 (2017-11-24)

  • Korean (kr) language added

v1.6.2 (2017-11-24)

  • Hebrew (he) language added

v1.6.0 (2017-11-02)

  • Removed randomized id, W3C-WAI level A compliant, changed month header style.

v1.5.1 (2017-11-02)

  • Added new languages: Chinese, Czech, Slovak. Changed Hungarian support.

v1.3.0 (2014-10-20)

  • Added support for fixed JSON event data array

v1.2.2 (2014-07-18)

  • Added (Brazilian) Portuguese language support. 

v1.2.1 (2013-11-25)

  • New setting 'classname' for legend type 'text'. Setting will be applied to the badge (if available)

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