webSIGHTdesigns - Web Design, Web Development, Web Hosting

Setting up an Add Event to Calendar Dropdown

Posted on Thursday, September 3rd, 2015 at 12:21 am
by webSIGHTdesigns

How to set up an "Add To Calendar" dropdown menu in PHP

You may want to provide your website users with a way to add an event to their calendar. This can be accomplished using a dropdown menu created in your HTML that contains links to either download a VCard (for Outlook and iCalendar) or to URLs for online services (such as Google Calendar, Yahoo! Calendar and Outlook Online).

We start out with a very simple barebones HTML document that loads Bootstrap 3 and jQuery. Bootstrap 3 isn't strictly required, but we're using it to style and script our dropdown menu. You could also use some other framework such as Foundation, or none at all and just create a simple dropdown menu with a <select> tag in your HTML.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AddEvent Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                // dropdown menu goes here
            </div>
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>

</body>
</html>

The markup for our Bootstrap 3 dropdown menu is as follows:

<div class="dropdown">
    <button class="btn btn-default btn-primary dropdown-toggle" type="button" id="addEventDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Add To Calendar <span class="caret"></span></button>
    <ul class="dropdown-menu" aria-labelledby="addEventDropDown">
        <li><a href="download.php?format=icalendar&amp;date=<?php echo str_replace('Z', '', $current_date); ?>&amp;text=<?= rawurlencode($event_name) ?>&amp;dates=<?= $fstart_date ?>/<?= $fend_date ?>&amp;details=<?= rawurlencode($event_details) ?>&amp;location=<?= rawurlencode($event_location) ?>">iCalendar</a></li>
        <li><a href="https://www.google.com/calendar/event?action=TEMPLATE&amp;text=<?= rawurlencode($event_name) ?>&amp;dates=<?= $fstart_date ?>/<?= $fend_date ?>&amp;details=<?= rawurlencode($event_details) ?>&amp;location=<?= rawurlencode($event_location) ?>" target="_blank">Google Calendar</a></li>
        <li><a href="download.php?format=outlook&amp;date=<?= $current_date ?>&amp;text=<?= rawurlencode($event_name) ?>&amp;dates=<?= $fstart_date ?>Z/<?= $fend_date ?>Z&amp;details=<?= rawurlencode($event_details) ?>&amp;location=<?= rawurlencode($event_location) ?>">Outlook</a></li>
        <li><a href="https://bay04.calendar.live.com/calendar/calendar.aspx?rru=addevent&amp;summary=<?= rawurlencode($event_name) ?>&amp;location=<?= rawurlencode($event_location) ?>&amp;description=<?= rawurlencode($event_details) ?>&amp;dtstart=<?= rawurlencode($fstart_date) ?>&amp;dtend=<?= rawurlencode($fend_date) ?>" target="_blank">Outlook Online</a></li>
        <li><a href="https://calendar.yahoo.com/?v=60&amp;view=d&amp;type=20&amp;title=<?= rawurlencode($event_name) ?>&amp;st=<?= rawurlencode($fstart_date) ?>&amp;dur=<?= rawurlencode($event_duration) ?>&amp;in_loc=<?= rawurlencode($event_location) ?>&amp;desc=<?= rawurlencode($event_details) ?>&amp;url=<?= rawurlencode($return_url) ?>" target="_blank">Yahoo! Calendar</a></li>
    </ul>
</div>

As you can see, we're referencing a lot of variables in those URLs. We use the rawurlencode() function to encode all non-alphanumeric characters except -_.~ as % followed by two hex digits. The calendars that require a VCard all link to a download.php script which will generate the VCard as a download to the user's local drive.

The timestamps we return for iCalendar should be formatted so a date/time like January 2nd, 2015 at 1:00pm would be formatted as:

20150102T120000

The portion before the T is the date, and the portion afterwards is the time. For Microsoft Outlook, we will also want to add a Z to the end of the timestamp, to signify that this is a UTC date/time stamp.

To set up our PHP code, replace the first line of this file with the following:

<?php

// configure event details
$start_date = "2015-09-02 12:00:00";
$end_date = "2015-09-02 13:00:00";
$event_name = "Example Event";
$event_details = htmlspecialchars('Event Details Here\n\n--\nhttp://example.com');
$event_location = "123 Main St, Example, NY";
$return_url = "http://www.domain.com/"; // return url for yahoo

// do not edit below this line
$current_date = str_replace( '-', '', str_replace( ':', '', gmdate('Y-m-d\TH:i:s\Z') ) );
$fstart_date = str_replace( '-', '', str_replace( ':', '', gmdate('Y-m-d\TH:i:s\Z', strtotime($start_date) ) ) );
$fend_date = str_replace( '-', '', str_replace( ':', '', gmdate('Y-m-d\TH:i:s\Z', strtotime($end_date) ) ) );

// calculate duration (for yahoo)
$start = new DateTime($start_date.'+00:00');
$end = new DateTime($end_date.'+00:00');
if ($start > $end) $start->sub(new DateInterval('P1D'));
$interval = $end->diff($start);
$hours = sprintf( '%02d', $interval->h );
$minutes = sprintf( '%02d', $interval->m );
$event_duration = $hours . $minutes;

?><!DOCTYPE html>

We use gmdate() instead of date() so we can add each date/time to the VCard as UTC time. To add a couple of extra styles to the dropdown menu, add the following <style> tag to the <head> of the document:

<style type="text/css">
	.dropdown-menu > li > a:focus,
	.dropdown-menu > li > a:hover {
		color: #fff;
		background-color: #337ab7;
	}
</style>

Next create the download.php document, which will generate our VCards, and add the following contents:

<?php

// set the variables
if( isset( $_GET['format'] ) ) $format = $_GET['format'];
if( isset( $_GET['date'] ) ) $current_date = $_GET['date'];
if( isset( $_GET['dates'] ) ) $dates = $_GET['dates'];
if( isset( $_GET['location'] ) ) $event_location = $_GET['location'];
if( isset( $_GET['text'] ) ) $event_name = $_GET['text'];
if( isset( $_GET['details'] ) ) $event_details = str_replace("\n", "\\n", $_GET['details']);

$filename = "calendar-event-";
if( isset($format) ) $filename .= $format . "-";
$filename .= date('Ymd') . ".ics";

// force file download
header("Content-type: text/plain");
header("Content-Disposition: attachment; filename=" . $filename);

// split the start and end dates
$dateparts = explode('/', $dates);
$start_date = $dateparts[0];
$end_date = $dateparts[1];

// echo the vcard
$str = <<< EOD
BEGIN:VCALENDAR
VERSION:2.0
PRODID:AddEvent
BEGIN:VEVENT
UID:55e62f5c3ae64
DTSTAMP;TZID=UTC:$current_date
DTSTART;TZID=UTC:$start_date
SEQUENCE:0
TRANSP:OPAQUE
DTEND;TZID=UTC:$end_date
LOCATION:$event_location
SUMMARY:$event_name
DESCRIPTION:$event_details
END:VEVENT
END:VCALENDAR
EOD;
echo $str;

For the event details variable, we are replacing all instances of \n with \\n to escape the slashes. These will then be shown as \n in the event details field, instead of showing new lines (which will cause the event to not load properly for Outlook, and possibly other clients since that field should all be on one line in a VCard).

As you can see, with a little date parsing in our PHP, some simple HTML markup, and adequately researching the URL formats to use we can implement a way for our users to add our events to their calendars.

The full code is available as a git repository at https://github.com/websightdesigns/addevent

Please Sign In

Please sign in to post a comment.

Web Development

View details »

Web Hosting

View details »

Our Portfolio

View portfolio »

WebSight Designs webSIGHTdesigns preferred email webSIGHTdesigns United States United States