Skip to content

Instantly share code, notes, and snippets.

@sethshoultes sethshoultes/custom-calendar.html Secret
Last active Dec 10, 2015

Embed
What would you like to do?
Event Espresso API w/ Full Calendar Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel='stylesheet' type='text/css' href='cupertino/theme.css' />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='jquery/jquery-1.8.1.min.js'></script>
<script type='text/javascript' src='jquery/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript' src='fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: "json-events.php",
/*eventSources: [
"json-events.php",
"json-events-2.php"
],*/
theme: true,
cache: false,
lazyFetching: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
</script>
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#loading {
position: absolute;
top: 5px;
right: 5px;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='loading' style='display:none'>loading...</div>
<div id='calendar'></div>
<p>This page is using the Event Espresso API</p>
</body>
</html>
<?php
header('Content-type: text/json');
$curdate = date("Y-m-d H:i:s");
$url = "http://eventespresso.com/testdrive/espresso-api/v1/events/public?Datetime.event_start__gt=".urlencode($curdate);
//Retrieve the data
$json = file_get_contents($url, true); //getting the file content
$decode = json_decode($json, true); //getting the file content as array
$count = count($decode['body']['Events']); //counting the number of results
echo '[';
$separator = "";
if ($count > 0){
foreach ($decode['body']['Events'] as $event){
echo $separator;
echo '{"title": "'.$event['name'].'", "start": "'.date('Y-m-d',strtotime($event['Datetimes'][0]['event_start'])).'", "end": "'.date('Y-m-d',strtotime($event['Datetimes'][0]['event_end'])).'", "url": "http://eventespresso.com/testdrive/?ee='.$event['id'].'"}';
$separator = ",";
}
}
echo ']';
@sethshoultes

This comment has been minimized.

Copy link
Owner Author

commented Jan 4, 2013

This is a quick example. You will need to have the latest version of FullCalendar (http://arshaw.com/fullcalendar/download/) installed on your server.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.