calendar.js
Calendar.js is a general purpose Javascript calendar with built-in functionality for ticket / appointment purchases.
Calling the widget
To add a calendar to the page simply load the data retrieved from the Inzu API directly to the HTML head tag.
<?php
$calendar = INZU_GET("js/calendar", NULL, "raw");
?>
Setting the 3rd parameter to "raw" prevents data conversion to JSON.
<head>
<script type="text/javascript" >
<?php echo $calendar; ?>
</script>
</head>
Then create a new instance of the calendar.
<script type="text/javascript">
var calendar = new INZU_calendar({
'targetElem':'calendar',
'forward_btn':'img/month_fwd.png',
'backward_btn':'img/month_bwd.png'
});
</script>
The required parameters for the calendar object are as follows:
targetElem
The ID of you HTML element where the calendar will be loaded.
forward_btn
The image path for your custom button to move the calendar forward a month.
backward_btn
The image path for your custom button to move the calendar backward a month.
Styling the calendar
The calendar widget will generate HTML code which can be styled how you like, using a CSS file on your server.
Above is a version of the calendar using the default CSS styles which you can download as a starting point here.
Adding availability data
If you are using the calendar for a booking system, you'll also need to retrieve information from the API about your venue / event availability and variation types.
Click here for instructions on adding availability data to your calendar.