How to Add an "Add to Calendar" Button for Events
Skill Level: Intermediate
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
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:
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:
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)
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 |
| A long description of the event |
| The name of the person organizing the event |
| The location of the event |
| A URL or link for the event, such as a webinar link |
| The subject or title of the event |
| The start date of the event (no formatting) |
| The end date of the event (no formatting) |
| Valid values are |
| Used instead of |
| 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 |
| Used along with the |
| Omit for events that do not last all day. For events that do, the value for this option should be |
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
