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.

You will need to use a public API account as this is a client-side call.

<head>
<script type="text/javascript" src="https://api.inzu.net/1.5/js/calendar/calendar.js?api_key=39a9a13d56112cbbcbac8259ddc4ae46">
</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.