date_selector.js

Date selector is a general purpose Javascript calendar with built-in functionality for ticket buying.

Calling the widget

To add a date selector to the page simply load the data retrieved from the Inzu API directly to the HTML head tag.

<head>
<script type="text/javascript" src="http://api.inzu.net/1.5/js/calendar/date_selector.js?api_key=39a9a13d56112cbbcbac8259ddc4ae46">
</script>
</head>

Then create a new instance of the calendar anywhere in the body of the HTML page.

<script type="text/javascript">
var mySelector = new INZU_dateSelector({
'targetElem':'dateSelect',
'forward_btn':'img/month_fwd.png',
'backward_btn':'img/month_bwd.png',
'this_month':'hide'
});
</script>

The default parameters for the date selector object are as follows:

targetElem
The ID of you HTML element where the date selector will be loaded e.g <div id="dateSelect"></div>

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.

this_month
If this_month is set to 'hide' no button will be shown, otherwise set the image path for a button to return the user to the current month.

Styling the date selector

The date selector 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 or events availability and ticket types.

Click here for instructions on adding availability data to your calendar.