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

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
In-Depth
Video
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:   
1
https://ics.agical.io/?subject=MAGICTEXTSUBJECT&reminder=30&dtstart=STARTDATETIME&dtend=ENDDATETIME
Copied!
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.
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:   
1
https://ics.agical.io/?subject=MAGICTEXTSUBJECT&reminder=30&dtstart=STARTDATETIME&dtend=ENDDATETIME
Copied!
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.
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​

How to Create Multi-Sided Apps

How to Create Temporary User Avatars

Last modified 5mo ago

Copy link

Contents