Calendar

Display your data in a calendar layout.

๐Ÿ‘‰
Calendar block is available for users on the Professional plan and above.
Calendar block
Calendar block

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

Calendar settings
Calendar settings

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:

  • Date format in data source;
  • Start week on;
  • Calendar default view;
  • Event title;
  • Start date and time;
  • End date and time;
  • 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, 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.

Table with event data
Table with event data

Date format in data source

Here, you have different date display formats.

๐Ÿ’ก
Make sure to select the same format youโ€™ve used in your data source for Start and End dates to have the dates displayed correctly.

Start week on

Choose whether the week should start on Monday or Sunday.

Calendar default view

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

Event title

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

Start and End date/time

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.

๐Ÿ’ก
The date fields in your data source may or may not include 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"). 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.

๐Ÿ’ก
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 or events that span across multiple days (e.g. April 18, 16:30 - April 19, 10:30).

Event popover 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 do a demo.

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 additional fields to be used in the event pop-up: a description of the event and event page URL.

Additional fields
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 Calendar block
Setting up the Calendar 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
More" option to see the complete list of events
Did this answer your question?
๐Ÿ˜ž
๐Ÿ˜
๐Ÿคฉ

Last updated on January 26, 2024