The Calendar element in Interface Designer functions and appears similar to the Calendar view in an Airtable base. This provides a visually pleasing way of seeing projects and tasks over time, planning out sprints, coordinating events, and much more. We'll cover the setup and functionality of the Calendar element below.
Add Calendar element
With an interface opened up in editing mode you'll find the option to "Add element" in the bottom left side of the window. In the "All elements" section you'll find the Calendar option.
Once clicked, you'll decide where to place the Calendar element on your interface page. You can always move the calendar or adjust its size later. Once you find a good spot, click to place the calendar element.
Configure the calendar properties
Now that you've placed the calendar element, you'll need to configure the calendar. The "Properties" box allows you to customize the Source, Data, and Appearance of the calendar. If you want to change the name of the calendar, then click the pencil icon near the top to edit that.
Next, you'll want to choose a source for your calendar. In this case, we will choose the "Design projects" table as our source.
Then, you'll want to decide which data to show in the calendar. The "Copy from view" option will allow you to copy over settings you've already created in a view from your base.
The "Date settings" section drop-down will show a menu of additional options to customize. Every calendar needs at least one date field to use in the "Start date field." However, the "End date field" is optional. You can also click the "Use an additional date field" option to add more event dates to the same calendar element.
The "Initial view" section allows you to set up the way that the calendar will initially appear to collaborators opening the interface. These options can be changed by the interface user, but it may be helpful to think of the way your team will be interacting with this calendar element. The "Position" field can be set in three ways:
- Closest record to today
- Exact date
You can also set the "Timescale" of the calendar. Here, there are 5 settings:
- 2 week
- 3 day
Lastly in this section, you can choose to enable the "Set for all visits" toggle which will reset the Position and Timescale to the settings you've configured each time the interface is visited or reloaded.
If there are any other filters or sorts you would like to add to the calendar, then you can add those now. You can even create a Filter element to allow collaborators interacting with this interface to set their own filters for the calendar.
Finally, you can also customize the appearance of the calendar. The first option is to color of records in the calendar. In this case, we are using the colors that correspond to a single select field in our base. But, you can also set up conditional coloring.
The last option is the "Label" toggle. This allows you to show or hide the name of the element. By default, this option is toggled off.
Calendar element options
When you or other users are interacting with a published calendar element there are five options that allow users to tweak the element:
- Today - Sets the calendar to start from today's date looking into the future
- Timescale - Set the scale of the calendar (Month, 2 week, Week, 3 day, Day)
- Move (Forward/Backward) - Clicking these buttons allow you to move the calendar to the past or future by the value set in the timescale drop-down.
- Collapse weekends - Some teams may not work through the weekends. In these cases, you can collapse Saturday/Sunday weekends.
- See records - Clicking this allows you to see a list of records (With dates, Without dates, or All records) and also will show a search bar to "Find a record."
Here's what the "See records" functionality looks like:
You can also click on a record (event) in the calendar to show more details and even expand the record. Collaborators may also be able to edit or delete the record from this window.
Finally, if users are able to make edits in the element and have the corresponding base permissions, they can:
- Move events (Maintains current date range)
- Edit start and end dates
- Add new events (records)
Here's what that might look like: