Search code examples
htmlcalendargoogle-calendar-apiicalendar

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


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.


Solution

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