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
- 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
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:
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.
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.
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 |
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 |
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
Last modified 1yr ago