You can add date events to the calendar by using fixed data or an AJAX GET request. The events have to be returned as a JSON encoded array in a specified format.
Details of an event can be shown with a modal window.
Fixed data example:
| data | array [ | |||
|---|---|---|---|---|
| object | { ... } | See the JSON data format example | ||
| ] | ||||
AJAX example:
| ajax | object { | |||
|---|---|---|---|---|
| url | string | URL to the JSON date event information. | ||
} |
modal | boolean | Use a Bootstap JS modal window. The information will be shown with a click on the day of the event. | |
Below you can find an example of the JSON data format:
[
{
"date":"1999-12-31",
"badge":true,
"title":"Tonight",
"body":"<p class=\"lead\">Party<\/p><p>Like it's 1999.<\/p>",
"footer":"At Paisley Park",
"classname":"purple-event"
},
{
"date":"2000-01-01",
...
}
]
<!-- show date events with a modal window -->
<script type="application/javascript">
$(document).ready(function () {
$("#my-calendar").zabuto_calendar({
ajax: {
url: "show_data.php",
modal: true
}
});
});
</script>
<!-- use fixed data -->
<script type="application/javascript">
var eventData = [
{"date":"2015-01-01","badge":false,"title":"Example 1"},
{"date":"2015-01-02","badge":true,"title":"Example 2"}
];
$(document).ready(function () {
$("#my-calendar").zabuto_calendar({
data: eventData
});
});
</script>