The Zabuto Calendar jQuery Plugin lets you add a simple month calendar to your web page. It's lightweight, efficient and easy to use.

Version: v2.1.0

Basic Usage

Initialize

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

<!-- include jQuery -->
<script src="../lib/jquery/jquery.js"></script>

<!-- require the plugin files -->
<link href="../dist/zabuto_calendar.min.css" rel="stylesheet">
<script src="../dist/zabuto_calendar.min.js"></script>

<!-- define an element -->
<div id="demo-calendar-basic"></div>

<!-- initialize the plugin -->
<script>
$(document).ready(function () {
  $("#demo-calendar-basic").zabuto_calendar();
});
</script>

Styling

Bootstrap / CSS

The calendar can be easily used with Bootstrap. All you need to do is require Bootstrap and add one or more Bootstrap CSS table classes to the calendar. The plugin stylesheet contains some Bootstrap CSS overrides to make it pretty. Of course you can also add your own custom CSS classes with this setting.

classname
string
Set the CSS table class name(s).
<!-- add some CSS classes -->
<div id="demo-calendar-styled"></div>

<script>
$(document).ready(function () {
  $("#demo-calendar-styled").zabuto_calendar({
    classname: 'table table-bordered lightgrey-weekends'
  });
});
</script>

<style>
table.lightgrey-weekends tbody td:nth-child(n+6) {
  background-color: #f3f3f3;
}
</style>
All the examples below contain a Bootstrap table classname.

Appearance

You can alter the appearance of the calendar in several ways. Font Awesome was added to this page to show an alternative navigation icon example.

header_format
string
Format for the header; use [month] and [year] as placeholders.
week_starts
string
Start the week on Sunday ('sunday') or Monday ('monday').
show_days
boolean
Show (true) or hide (false) the days of the week header.
today_markup
string
Add html markup to today; use [day] as a placeholder.
navigation_markup
object
Override the 'prev' and/or 'next' html markup.
<!-- alter the apppearance -->
<div id="demo-calendar-apppearance"></div>

<script>
$(document).ready(function () {
  $("#demo-calendar-apppearance").zabuto_calendar({
    header_format: '[year] // [month]',
    week_starts: 'sunday',
    show_days: true,
    today_markup: '<span class="badge bg-primary">[day]</span>',
    navigation_markup: {
        prev: '<i class="fas fa-chevron-circle-left"></i>',
        next: '<i class="fas fa-chevron-circle-right"></i>'
      }
  });
});
</script>

Languages

Included languages

You can customize the language of the calendar by using the available translations. Just use the locale code for your language.

language
string
Set the desired language of the calendar.
<div id="demo-calendar-language"></div>
<script>
$(document).ready(function () {
  $("#demo-calendar-language").zabuto_calendar({
    language: 'nl'
  });
});
</script>
Available languages:
ar
عربى (Arabic)
az
Azerbaijani
ca
Catalan
cn
Chinese
cs
Czech
de
Deutsch (German)
en
English (default value)
es
Espanol (Spanish)
fi
Finnish
fr
Francais (French)
he
Hebrew
hu
Magyar (Hungarian)
id
Indonesian
it
Italiano (Italian)
jp
Japanese
kr
Korean
nl
Nederlands (Dutch)
no
Norwegian
pl
Polish
pt
Portugues (Portuguese)
ru
ру́сский язы́кR (Russian)
se
Svenska (Swedish)
sk
Slovak
sr
српски (Serbian)
tr
Türkçe (Turkish)
ua
Ukrainian

Custom translation

If the language you want is not available you can set it yourself during initialization. Provide a translation object with labels for months (from 1 to 12) and days of the week (from 0 to 6). Sunday is 0, Monday is 1, and so on.

translation
object
Set the custom translation.
<div id="demo-calendar-welsh"></div>
<script>
$(document).ready(function () {
  $("#demo-calendar-welsh").zabuto_calendar({
    translation: {
      "months" : {
        "1":"Ionawr",
        "2":"Chwefror",
        "3":"Mawrth",
        "4":"Ebrill",
        "5":"Mai",
        "6":"Mehefin",
        "7":"Gorffennaf",
        "8":"Awst",
        "9":"Medi",
        "10":"Hydref",
        "11":"Tachwedd",
        "12":"Rhagfyr"
      },
      "days" : {
        "0":"Sul",
        "1":"Llu",
        "2":"Maw",
        "3":"Mer",
        "4":"Iau",
        "5":"Gwe",
        "6":"Sad"
      }
    }
  });
});
</script>

Show data

You can add data to the calendar to display events on certain dates. The data has to be provided as an array of objects in the specified format.

Data format:
date
string
Date of the event (required).
classname
string
CSS class name(s) to be added to the day cell.
markup
string
Add html markup to the event day; use [day] as a placeholder. This markup replaces the today_markup if an event is set.

You can add extra properties to the data as desired. This data is available in the emitted custom zabuto:calendar:day event.

[
  {
    "date": "1999-12-31",
    "classname": "purple-event",
    "markup": "<span class=\"party\">[day]</span>",
  },
  {
    ...
  }
]

Fixed data

You can add date events to the calendar by using fixed data.

events
Array
Set the fixed event data for the calendar.
<!-- show data -->
<div id="demo-calendar-data"></div>

<script>
$(document).ready(function () {
  $("#demo-calendar-data").zabuto_calendar({
    events: [
      {
        "date": "2019-01-02",
        "classname": "event-black",
        "markup": "<div class=\"diamond\"><div class=\"diamond-day\">[day]</div></div>"
      },
      {
        "date": "2019-01-05",
        "classname": "event-colourful"
      },
      {
        "date": "2019-01-10",
        "markup": "<div class=\"badge rounded-pill bg-success\">[day]></div>"
      }
    ]
  });
});
</script>

Ajax data

Use an Ajax request to dynamically retrieve data for the specific year/month. The data provided has to be JSON in the specified format.

ajax
string | object
A string containing the URL to which the request is sent. Alternatively use a jQuery ajax settings object for more flexibility.
<!-- get ajax data -->
<div id="demo-calendar-ajax"></div>

<script>
$(document).ready(function () {
  $("#demo-calendar-ajax").zabuto_calendar({
    ajax: 'example_data.php'
  });
});
</script>

Events

The calendar emits custom events when particular operations are performed. This provides the ability to listen for these events and take action on them when they occur. The events can all be listened for by using the jQuery.on() method. The example below shows how the init event can be listened for:

$('#myCalendar').on('zabuto:calendar:init', function (event) {
    alert('Calendar init');
});
Available events:
zabuto:calendar:data
Data event - triggered when the calendar retrieved event data.
zabuto:calendar:data-fail
Data error event - triggered when the ajax data retrieval failed.
zabuto:calendar:day
Day event - triggered when a day is clicked.
zabuto:calendar:day-event
Day data event - triggered when event data for the day is available.
zabuto:calendar:destroy
Destroy event - triggered when the calendar has been destroyed.
zabuto:calendar:goto
Go-to event - triggered when the calendar's year/month is updated.
zabuto:calendar:init
Initialisation complete event.
zabuto:calendar:navigate
Navigate event - triggered by the previous/next navigation click.
zabuto:calendar:navigate-init
Navigate to initial event - triggered by double-clicking on the month/year header to go to the initial year/month.
zabuto:calendar:preRender
Pre-render event - triggered as the calendar is about to be rendered.
zabuto:calendar:reload
Reload event - triggered when the calendar's current year/month view is reloaded.
zabuto:calendar:render
Render event - triggered once the calendar has completely rendered.

The Event object contains data specific to the calendar. The following properties are available for the goto, navigate, navigate-init, reload, preRender and render events:

year
int
The year navigated to.
month
int
The month navigated to.

The zabuto:calendar:day Event contains the following properties:

element
object
The day cell as a jQuery object.
date
object
JavaScript Date object.
value
string
Formatted date string.
today
bool
Is the day the current day?
hasEvent
bool
Does the specific day have events?
eventdata
object
Event data for the specific day.
<!-- events -->
<div id="demo-calendar-event"></div>
<div id="demo-calendar-event-log"></div>

<script>
var $el = $('#demo-calendar-event');
$(document).ready(function () {
  $el.zabuto_calendar({
    classname: 'table clickable'
  });
});

<!-- listeners -->
$el.on('zabuto:calendar:init', function () {
  writeToEventLog('zabuto:calendar:init');
});

$el.on('zabuto:calendar:goto', function (e) {
  writeToEventLog('zabuto:calendar:goto' + ' year=' + e.year + ' month=' + e.month);
});

$el.on('zabuto:calendar:day', function (e) {
  var now = new Date();
  if (e.today) {
    $(e.element).css('color', 'blue');
  } else if (e.date.getTime() < now.getTime()) {
    $(e.element).css('color', 'red');
  } else {
    $(e.element).css('color', 'green');
  }
  writeToEventLog('zabuto:calendar:day' + ' date=' + e.date.toDateString() + ' value=' + e.value + ' today=' + e.today);
});

function writeToEventLog(message) { /* ... */ }
</script>

► Event Log