How to Add an "Add to Calendar" Button for Events

Give your users an "Add to Calendar" button that they can use to quickly add events, bookings, or trips to the calendar on their phone.

Skill Level: Intermediate

Before you Begin

• Know how to copy and paste on your computer

• Know how to access the Database in your Adalo app

• You do not need a paid plan to implement this feature

Walkthrough

Simple

1.) Create a new collection called "Events"

2.) Change the name of the text property in the collection to "Event Title"

3.) Add a Date and Time property called "Start Date and Time"

4.) Add another Date and Time property called "End Date and Time"

5.) Add a new Simple List screen from the screen templates

6.) Under the "What is this a list of?" dropdown, select "Events"

7.) Under the Right Section section dropdown, turn this on and choose a button icon to use as the Add to Calendar button.

8.) Add a Link action to this button that links to a Website

9.) For generating the calendar invite, we're going to use a wonderful tool called Agical. To generate the invite, first copy/paste this URL into the Action's input field:

https://ics.agical.io/?subject=MAGICTEXTSUBJECT&reminder=30&dtstart=STARTDATETIME&dtend=ENDDATETIME

10.) Replace all capitalized text sections in this link with the appropriate Magic Text from the Current Event option. For example, replace the MAGICTEXTSUBJECT portion with the Subject property in your Events collection. You can also change the number in the reminder portion of the link for different event alarm times in minutes.

11) Click the pencil icon on the Magic Text dates and set the formatting to "No Formatting"

EXAMPLE:

Example Action showing a possible setup link for generating a Calendar Invite.

In-Depth

1.) Create a new collection called "Events"

2.) Change the name of the text property in the collection to "Event Title"

3.) Add a Date and Time property called "Start Date and Time"

4.) Add another Date and Time property called "End Date and Time"

5.) Add a new Simple List screen from the screen templates

6.) Select the list on the new screen. Under the "What is this a list of?" dropdown, select "Events"

7.) Under the Right Section section dropdown, turn this on and choose a button icon to use as the Add to Calendar button.

8.) Add a Link action to this button that links to a Website

9.) For generating the calendar invite, we're going to use a wonderful tool called Agical. To generate the invite, first copy and paste this URL into the Action's input field:

https://ics.agical.io/?subject=MAGICTEXTSUBJECT&reminder=30&dtstart=STARTDATETIME&dtend=ENDDATETIME

10.) Replace all capitalized text sections in this link with the appropriate Magic Text from the Current Event option. For example, replace the MAGICTEXTSUBJECT portion with the Subject property in your Events collection. You can also change the number in the reminder portion of the link for different event alarm times in minutes.

11) Click the pencil icon on the Magic Text dates and set the formatting to "No Formatting"

EXAMPLE:

Example Action showing a possible setup link for generating a Calendar Invite.

Video

Result

Now when a user clicks on a button in the list, it will ask them to add the event to their phone's calendar! For web apps, it will prompt the user to download the Calendar invite file (.ics)

Learn More

• You can also add this action to buttons that are not in lists as long as you have Current Event data available on the screen the button is on.
• You can also attach more calendar invite options to the link such as recurring series of events, locations, organizer information and more. Below is a full list of the options you can attach to the link URL. Don't forget that when you attach these options, each one needs to have an & symbol before it, an = sign after it, followed by the Magic Text value you want to use.

Link Option	Description
description	A long description of the event
organizer	The name of the person organizing the event
location	The location of the event
attach	A URL or link for the event, such as a webinar link
subject	The subject or title of the event
dtstart	The start date of the event (no formatting)
dtend	The end date of the event (no formatting)
recur	Valid values are weekly and monthly. Use along with the recuruntil option
duration	Used instead of dtend to specify length of event. Valid values are formatted as 1H for 1 hour or 30M for 30 minutes
reminder	Time in minutes that you you want to be reminded about the event. Valid values are numbers greater than or equal to 1. For example, a value of 15 will remind the user 15 minutes before the meeting starts.
recuruntil	Used along with the recur option. This is the date that you want the recurring event series to send (no formatting).
allday	Omit for events that do not last all day. For events that do, the value for this option should be 1
format	Enter gcal as the value here if you want to generate a Google Calendar link for Android

Help

If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well! https://help.adalo.com/how-to/how-to-add-an-add-to-calendar-button-for-events