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

jQuery Ajax-enabled Month Calendar Plugin with Bootstrap - Zabuto Calendar
File Size: 57.7 KB
Views Total:
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 month calendar with ajax data events support on your web page. 

Features:

  • 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 Bootstap 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 () {
$("#demo").zabuto_calendar();
});

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
};

Change log:

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.