Part 3: A Sample Web Page For Bookings

This is the third part of a three part series on how to embed a Google Calendar into a web page and use it to accept online bookings/appointments from other online users.

The Series:

1. Part 1: Setting up Google Calendar
2. Part 2: OAuth2 and Configuring Your ‘Application’ With Google
3. Part 3: A Sample Web Page For Bookings <- You Are Here

Recap

So, I’ve gone through adding a calendar to your webpage to display to your users, and then creating your application with Google so that you can do queries against your calendar. Now we get to the fun part, writing the application! I should mention that this is written in PHP, because I don’t know if I mentioned that specifically yet.

The Plan

The plan is to create a PHP script that will display a list of calendars people can book items on, and then allow them to book off time on one of these calendars. We will also include some restrictions, like not booking over other events, not booking in the past, only allowing bookings so far into the future, and not allowing bookings during ‘closed’ times. You can add more restrictions as you see fit.

In my example, the script is hosted behind some password protection and user accounts. Depending on the nature of your application, that may or may not be required. For this example, I’m going to assume it is an open system.

The API

Google provides a series of classes that you can use to interface with their API. However, I could not figure out how to use them with refresh tokens. If you intend to use a lot of the functions of the API, it might be worth while for you to get it working. However, for me, it was easier to make raw calls to the API since I’m only using 2 of the API functions. If you want to download all of the Google code for PHP, you can find the directions here.

Getting Started

The Google API is based on REST principles, and uses JSON to encode data. To know exactly what to send to the API, I played around with the Google API explorer. To make a long story short, I’ll include the code I used for my calls.

The Functions Needed

As we are not using the Google code, we will need to create some functions to do our bidding. We need a function to manage our authentication tokens, to submit post requests (to add events), to submit get requests (to check for previous bookings), and to craft our JSON request for the POST.

Auth Function

function getAccessToken(){
	$tokenURL = 'https://accounts.google.com/o/oauth2/token';
	$postData = array(
		'client_secret'=>'############',
		'grant_type'=>'refresh_token',
		'refresh_token'=>'###############',
		'client_id'=>'#############.apps.googleusercontent.com'
	);
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, $tokenURL);
	curl_setopt($ch, CURLOPT_POST, 1);
	curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

	$tokenReturn = curl_exec($ch);
	$token = json_decode($tokenReturn);
	//var_dump($tokenReturn);
	$accessToken = $token->access_token;
	return $accessToken;
}

You will need to add your values for client_id, refresh_token and client_secret that you established in Part 2 of this tutorial. This function is pretty stand alone. The only thing you might want to add to your finished product is better token management. I generate a new token every time. It would be best to check the token before regenerating, as tokens tend to be good for 3600 seconds.

Format JSON For Post

function createPostArgsJSON($date,$starttime,$endtime,$title){
	$arg_list = func_get_args();
	foreach($arg_list as $key => $arg){
		$arg_list[$key] = urlencode($arg);
	}
	$postargs = <<<JSON
{
 "start": {
  "dateTime": "{$date}T{$starttime}:00.000-03:30"
 },
 "end": {
  "dateTime": "{$date}T{$endtime}:00.000-03:30"
 },
 "summary": "$title",
 "description": "$title"
}
JSON;
	return $postargs;
}

This function creates the body of the our post request. What you include depends on what you are storing in the event. I only need the start and end time, and a title for the event. Check out the API explorer to see what you can do.

The date is YYYY-MM-DD format, and times are passed to the function in HH:mm format. I then pad the string with the seconds and timezone.

Odds and Ends

The rest of my functions depend on these odds and ends I set up before I start doing stuff, so I’ll cover them here.

$thecal = 'court1';
if(isset($_GET['cal'])){
	$thecal = addslashes($_GET['cal']);
}

/*
 * Advance is the amount of time in the future someone can book something.
 * days
 * weeks
 * months
 * If it is 0, it will allow unlimited future booking
 */
$courts = array(
	'court1' => array('cid' => 'court1', 'name' => 'Court 1', 'id' => '###########@group.calendar.google.com', 'starttime' => '08:00:00', 'endtime' => '23:00:00', 'advance' => '1 week'),
	'court2' => array('cid' => 'court2', 'name' => 'Court 2', 'id' => '###########@group.calendar.google.com', 'starttime' => '08:00:00', 'endtime' => '23:00:00', 'advance' => '1 week'),
);

$APIKEY = '###################';

This script expects a URL parameter to tell it which calendar to load. I first set it if nothing is specified. Then I set up the calendars. I’m using this for tennis court bookings, hence my naming conventions. The keys here are:

• The array index/cid – This is the url parameter you will pass to the page to load the correct calendar.
• name – The nice name you will display to users.
• id – This is your calendar id from Google that you set up in Part 1.
• starttime/endtime – The limits in booking times specified in HH:mm:ss
• advance – This is the amount of time in the future that you allow bookings. PHPs strtotime syntax is used for defining the future time.

The API key is the key from Part 2.

Function For Get Requests

function sendGetRequest($token,$request){
	global $APIKEY;

	$session = curl_init($request);

	// Tell curl to use HTTP POST
	curl_setopt ($session, CURLOPT_HTTPGET, true);
	// Tell curl not to return headers, but do return the response
	curl_setopt($session, CURLOPT_HEADER, false);
	curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($session, CURLINFO_HEADER_OUT, false);
	curl_setopt($session, CURLOPT_HTTPHEADER, array('Authorization:  Bearer ' . $token,'X-JavaScript-User-Agent:  Mount Pearl Tennis Club Bookings'));

	$response = curl_exec($session);

	curl_close($session);
	return $response;
}

This function preforms a get request. You need to pass into it the request you want to make, as well as a valid auth token to complete the request. The function returns the response from the server.

Function For Post Requests

function sendPostRequest($postargs,$token, $cal){
	global $APIKEY;
	$request = 'https://www.googleapis.com/calendar/v3/calendars/' . $cal . '/events?pp=1&key=' . $APIKEY;

	$session = curl_init($request);

	// Tell curl to use HTTP POST
	curl_setopt ($session, CURLOPT_POST, true);
	// Tell curl that this is the body of the POST
	curl_setopt ($session, CURLOPT_POSTFIELDS, $postargs);
	// Tell curl not to return headers, but do return the response
	curl_setopt($session, CURLOPT_HEADER, false);
	curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
	//curl_setopt($session, CURLOPT_VERBOSE, true);
	curl_setopt($session, CURLINFO_HEADER_OUT, true);
	curl_setopt($session, CURLOPT_HTTPHEADER, array('Content-Type:  application/json','Authorization:  Bearer ' . $token,'X-JavaScript-User-Agent:  Mount Pearl Tennis Club Bookings'));

	$response = curl_exec($session);

	curl_close($session);
	return $response;
}

This function accepts your post arguments that were created in another function, your valid auth token, as well as the calendar you want to post too.

It returns the result from the API.

Function To Test If Booked Already

function isTimeBooked($date,$starttime,$endtime,$cal){
	global $APIKEY;
	$start = $date . 'T' . $starttime . ':00-03%3A30';
	$end = $date . 'T' . $endtime . ':00-03%3A30';
	$token = getAccessToken();
	$result = sendGetRequest($token, 'https://www.googleapis.com/calendar/v3/calendars/' . $cal . '/events?timeMax=' . $end . '&timeMin=' . $start . '&fields=items(end%2Cstart%2Csummary)&pp=1&key=' . $APIKEY);
	if(strlen($result) > 5){
		return true;
	}
	else{
		return false;
	}
}

This function accepts the date, starttime, endtime and calendar id. It does a check to see if any event exists for this time on the calendar already. It uses the get request function to get it’s result. If the result is more than 5 characters return true, telling us that the time is used, but if it is less then 5, then there are no events, so return false.

HTML Code For Page

<html>
<head>

</head>
<body>

<div class="courtlist">
<?php
	foreach($courts as $court){
		echo '<a href="calbook.php?cal=' . $court['cid'] . '">' . $court['name'] . '</a> | ';
	}
?>
</div>

<?php
	if(strlen($message) > 1){
		echo '<div class="message">';
		echo $message;
		echo '</div>';
	}
?>

<iframe src="https://www.google.com/calendar/embed?mode=WEEK&amp;showTitle=1&amp;showCalendars=0&amp;height=1000&amp;wkst=2&amp;bgcolor=%23FFFFFF&amp;src=<?php echo $courts[$thecal]['id']; ?>&amp;color=%232952A3&amp;ctz=America%2FSt_Johns" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no" id="califrame" onload="document.getElementById('califrame').contentWindow.scrollTo(0,document.getElementById('califrame').contentWindow.document.body.scrollHeight)"></iframe>
<h2>Book a Court</h2>
<form action="calbook.php?cal=<?php echo $thecal; ?>" method="post" name="booking">
	<input type="hidden" readonly="true" value="<?php echo $thecal; ?>" name="calendar"></input>
	Court: <input type="text" readonly="true" value="<?php echo $courts[$thecal]['name']; ?>" name="calendarname"></input><br />
	Title of Booking: <input type="text" value="Booking for ...." name="title"></input><br />
	Date: <input type="text" value="<?php echo date('Y-m-d'); ?>" id="startdate" name="startdate"></input><br />
	Start Time: <input type="text" value="" id="starttime" name="starttime"></input><br />
	End Time: <input type="text" value="" id="endtime" name="endtime"></input><br />
	<input type="submit" name="submit" value="Book Court"></input>
</form>
</body>
</html>

This code prints out a list of calendars from our array, and links to them.

Then it prints out a message if one is set.

Then we use the Google iframe code from Part 1 to display a calendar.

Then we create a form to accept input from our users. Using a nice date/time picker would make things easier on the user. The forms posts back to itself, but you could separate much of this code into different files.

PHP Code To Handle Booking

So now that we have all of the pieces in place, we can create the code that will accept the input from the users.

$message = "";

if(isset($_POST['submit']) && $_POST['submit'] == 'Book Court'){
	/*
	 * Check to see if everything was filled out properly.
	 */
	if(date('Ymd') > date('Ymd',strtotime($_POST['startdate']))){
		$message = 'You cannot make a booking in the past.  Please check your date.';
	}
	elseif($_POST['starttime'] == ''){
		$message = 'You must enter a start time.';
	}
	elseif($_POST['endtime'] == ''){
		$message = 'You must enter an end time.';
	}
	/*
	 * Check to see if booking is available for this time.
	 */
	elseif(date('Hms', strtotime($_POST['starttime'] . ':00')) < date('Hms', strtotime($courts[$_POST['calendar']]['starttime'])) || date('Hms', strtotime($_POST['endtime'] . ':00')) > date('Hms', strtotime($courts[$_POST['calendar']]['endtime']))){
		$message = 'Booking not available during this time.  Please select another time.';
	}
	/*
	 * Check to see if we are alowed to book this far in advance.
	 */
	elseif(date('Ymd',strtotime($_POST['startdate'])) > date('Ymd',strtotime('+' . $courts[$_POST['calendar']]['advance'],strtotime($_POST['startdate'])))){
		$message = 'You cannot book that far into the future.  You can only book ' . $courts[$_POST['calendar']]['advance'] . ' in the future.  Please try again.';
		//$message .= date('Ymd',strtotime($_POST['startdate'])) . ' > ' . date('Ymd',strtotime('+' . $courts[$_POST['calendar']]['advance'],strtotime($_POST['startdate'])));
	}
	/*
	 * Check and see if a booking already exists.
	 */
	elseif(isTimeBooked($_POST['startdate'],$_POST['starttime'],$_POST['endtime'],$courts[$_POST['calendar']]['id'])){
		$message = 'Time already booked.  Please select another time.';
	}
	/*
	 * Everything is good, submit the event.
	 */
	else{
		$postargs = createPostArgsJSON($_POST['startdate'],$_POST['starttime'],$_POST['endtime'],$_POST['title']);
		$token = getAccessToken();
		$result = sendPostRequest($postargs,$token,$courts[$_POST['calendar']]['id']);
		//echo '<pre>' . $result . '</pre>';
	}
}

This code checks to see if a form was submitted, and then completes a series of checks to make sure that it is a valid request. If they all pass, then the event is added to the calendar. You may want to print a message to let the user know that the event was added.

At this point, you have a fully working calendar booking system. You can experiment with the API to add additional features.

Hopefully this tutorial series was of some use to you. If you have any questions, feel free to post them below.