# Calendar

![Calendar block](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FyFIPbL5HMDG19J46SUo1%2Fcalendar-screenshot-b.png?alt=media\&token=c10fab6a-fdb6-4391-ad22-302de7f1e3be)

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.

{% hint style="info" %}
Please, note that the block is only available for **Professional** and **Business** subscription plans.
{% endhint %}

Similar to the [List](https://softr.gitbook.io/softr-documentation/building-blocks/listings) block, you need to select the Airtable base/table where you want to get the data from and can also add [inline filters](https://softr.gitbook.io/softr-documentation/listings#inline-filters), [search bar](https://softr.gitbook.io/softr-documentation/listings#search), and [conditional filters](https://softr.gitbook.io/softr-documentation/building-blocks/list-conditional-filters). Now, let's review the settings that are specific to the **Calendar block**.

{% hint style="info" %}
Right now the users can only **View** events, but soon there will also be an option for users to **Add** and **Modify** events.&#x20;
{% endhint %}

## Calendar Settings

![Calendar Settings](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FivcDZK9WdfxRa32SMiwv%2Fcalendar-settings-b.png?alt=media\&token=003d06f0-7474-4263-b032-ad9148eab7ad)

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 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 5 rows (events). Let's see what field types and values we've used for each field.

![Table with event data](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FQ3O9xHUpdxmvGsXdqmz5%2Ftable-setup-b.png?alt=media\&token=fea8e8e5-176d-4ad8-8501-6fb839121c4c)

### Event title

Here the **Event Title** corresponds to the **Name** field on Airtable, which is a basic **Single line text**.&#x20;

### 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.

{% hint style="info" %}
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).
{% endhint %}

## 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**.&#x20;

![Additional fields](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2Fyd0eVDYYtcpple0RhS81%2Fcustom-fields-b.png?alt=media\&token=c8d1d501-3793-43ee-94dd-1f03adcfbf52)

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](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FHLkcx1lJm6OcE3BdDqYq%2FScreen%20Recording%202022-08-12%20at%2021.31.32.gif?alt=media\&token=25a47156-95ef-4f4c-b179-abd17312ea42)

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](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2F5cmMZJ1r2sPhkrPKm3Vx%2FScreen%20Recording%202022-04-18%20at%2013.00.19.gif?alt=media\&token=f82ab150-c5a2-4c04-bb08-9d8a5be06178)
