Calendar

Display a list of events on a calendar, along with an optional agenda view. Clicking an event can take you to an event details screen.

In-Depth Guide

First, make sure you've installed the calendar component from the Adalo Marketplace, then click the plus button in the left panel, find the calendar component and drag it on to a screen in your app.

1. Select which collection has the events you want to display on your calendar such as "Trips"

2. Add any filtering and max items conditions to your data. Note: Setting a sort order has no effect.

3. Set the language for your calendar. This will impact how the months and days appear on the calendar.

4. Choose whether Sunday or Monday should be displayed as the first day of the week.

5. To set the start and end dates, click the magic number button for each field and select with properties in your selected collection indicate the start and end of each event.

6. Choose whether events that span more than one day should appear as a dot under each day or as a bar that spans multiple days

7. Clicking on days with multiple events will always cause the calendar to show the agenda view for that day. However, you can specify for days with only one event if clicking those days should also show the agenda view, or run an action like linking directly to an event details screen.

8. The Colors section allows you to customize the colors of various aspects of your calendar.

9. Under Navigation, you can decide whether users can change months on the calendar, if there's an earlier or latest date that can be selected, and you can set a default date to be selected. (If you don't set a default date, the current date will automatically be selected.)

10. Under Agenda View you can,

    1. Use the "Show Preview" toggle to have the Adalo Builder show an example of the agenda view so you can preview your design changes.

    2. Specify if the time format should be in 12 hr time or 24 hr time

    3. Set the colors for events

    4. Set the Title and Subtitle text for events

    5. Add action that happen when a user click on an event like linking to an event details screen.

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!