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

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

Posted by: admin November 29, 2017 Leave a comment

Questions:

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 at the subject if 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.

Answers:

UPDATE (free for personal use):

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 [http://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.

In order to use them via SSL:

HTTPS is not supported. However I recommand that you download this
package for local usage and upload it to your own server.

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).

Questions:
Answers:

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)
Questions:
Answers:

Here’s a free widget to serve the purpose for adding an event on

  1. iCal
  2. Google Calendar
  3. Outlook
  4. Outlook Online
  5. Yahoo! Calendar

Free button “Add to Calendar” is used for event page. Fast, stylish
and secure widget allows users to easily schedule the event in their
calendar.

Questions:
Answers:

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.

Questions:
Answers:

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.

Questions:
Answers:

If you are looking for something really simple you can user this widget http://addthisevent.com/. It works really well and simple to implement. I know this is old but just if someone is looking.

Questions:
Answers:

The advantage of a subscription to your events calendar, as you say, is that you can change the dates/times/info and they should be reflected across your subscribers. Why are you creating a separate calendar for each event instead of one?

Are you familiar with the APIs for Google Calendar and Facebook?

As for the last question, are you intending on maintaining two separate events feeds on WordPress and Facebook? You could have WordPress grabbing the feed from Facebook. Maybe some sort of Events CMS that publishes to Facebook then updates the WordPress feed?