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 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.
<?php
$calendar = INZU_GET("js/calendar", array("venue_id"=>165, "month_auto"=>"true"), "raw");
?>
The optional 'month_auto' parameter tells the calendar to display the next month that has availability.
<head>
<script type="text/javascript" >
<?php echo $calendar; ?>
</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.
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.