Availability calendar

The previous page explained how to embed a Javascript calendar on your web page using the Inzu API. We will now look at including availability information on that calendar, so customers can book tickets for the correct available dates.

Getting the data

Now we add the 'venue_id' parameter to the call as used on the previous page. Including this will add availability data and ticket variations data to your calendar. You can access the 'venue_id' from the venue feed or from the 'link' page for your venue.

The optional 'month_auto' parameter tells the calendar to display the next month that has availability.

<head>
<script type="text/javascript" src="https://api.inzu.net/1.5/js/calendar/calendar.js?api_key=39a9a13d56112cbbcbac8259ddc4ae46&api_pass=!HDq36P+0-Si90f+VmwT5WFklJdTwIGu&id=165&month_auto=true"></script>
</head>

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>

Here we see the calendar with available days highlighted.

Choosing tickets

Now we have available dates showing, but we want to be able to select a date then buy tickets for that date.

At this stage you can create your own form styled in any way you choose, or just use the files we have provided in this demo pack to get you going.

It is possible to adapt the Javascript code from the Inzu API to create your own events driven by user interaction with the calendar, creating a dynamic form is just one application of this functionality.


Tickets Quantity Price
Total: $0.00
Please select a date from the calendar... $0.00

The form above is included in the demo pack - if you click on a highlighted date from the calendar you will see the available tickets (and their variations) for that date.

Creating a transaction

Once a user has selected tickets all you need to do is send Inzu the purchase information.

This example below in PHP shows how to create the right forwarding URL to the Inzu checkout pages.

<?php
$sale = "";
$booking_date = preg_replace("/[^0-9-]/", "", $_POST['booking_date']);
$variations = preg_replace("/[^0-9,]/", "", $_POST['variations']);
$variations = explode(",", $variations);
foreach ($variations as $key => $var) {
$amt = preg_replace("/[^0-9.]/", "", @$_POST['amount_'.$var]);
if ( $amt > 0 ) $sale.= $var."_".$amt."=";
$amt = 0;
}
$date = date("U");
header("Location: https://payments.inzu.net/booking?u=02c4e87c154b34b5b06be242a36d54dd&id=165&sale=$sale&date=$booking_date&calendar=hide&callback=http://www.mysite.com/callback.php");
?>

The URL passed to the Inzu checkout pages has a number of parameters:

User

u=1ffa420ebd31c45d5b7d073cdb011be2

Your accounts public ID.

ID Parameter

id=165

An integer corresponding to the venue ID.

Sale Parameter

sale=567_3

The 'sale' parameter is a two-part string. Before the underscore is the variation number, after the underscore the quantity of that ticket type selected for purchase by the user.

Date Parameter

date=$booking_date

The date parameter represents the date selected by the user.

Calendar Parameter

calendar=hide

If not set to "hide" a calendar for picking a date/ticket will shown on the Inzu checkout pages.

Callback Parameter

&callback=https://www.inzu.net

The callback parameter allows you to set a website address for your customers to return to when the transaction has been completed.

Full customization

The example on this page uses the files included in the demo pack but the way you create your forms is up to you. The way the calendar behaves is also adaptable by extending prototypes of the INZU_calendar object.

An explanation of the prototype extension used in the demo can be found on this page.