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.