Calendar

The Calendar block is for showing events from your data source in a calendar view. Let's walk through the block settings and see how it's configured.

Similar to the List block, you need to select the data source where you want to get the data from and can also add inline filters, a search bar, and conditional filters. Now, let's review the settings that are specific to the Calendar block.

Calendar settings

In the Features tab of the block settings, you can customize the Title and Subtitle of your block, but, most importantly, your have the Calendar Settings section, where you 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 in your data source to use it along with the Calendar block on Softr. We are going to use Airtable to demonstrate that. Below you can see a table that we've created for demonstration purposes. It contains 4 fields and 5 rows (events). Let's see what field types and values we've used for each field.

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.

Additional fields (List Item)

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.

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.

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.