Add a month calendar to your web page using Jquery Bootstrap zabuto_calendar Plugin

by Posted on

IF you are working on some schedule management system then this calendar plugin is helpful for you display month wise calendar with highlighted events on specif date with popup description.This library is a jQuery plugin for Bootstrap that lets you add a month calendar to your web page.
You can customize the display of the calendar and view it in several languages. You are also able to show calendar events by using an AJAX request with JSON data and add a legend.
You can add a function to the calendar to execute when the onclick event is triggered on a specific day.

Calendar example



Add a month calendar to your web page.

The calendar needs jQuery, and Twitter Bootstrap to function properly. After including these libraries the plugin can be used by requiring the javascript and stylesheet file. Then view the calendar by defining a DOM-element and initializing the plugin See below steps.

Libraries

To display month wise calendar on your website you need to include jQuery, and Twitter Bootstrap libraries on page after that include zabuto_calendar plugins JS+CSS libraries.

<!--CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css"  href="zabuto_calendar.min.css">
 
<!--JS-->
<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<script src="zabuto_calendar.min.js"></script>

HTML

Add html markup where month calender will display.

<div id="monthCalendar"></div>

JS

Use this code to initialize the calendar.

<script>
    $(function() {
        $("#monthCalendar").zabuto_calendar({language: "en"});
    });
</script>



Add fixed events on your calender.

<script>
var eventData = [
  {"date":"2015-01-01","badge":false,"title":"Example 1"},
  {"date":"2015-01-02","badge":true,"title":"Example 2"}
];
$(document).ready(function () {
  $("#monthCalendar).zabuto_calendar({
    data: eventData
  });
});
</script>

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates.Don’t forget to read license for using above plugin in your commercial project.

This will display basic month wise calender on your website you can customize you calender as per your need and add more features on it.

  • language (string) Set the desired language of the calendar (ar, cn, cs, de, en, es, fi, fr, hu, id, it, jp, nl, no, pl, pt, ru, se, sk, tr, ua).
  • year (integer) Initialize the calendar in a different year than the current year.
  • month (integer) Initialize the calendar in a different month than the current month (January=1, December=12).
  • show_previous (boolean|integer) Disable the navigation to previous months completely or only allow a maximum number of months.
  • show_next (boolean|integer) Disable the navigation to next months completely or only allow a maximum number of months.
  • cell_border (boolean) Set a cell-border around the calendar itself, the days-of-week header and the individual days. Otherwise only a line is displayed.
  • today (boolean) Display today with a special badge.
  • show_days (boolean) Show the days-of-week header.
  • weekstartson (integer) Start the week on Sunday (0) or Monday (1).
  • nav_icon (object) Override ‘prev’ and/or ‘next’ icon html



Published by admin