I'm working for this nightclub and are currently making a website for them, they've got lots events and their site is built a lot around events, today they make an facebook event of every event but it would be killer to have a "Add to my Calendar" button which added it to your iCal or Google Calendar (or maybe even Outlook).
I've managed to figure out how to make an calendar feed but then it will be added as a new calendar, only good thing is that people can "subscribe to events" but it's quite messy to have an calendar for every event. So I would like to know how to implement a function which lets them add it to their main calendar easily. Think like a mailto: link but for calendars if that's possible.
Also while I'm on the subject, does anyone know if it's possible to automatically import an event from Facebook to WordPress or export an event from WordPress to Facebook that would be great, but that's not so important.
This question is related to
html
calendar
google-calendar-api
icalendar
The links in Dave's post are great. Just to put a few technical details about the google links into an answer here on SO:
Google Calendar Link
<a href="http://www.google.com/calendar/event?action=TEMPLATE&text=Example%20Event&dates=20131124T010000Z/20131124T020000Z&details=Event%20Details%20Here&location=123%20Main%20St%2C%20Example%2C%20NY">Add to gCal</a>
the parameters being:
Here's a new link structure that seems to support the new google version of google calendar w/o requiring API interaction:
https://calendar.google.com/calendar/r/eventedit?text=My+Custom+Event&dates=20180512T230000Z/20180513T030000Z&details=For+details,+link+here:+https://example.com/tickets-43251101208&location=Garage+Boston+-+20+Linden+Street+-+Allston,+MA+02134
New base url: https://calendar.google.com/calendar/r/eventedit
New parameters:
Notes:
+
for space in addition to %20
(urlencode
vs rawurlencode
in php - both work)You can have the program create an .ics (iCal) version of the calendar and then you can import this .ics into whichever calendar program you'd like: Google, Outlook, etc.
I know this post is quite old, so I won't bother inputting any code. But please comment on this if you'd like me to provide an outline of how to do this.
To add to squarecandy's google calendar contribution, here the brand new
OUTLOOK CALENDAR format (Without a need to create .ics) !!
<a href="https://bay02.calendar.live.com/calendar/calendar.aspx?rru=addevent&dtstart=20151119T140000Z&dtend=20151119T160000Z&summary=Summary+of+the+event&location=Location+of+the+event&description=example+text.&allday=false&uid=">add to Outlook calendar</a>
Best would be to url_encode the summary, location and description variable's values.
For the sake of knowledge,
YAHOO CALENDAR format
<a href="https://calendar.yahoo.com/?v=60&view=d&type=20&title=Summary+of+the+event&st=20151119T090000&et=20151119T110000&desc=example+text.%0A%0AThis+is+the+text+entered+in+the+event+description+field.&in_loc=Location+of+the+event&uid=">add to Yahoo calendar</a>
Doing it without a third party holds a lot of advantages for example using it in emails.
Here's an Add to Calendar service to serve the purpose for adding an event on
The "Add to Calendar" button for events on websites and calendars is easy to install, language independent, time zone and DST compatible. It works perfectly in all modern browsers, tablets and mobile devices, and with Apple Calendar, Google Calendar, Outlook, Outlook.com and Yahoo Calendar.
<div title="Add to Calendar" class="addeventatc">
Add to Calendar
<span class="start">03/01/2018 08:00 AM</span>
<span class="end">03/01/2018 10:00 AM</span>
<span class="timezone">America/Los_Angeles</span>
<span class="title">Summary of the event</span>
<span class="description">Description of the event</span>
<span class="location">Location of the event</span>
</div>
Source: Stackoverflow.com