How do I create a link to add an entry to a calendar?

Question

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.

Related: https://stackoverflow.com/questions/22757908/google-calendar-render-action-template-parameter-documentation — Denilson Sá Maia, Apr 27 '16 at 15:55

squarecandy · Answer 1 · 2019-03-12T13:48:57.333

111

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:

action=TEMPLATE (required)
text (url encoded name of the event)
dates (ISO date format, startdate/enddate - must have both start and end time - the button generator will let you leave the endtime blank, but you must have one or it won't work.)
- to use the user's timezone: 20131208T160000/20131208T180000
- to use global time, convert to UTC, then use 20131208T160000Z/20131208T180000Z
- all day events, you can use 20131208/20131209 - note that the button generator gets it wrong. You must use the following date as the end date for a one day all day event, or +1 day to whatever you want the end date to be.
details (url encoded event description/details)
location (url encoded location of the event - make sure it's an address google maps can read easily)

Update Feb 2018:

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:

text (name of the event)
dates (ISO date format, startdate/enddate - must have both start and end time)
- an event w/ start/end times: 20131208T160000/20131208T180000
- all day events, you can use 20131208/20131209 - end date must be +1 day to whatever you want the end date to be.
ctz (timezone such as America/New_York - leave blank to use the user's default timezone. Highly recommended to include this in almost all situations. For example, a reminder for a video conference: if three people in different timezones clicked this link and set a reminder for their "own" Tuesday at 10:00am, this would not work out well.)
details (url encoded event description/details)
location (url encoded location of the event - make sure it's an address google maps can read easily)
add (comma separated list of emails - adds guests to your new event)

Notes:

the old url structure above now redirects here
supports https
deals w/ timezones better
accepts + for space in addition to %20 (urlencode vs rawurlencode in php - both work)

edited Mar 12 '19 at 13:48

answered Nov 08 '13 at 20:05

squarecandy

4,894
3
34
45

2

If anyone is interested, I created a php function that will build this type of google calendar link: https://gist.github.com/squarecandy/26611bbcfc63f9c7e3a7dc45e9145133 – squarecandy Jan 27 '17 at 22:30
2

Also worth noting that the timezone is not being set for me, unless I specify both the timezone dates AND the ctz parameter. More info here: https://zaclee.net/php/formatting-google-calendar-links-with-timezones-and-php-carbon – Zachary Schuessler Aug 18 '17 at 16:50
@squarecandy any idea how to get this to set multiple dates at once? For example, if you have a range like Tuesday - Thursday, but want to show it in the calendar as 3 separate events? – garek007 Nov 07 '18 at 19:36
@garek007 I don't think that's possible. That would have to be 3 different events. If there's a task that you can't do on the online version of google calendar "add event" screen, you can't use this technique for it. You could probably figure out how to add 3 events at once with the Google Calendar API, but this just links to the "add event" for a single event. – squarecandy Nov 08 '18 at 01:24
@squarecandy I want to update organizer as well, is there any way using which I can add organizer details as well, in this create event link? – Nikunj Undhad Feb 04 '19 at 14:19
@nikunj-undhad - This method creates a very simple link for a user to create their own new event in the web app version of google calendar. I don't think there is an organizer field that can be defined on the new calendar screen https://calendar.google.com/calendar/r/eventedit - if you want to create a new event define the owner/creator of that event as someone other than the current web user and invite others to that event you will need to use the more complicated API connection method. – squarecandy Feb 04 '19 at 19:07
1

&authuser=xyz@gmail.com will allow you to select the specific gmail account. Helpful if you're logged in to multiple Gmail accounts in the browser and you want to add the calendar event to a specific account. – Abdulgood89 May 17 '19 at 15:42
If anyone is wondering about adding a reminder through the URL link for Google Calendar, that is not possible. This setting is in calendar.google.com settings -> Settings -> Select desired Calendar on the left side -> Event notifications. Every Google Calendar event afterwards created for that Calendar will have the same notification settings. – Abdulgood89 May 18 '19 at 22:40
it would have been better if we could specify reminder options as well – exexzian Jun 21 '19 at 08:30
1

Updated URL for the PHP function: https://gist.github.com/petertwise/26611bbcfc63f9c7e3a7dc45e9145133 – squarecandy Jun 22 '20 at 14:44
1

`/eventedit` URLs are not working on iOS (tested on 16.4.1) with Google Calendar app installed (v23.13.0 tested). The app is launched but nothing happens after. `/event?action=TEMPLATE` URLs are working correctly in both app and browser. – zh. Apr 12 '23 at 08:55

score 56 · Accepted Answer · edited Nov 18 '18 at 18:19

UPDATE (free for personal use):
HTTPS IS NOW SUPPORTED

While my answer below detailing how-to for each service WILL work, IMO it's much easier now to go with a third-party like AddThisEvent [https://addthisevent.com]. It lets you customize lots of options as well as add to Facebook and more. Unfortunately, they've now made it a paid service for anything other than personal use and do enforce this.

I assume there are other third-party solutions like this one, but I can only speak to this one, and it has worked great for us so far.

For an "Add to my Google Calendar", they used to have a code generator form you could use, but have since taken it down. For more details on Google Calendar links, see squarecandy's answer below.

For Outlook, it's a BIT more complicated, but basically you need to create a .vcs file with the event's data, and just make a link to that file. Step-by-step instructions here.

For an iCal link, you could use a PHP class like this one, or follow this page's instructions on how to create an ics file (iCal file).

Thanks, to bad that there's no universal standard for this like with mailto: for email. — Hultner, Apr 29 '11 at 13:56
It seems Google's "Event Publisher Guide" page no longer offers that URL-generating form (it is unfortunately in the nature of Google's documentation to change incessantly), but @squarecandy's URL format still works just fine (for Google Calendar, at least)! — chbrown, Dec 02 '14 at 02:48
Well their own form didn't even generate links that worked, so that's probably why they took it down. :) — squarecandy, Apr 20 '15 at 00:40

score 10 · Answer 3 · edited Jun 20 '20 at 09:12

10

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>

test it

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>

test it

Doing it without a third party holds a lot of advantages for example using it in emails.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 05 '15 at 14:16

Email

2,395
3
35
63

8

Looks like the link for Outlook doesn't really work anymore. It adds the location and brings up the New Event form, but doesn't fill in any other fields. – Steve Dec 02 '15 at 02:43
10

To expand on @Steve's comment, the Outlook link doesn't even resolve to a server anymore — I get a DNS resolution error. – Owen Blacker Feb 01 '18 at 14:16
5

Sorry, this answer needs to be updated in order to be valid, downvoted. – webaholik Aug 10 '19 at 13:51
Dose not work any more – Alan Fuller Sep 27 '21 at 19:32

score 1 · Answer 4 · answered May 13 '21 at 09:21

Litmus has a great post detailing how to build a neat solution that works well across the major email and calendar clients, including catering for users who use clients from different vendors.

It is far from trivial, given the non-standardised nature of this space, but if you're willing to roll up your sleeves for a couple of days, you can get something that works well and doesn't come with a monthly price tag and limits on usage!

https://www.litmus.com/blog/how-to-create-an-add-to-calendar-link-for-your-emails/

score 0 · Answer 5 · answered Jun 16 '22 at 10:20

You can generate a ics file which include the meeting information

the ics file look like this

BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//Michael Angstadt//biweekly 0.6.4//EN
METHOD:REQUEST
BEGIN:VEVENT
UID:c7a913c7-3276-4828-8606-b841f2870475
DTSTAMP:20220519T070000Z
SUMMARY: Booking you for this date
DESCRIPTION:You having been invited to the event 
DTSTART:20220519T070000Z
DURATION:PT1H
ORGANIZER;CN=Company Team:mailto:info@XXXXXX.com
ATTENDEE;ROLE=REQ-PARTICIPANT;CN=Not Amazing Attendee:mailto:*********@gmail.com
END:VEVENT
END:VCALENDAR

also the java code to generate ics file is here

import java.io.BufferedWriter;
import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

public class iCal {

    private String version = "VERSION:1.0 \n";
    private String prodid = "PRODID://Elara/lofy/tanare/delp/314sum2015// \n";
    private String calBegin = "BEGIN:VCALENDAR \n";
    private String calEnd = "END:VCALENDAR \n";
    private String eventBegin = "BEGIN:VEVENT \n";
    private String eventEnd = "END:VEVENT \n";

    public void iCal() {
    }

    public static void main(String[] args) {

    }

    public void write(String name) {
        StringBuilder builder = new StringBuilder();
        builder.append(name);
        builder.append(".ics");

        String testExample = "UID:uid1@example.com\\nDTSTAMP:19970714T170000Z\\nORGANIZER;\n"
                + "    CN=John Doe:MAILTO:john.doe@example.com\\nDTSTART:19970714T170000Z\n"
                + "    \\nDTEND:19970715T035959Z\\nSUMMARY:Bastille Day Party\\n";

        try {

            File file = new File(builder.toString());

            // if file doesnt exists, then create it
            if (!file.exists()) {
                file.createNewFile();
            }

            FileWriter fw = new FileWriter(file.getAbsoluteFile());
            BufferedWriter bw = new BufferedWriter(fw);
            bw.write(calBegin);
            bw.write(version);
            bw.write(prodid);
            bw.write(eventBegin);
            bw.write(testExample);
            bw.write(eventEnd);
            bw.write(calEnd);

            bw.close();

            System.out.println("Done");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

score -2 · Answer 6 · answered Jul 25 '12 at 19:43

-2

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.

answered Jul 25 '12 at 19:43

fishcx

117
6

7

I would really appreciate an example of this code if you can, trying to do exactly this with Outlook, Gmail and iCal – KidCache May 14 '13 at 22:11

How do I create a link to add an entry to a calendar?

6 Answers6

Update Feb 2018:

Linked