使用Ajax请求动态获取特定年份/月份的数据，返回JSON数据格式，非常实用。
Version: v2.1.0
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>
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.
<!-- 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.
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.
<!-- 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>
You can customize the language of the calendar by using the available translations. Just use the locale code for your language.
<div id="demo-calendar-language"></div>
<script>
$(document).ready(function () {
$("#demo-calendar-language").zabuto_calendar({
language: 'nl'
});
});
</script>
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.
<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>
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.
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>",
},
{
...
}
]
You can add date events to the calendar by using fixed data.
<!-- 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>
Use an Ajax request to dynamically retrieve data for the specific year/month. The data provided has to be JSON in the specified format.
<!-- get ajax data -->
<div id="demo-calendar-ajax"></div>
<script>
$(document).ready(function () {
$("#demo-calendar-ajax").zabuto_calendar({
ajax: 'example_data.php'
});
});
</script>
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');
});
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:
The zabuto:calendar:day Event contains the following properties:
<!-- 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