Softr Docs
Search…
Calendar
Calendar block overview
Calendar block
The Calendar block is for showing events from Airtable in a calendar view. Let's walk through the block settings and see how it's configured.
Please, note that the block is only available for Professional and Business subscription plans.
Similar to the List block, you need to select the Airtable base/table where you want to get the data from and can also add inline filters, search bar, and conditional filters. Now, let's review the settings that are specific to the Calendar block.
Right now the users can only View events, but soon there will also be an option for users to Add and Modify events.
Calendar Settings
Calendar Settings
Using the first two fields, you can customize the Title and Subtitle of the block. Further on, you need to map the calendar fields from the selected Airtable table. The following fields are available:
- Event title;
- Start date;
- End date;
- Event color (you can assign a distinct color to each event).
So, let's see how we can organize the data on Airtable to use it along with the Calendar block on Softr. Below you can see a table that we've created for demonstration purposes. It contains 4 fields and 3 rows (events). Let's see what field types and values we've used for each field.
Table with event data
Event title
Here the Event Title corresponds to the Name field on Airtable, which is a basic Single line text.
Start and End date
We've used Date type fields to specify the event start and end date/time.
Color
Here, you need to use a Single select field type. The values need to be specified either as text (e.g. "Red") or as the HEX equivalent of the preferred color (e.g. "#FF00000"). In our example, we've used both options to show how it looks.
Note, that the color is applied only to those events, for which the Start and End days are different. For instance, that will work on all-day events (e.g. April 18, 00:00 - April 19, 00:00) or events that span across multiple days (e.g. April 18, 16:30 - April 19, 10:30).
Calendar Fields
Here, you can add any number of additional fields that will be shown inside event pop-up when the user clicks on the event. The following fields types are available:
- Text and Rich Text
- Heading 1, 2, and 3
- Email
- URL
- Button
- Tag
- File
- Video and Audio
- Rating
- Divider
You'll see how this works a bit later when we set up the block and test it.
Setting up the block
Now that we know everything we need in order to configure the block, let's map all the fields and check out the result. We are going to use the table shown below, where we've also added a couple of custom: a description of the event and event page URL.
Additional fields
Below, you can see how we map these fields along with the calendar settings fields from our block and what it looks like from the user's perspective.
Setting up the block
As you can see, the users can click on the event to learn more details from the pop-up. They can also switch between Monthly, Weekly, and Daily views as well as navigate to Next and Previous months and use the Today button to quickly go back to the current day.
If a particular calendar cell can't display all the events assigned to that date, the users will see a More option to view all the events in a pop-up. You can see how that works below.
"More" option to see the complete list of events
Last modified 1mo ago