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.

In the Content 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 data source. The following fields are available:

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, but it will work just fine with other data sources as well.

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.

Here, you have different date display formats.

Choose whether the week should start on Monday or Sunday.

Choose the default view of the calendar, which the users can then switch.

Here the Event Title corresponds to the Name field in our table, which is a basic Single line text.

We've used Date type fields to specify the event start and end date/time. You can learn more about setting up dates in Airtable and Google Sheets.

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"). The full list of colors along with their HEX equivalents is available here. In our example, we've used both options to show how it looks.

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:

You'll see how this works a bit later when we do a demo.

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 additional fields to be used in the event pop-up: 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.