Calendar Show Data

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>