Html – How to create a link to add an entry to a calendar

calendargoogle-calendar-apihtmlicalendar

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.

Best Answer

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)

Related Solutions

Html – How to disable browser autocomplete on web form field / input tags

Firefox 30 ignores autocomplete="off" for passwords, opting to prompt the user instead whether the password should be stored on the client. Note the following commentary from May 5, 2014:

The password manager always prompts if it wants to save a password. Passwords are not saved without permission from the user.

We are the third browser to implement this change, after IE and Chrome.

According to the Mozilla Developer Network documentation, the Boolean form element attribute autocomplete prevents form data from being cached in older browsers.

<input type="text" name="foo" autocomplete="off" />

Html – How to horizontally center an element

You can apply this CSS to the inner <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Of course, you don't have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.

If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:

#inner {
  display: table;
  margin: 0 auto;
}

It will make the inner element center horizontally and it works without setting a specific width.

Working example here:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

EDIT

With flexbox it is very easy to style the div horizontally and vertically centered.

#inner {  
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%;
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

To align the div vertically centered, use the property align-items: center.