How to create an “Add to the calendar” button for your website
When we provide any event details on our website, we often want to give our users a way to easily and quickly save them. One of the most convenient and popular ways to implement this is to create `Add to the calendar` functionality.
Of course, you can use one of the existing solutions for this, but it’s also simple to build this button by yourself. Creating it from scratch will give you more flexibility and will allow you to style the button whatever you want; additionally, it will probably save you some money.
In this article, I want to describe step-by-step how to implement this for React+NodeJS web-application, using iCal and Google calendars as examples.
iCal
iCalendar is a data format for events, todos, and other scheduling and calendaring actions. It allows us to store information and exchange it between applications or systems. iCalendar is used and supported by many products, including Google Calendar, Apple Calendar (formerly iCal), IBM Notes (formerly Lotus Notes), Yahoo! Calendar, and many others. To create an event in this format, we use the so-called “Calendaring and Scheduling Core Object” to store the information of the event. iCalendar data have the MIME content type text/calendar.
The body of the iCalendar object consists of a sequence of calendar properties and one or more calendar components. The first line must be BEGIN:VCALENDAR, and the last line must be END:VCALENDAR; the content between these lines is called the “iCalbody”.
All calendar components start with the letter “V”. The “VCALENDAR” mentioned above is the global section that holds all other sections together. Other sections might include “VEVENT” for events, “VTODO” for to-do items, “VJOURNAL” for journal entries, and “VTIMEZONE” for time zone information. Multiple sections of the same type can be repeated. For example, various “VEVENT” sections can occur in an iCalendar file to describe various events.
To find the names of the properties that I need, I used https://icalendar.org/. In my case, I did not want to add a lot of information about each event, so I ended up with something like:
In this case, the beginning and end of the document were repeating from event to event, so only `DTSTART`, `DTEND`, `SUMMARY` and `URL` were changing. I created a small helper function to create a proper document for every event. In this helper, I only convert dates to a needed format with moment.js and use JS templates to group all the information.
Now, when the file is ready, it needs to be downloaded on the client. For example, in my application, I’ve created a nodeJS route that receives an event ID as a parameter and then searches for it in the database. When an event was found, I use my `generateIcs` helper and return an ICS file. On the client-side, I use `a` tag for the download link, which performs a GET-request on click. Then the file is downloaded, and when the user clicks to open the file, the calendar app is opened, where the user can select a calendar name to which event will be added. After choosing the calendar name, all done!
Google calendar
Adding an event to the Google calendar is even simpler. All you need to do is to generate a link in the right format. When the user clicks on this link, Google calendar will open a window with all details that you’ve provided in the link already prefilled. Now you just need to save it.
To generate this link, you always use base url `https://calendar.google.com/calendar/render`, and then you add all details as query params. There are a couple of required parameters, such as `action` (I haven’t found any other possible values than `TEMPLATE`); `text` — is used for the event title; `dates` — start and end dates of the event, separated by a slash (can be passed in different formats).
For more details and more parameters that can be passed in the link, I recommend checking this page.
In my application, I only needed to change the same four values as in iCal events, so I also created a helper function for this.
Keep in mind that when you decide to go with the full-day events, it will be created up to, but not including the end date.
Here is an example of the working link:
And to summarise…
As you can see, “Add to the calendar” functionality is not hard to implement from scratch.
The difficulty is that for different calendars, adding an event functionality requires its own approach. So it’s not possible to implement something universal — you have to work on a button for every new calendar separately. It might also be challenging to find appropriate documentation; however, implementing this functionality from zero brings some benefits.
