Add an add-to-calendar button in Webflow

A guided tutorial to learn how to implement a button to add an event to the calendar (Google, Apple, iCal, ...) in Webflow with little code!

Key points to remember

In a world increasingly focused on time management, offering a functionality toadd events to the calendar directly from your website can be a real advantage for your users.

In this article, we will explore how to easily add an"add to calendar" button in a Webflow project.

Add To Calendar button on a static page

If you want to highlight a special event on one of the static pages of your site, an add to calendar button can be handy.

Without using the Webflow CMS, we will be able to add this functionality quite easily.

Step 1: Create a section with a button

The first step is simply to develop a section in Webflow to highlight your event. Then, in this section, you will be able to add a"button" or"link block" element that will allow the event to be added to an online calendar.

Pro Tip
‍To have an accessible site, we strongly recommend you add the following custom attributes to this element:

Name: role
Value: button

and

Name: aria-label
Value: add the event to an online calendar

Step 2: Add an id to the button

The second step of this tutorial requiresadding an id to our "add-to-calendar" button. To do so, we just have to go to the parameters of the element and add a text in the "ID" part.

To keep consistency in our development, we will give the id:"add-calendar-button".

Step 3: Integrate "Add to Calendar Button" via CDN

To use the add to calendar feature, we have to go through some code. Fortunately, an online tool makes it easy to implement this feature: Add to Calendar Button

Pour intégrer la fonctionnalité dans Webflow, il faudra ajouter le script suivant dans la balise <head> de votre page (dans les paramètres de la page) :

<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>

Step 4: Customize the event info

We will now add a script that will make the button work when clicked and customize the event information in our calendar (event title, start date, end date, etc.)

Dans la balise "Before </body> tag", nous allons ajouter et personnaliser le script suivant :

<script>
const configdate = {
  name: "",    
  description: "",    
  startDate: "",    
  startTime: "",    
  endDate: "",    
  endTime: "",    
  timeZone: "",    
  organizer: "",    
  location: "",    
  options: ["Google", "iCal", "Apple", "Outlook.com", "Yahoo"],     
  };  
  
const buttondate = document.getElementById('add-calendar-button');  
if (buttondate) {    
  buttondate.addEventListener('click', () => atcb_action(configdate, buttondate));  
}  
</script>

We will be able to:

Add the name of the event between the quotes of name (for example: "awwwards Conference: Toronto")
Add a description of the event between the description quotes
Add the start and end date between the quotation marks of startDate and endDate (Be careful, the format must be YYYY-MM-DD; for example "2023-05-03")
Add a start and end time between the startTime and endTime quotes (Be careful, the format must be HH:MM; for example "09:00")
Add a time zone between the timeZone quotes (You can use the time zone you want; for example: "America/Toronto" or use the time zone according to the user's browser with "currentBrowser")
Add information about the event organizer between the quotes of organizer (You must add the name and email in the following format name|email; for example: "awwwards| rudolph@awwwards.com")
Add a location between the location quotes (for example: "Toronto")
Customize calendar options by adding or removing options

If you didn't use the "add-calendar-button" id on your button, you will also have to replace it in this part of the code: document.getElementById('add-calendar-button').

You can of course remove the lines you don't need (for example remove the organizer or startTime line): Understanding the configuration in detail

For our example, the code would be as follows:

<script>
const configdate = {
  name: "awwwards Conference: Toronto",    
  description: "Trois jours passionnants avec certains des orateurs les plus influents du secteur, qui nous inspirent, nous enseignent et nous guident face aux nombreux défis et opportunités qui se présentent dans l'avenir du web.",    
  startDate: "2023-05-03",    
  startTime: "09:00",    
  endDate: "2023-05-05",    
  endTime: "17:00",    
  timeZone: "America/Toronto",    
  organizer:"awwwards|rudolph@awwwards.com",    
  location: "Toronto",    
  options: ["Google", "iCal", "Apple", "Outlook.com", "Yahoo"],     
  };  
  
const buttondate = document.getElementById('add-calendar-button');  
if (buttondate) {    
	buttondate.addEventListener('click', () => atcb_action(configdate, buttondate));  
}  
</script>

configuration script add to calendar webflow button

Step 5: Publish your project

The add to calendar button will only work on a live site. You will have to publish your project to test this new feature.

Add To Calendar button on a dynamic page (with Webflow CMS)

For a dynamic page, we will repeat the same steps as for a static page. However, this time we will add fields in the CMS that we can use in our code to customize the information depending on the event.

The first three steps will be identical to the configuration for a static page (we invite you to read the steps in more detail above if you wish, but here is a summary):

Step 1: Prepare a section with a button

Develop a section that includes a button or link block.

Step 2: Add an id to the button

You have to add an id to the button that will be used to add the calendar (for example: add-calendar-button).

add calendar button on dynamic page with id

Step 3 : Integrate the "Add to Calendar Button" code

Dans la balise <head> de votre page dynamique, il faudra insérer le code suivant :

<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>

script add to calendar button cms webflow

Step 4: Customize your collection

In your collection (event for example) you will have to add the fields you need for the button configuration:

A "Plain text" field for the event name
A "Plain text" field for the event description
A "Date" field for the start date of the event (with timepicker if needed) or two 'Plain Text' fields (one for the start date and one for the start time. The format YYYY-MM-DD for the date and HH:MM for the time must be respected)
A "Date" field for the end date of the event (with timepicker if needed) or two 'Plain Text' fields (one for the end date and one for the end time. The format YYYY-MM-DD for the date and HH:MM for the time must be respected)
A "Plain text" field if you want to customize the time zone per event
etc.

In this part, it's up to you to add the fields you want to customize the button (learn more about the add to calendar button configuration)

item collection events for dynamic add to calendar button

Step 5 - 1 : If you use "Plain Text" fields for dates & times

If you use plain text fields for the dates, the code to add will be simpler. As for static pages, you can customize the following code according to your needs:

<script>
const configdate = {
  name: "",    
  description: "",    
  startDate: "",    
  startTime: "",    
  endDate: "",    
  endTime: "",    
  timeZone: "",    
  organizer: "",    
  location: "",    
  options: ["Google", "iCal", "Apple", "Outlook.com", "Yahoo"],     
  };  
  
const buttondate = document.getElementById('add-calendar-button');  
if (buttondate) {    
	buttondate.addEventListener('click', () => atcb_action(configdate, buttondate));  
}  
</script>

You will only have to source your data from the CMS between the quotes of each configuration.

script add to calendar dynamic button CMS Webflow

Step 5 - 2 : If you use "Date" fields for dates & times

If you use Date fields for the start and end dates (with times), there will be a few extra steps. This is because the date and time must follow specific formats (YYYY-MM-DD for the date and HH:MM for the time).

To do this, we will add in our section 4 texts:

A text for the start date
A text for the start time
A text for the end date
A text for the end hour

We can customize the formats to fit the regulations.

We will give for each text, an id:

For start date: start-date
For start time: start-time
For end-date
For end-time

We can then hide this information (display:none if necessary).

information date webflow cms item calendar button add

We will add in "Before body tag", the following code by sourcing the other data than date and time from the CMS:

<script>
const timeElements = [
  { id: 'end-time', formattedTime: '' },  
  { id: 'start-time', formattedTime: '' }
];

timeElements.forEach((timeElement) => {
  const element = document.getElementById(timeElement.id);  
  const [hour, minute] = element.textContent.split(':');  
  const formattedHour = hour.padStart(2, '0');  
  const formattedMinute = minute.padStart(2, '0');  
  timeElement.formattedTime = `${formattedHour}:${formattedMinute}`;
});

const eventStartDate = document.getElementById('start-date').textContent;
const eventStartTime = timeElements.find((t) => t.id === 'start-time').formattedTime;
const eventEndDate = document.getElementById('end-date').textContent;
const eventEndTime = timeElements.find((t) => t.id === 'end-time').formattedTime;

const configdate = {
  name: "",    
  description: "",    
  startDate: eventStartDate,    
  startTime: eventStartTime,    
  endDate: eventEndDate,    
  endTime: eventEndTime,    
  timeZone: "currentBrowser",    
  organizer: "",    
  location: "",    
  options: ["Google", "iCal", "Apple", "Outlook.com", "Yahoo"],     
  };  

const buttondate = document.getElementById('add-calendar-button');  
if (buttondate) {    
	buttondate.addEventListener('click', () => atcb_action(configdate, buttondate));  
  }  
</script>