Interface element: Calendar

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.

Introduction

Adding calendar elements

1. If this is the first time you've added elements to an interface, please consult this help article first.
2. Find the Calendar element by clicking + Add element in the lower left portion of the interface editor.
3. You'll then place the element somewhere in the layout of your interface page. Don't worry if it isn't in perfect positioning yet, as you can always move the element later.
4. Next up, you'll need to configure the calendar's properties so that it performs and looks the way you want it to. 

Configuring calendar element properties

Element name and source

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.

Data adjustments

Then, you'll 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:

1. Closest record to today
2. Today
3. Exact date

You can also set the "Timescale" of the calendar. Here, there are 5 settings:

1. Month
2. 2 week
3. Week
4. 3 day
5. 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.

Appearance

Finally, you can also customize the appearance of the calendar. This includes setting an image field up to be a thumbnail for calendar events, changing the fit of those images, choosing which fields should be visible in the event's record, coloring the records by a single select field or conditions, and finally choosing whether or not to show the element's name/label.

The first option is to select an image field. The table you are sourcing information in the element from must contain an attachment field in order to use this option. The "Fit image size" toggle will allow for slight adjustments in the way the thumbnail will appear in the element. It's worth noting, that only the first image attachment that shows in the corresponding attachment field will appear in the calendar element.

Next, you can choose which fields will appear in the event's record. It's worth noting that there isn't a lot of room to show multiple fields in cases where an end date is not present or where the start and end date for an event are close to one another. In the GIF below, you can see how making some adjustments (like adding an end date field) gives more space for adding more information:

You can also color the records in the calendar. There are currently two options:

1. Color by a single select field in the source table
2. 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:

1. Today - Sets the calendar to start from today's date looking into the future
2. Timescale - Set the scale of the calendar (Month, 2 week, Week, 3 day, Day)
3. 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.
4. Collapse weekends - Some teams may not work through the weekends. In these cases, you can collapse Saturday/Sunday weekends.
5. 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."
   

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.

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:

FAQs

I'm seeing (empty) on some or all of my calendar events, what does that mean?

When you see the (empty) tag it means that a field that has been set to visible in the appearance settings is blank in the table where you are sourcing the information from. To resolve this, either add information to that field in the base or toggle that field to not show in the element.