Zabuto Calendar - suthikiet076/ASP.NET-jQueryLibrary GitHub Wiki

#Zabuto Calendar

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.

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.

<!-- include jQuery / Bootstrap -->
...

<!-- include the calendar js and css files -->
<script src="../zabuto_calendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="../zabuto_calendar.min.css">

<!-- define the calendar element -->
<div id="my-calendar"></div>

<!-- initialize the calendar on ready -->
<script type="application/javascript">
    $(document).ready(function () {
        $("#my-calendar").zabuto_calendar();
    });
</script>

###Calendar Language Settings

The calendar supports these language codes:

de Deutsch (German)

nl Nederlands (Dutch)

en English [default value]

pt Portugues (Portuguese)

es Espanol (Spanish)

ru ру́сский язы́кR (Russian)

fr Francais (French)

se Svenska (Swedish)

it Italiano (Italian)

tr Türkçe (Turkish)

 <!-- set the language code -->
    <script type="application/javascript">
    $(document).ready(function () {
    $("#my-calendar").zabuto_calendar({
    language: "nl"
    });
    });
    </script>

###Calendar Navigation Settings

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.

<!-- set the calendar to March 2015
     do not allow previous months and only
     allow 2 months in the future -->
<script type="application/javascript">
  $(document).ready(function () {
    $("#my-calendar").zabuto_calendar({
      year: 2015,
      month: 3,
      show_previous: false,
      show_next: 2
    });
  });
</script>

###Calendar Display Settings

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

<!-- set the border for the days and hide the days of the week header
     plus start the week on sunday and not monday -->
<script type="application/javascript">
  $(document).ready(function () {
    $("#my-calendar").zabuto_calendar({
      cell_border: true,
      today: true,
      show_days: false,
      weekstartson: 0,
      nav_icon: {
        prev: '<i class="fa fa-chevron-circle-left"></i>',
        next: '<i class="fa fa-chevron-circle-right"></i>'
      }
    });
  });
</script>

Donwload here

More Information : here

⚠️ **GitHub.com Fallback** ⚠️