Calendar

The Calendar widget shows days in a month and a week.

You can use the Calendar widget to filter the event list by date. For example, showing appointments on a specific date.

Adding Calendar to your project

To add the Calendar widget to your project:

Drag the Calendar widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
On running the app, the calendar widget shows today's date by default. To set a different date, follow the instructions as below.
Move to the Properties Panel and scroll down to the Calendar section.
Find the Initial Date property, click Unset, and set the date from the variable (app state, API, etc.).

Show/save the selected date

When you select/change any date on the calendar, you can display it on the page or save it in a variable/Field (as Timestamp datatype) for later access.

Let's build an example of showing the selected date in a Text widget that looks like the one below:

The steps to show the selected date in the Text widget are as follows:

1. Create an app state variable

Changing the date on the calendar widget emits the selected date in a variable called calendarSelectedDay. You can't use this value directly in the Text widget because the Text widget can only accept String values. Hence it would help if you created a app state variable that will store the calendarSelectedDay value and then display the selected date in a Text widget (using Date Format Options).

To create the app state variable, please find the instructions here.

It should look something like this:

2. Saving selected date in app state variable

To save the selected date in an app state variable, you can utilize the On Date Selected event and then add actions to update the app state variable:

Here are the steps in detail:

Select the Calendar widget from the widget tree or canvas area.
Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
1. Click on the + Add Action.
2. On the right side, search and select the Update App State action.
3. Set the Select field to update to the App State variable name.
4. Choose the Select Update Type to Set Value.
5. Set the Value Source to From Variable.
6. Set the Source to Widget State.
7. Set the Available Options to the calendarSelectedDay.
8. If there is a multiple date selection (date range selection), you can choose which date to pick up. You can choose to set the start or end date by setting the Range Part to Start or End. For a single date selection (which is by default), the start and end date would be the same.

To show the selected date in the Text widget:

Select the Text, move to the properties panel, and click Set from Variable.
Select Source as App State and Available Options to the App State Variable name.
(Optional) Set the Timestamp Format to display the date in a specific format.
(Optional) Set the default value if you wish to.
Click Confirm.

Using a calendar to filter the list

You might need to use the calendar widget to filter the list of events (appointments, meetings, tickets, etc.). You can do so by applying the filter on the backend query and passing the selected date as a parameter.

Let's build an example that shows the Todos list (from the Firestore collection) based on date. Here's how it looks:

The steps to use the calendar to filter the list are as follows:

1. Prepare data

Before you use the calendar to filter the list, you need to have a list of items with at least one field that holds the date. This date will be used to match against the date selected from the calendar. Skip if you already have data in such a format.

Check out how to create and add data to the Firestore collection on this page.

You can create a Firestore collection with a date field like the one below:

2. Building UI

Your UI must include at least two calendars and ListView widgets. Here's how you add it:

Add the Calendar widget. To provide a better user experience, you can switch to the week view. See how to do it here.
Add the ListView and show the data from the Firestore collection.

3. Apply date filter on backend query

Finally, you can add a filter on the existing backend query or a new one and provide the selected date from the calendar.

To apply filter by date:

Select ListView from the widget tree or the canvas area.
Click on the Backend Query tab (on the right side of your screen).
Query a collection as per the instructions here. Skip if you have already done so.
Scroll down and click on the + Filter button at the bottom
Find the Field Name, click on the Unset, and select the field on which you would like to apply the filter.
Find the Relation dropdown, click on the Unset and choose the relation as Equal To.
Set the Value Source to From Variable.
Set the Source to Widget State.
Set the Available Options to the calendarSelectedDay.
If there is a multiple date selection (date range selection), you can choose which date to pick up. You can choose to include the start or end date by setting the Range Part to Start or End. For single date selection (by default), the start and end date would be the same.
Click Confirm.
After this, you can display the actual data in UI elements by following the instruction here.

Customizing calendar

The Properties Panel can be used to customize the appearance and behavior of your widget.

Add padding

Here are the instructions on how to add padding.

Adjust the alignment

Here are the instructions on adjusting the alignment.

Changing the selected date color

To change the selected date color:

Select Calendar from the widget tree or the canvas area.
Move to the Properties panel and scroll down to the Calendar section.
Find the Color property, click on the box next to the already selected color, select the color, and then click Use Color or click on an already selected color and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.

Changing icon color

You can change the color of the icons displayed on the top right side of the calendar. to do that:

Select Calendar from the widget tree or the canvas area.
Move to the Properties panel and scroll down to the Calendar section.
Find the Icon Colors property, click on the box next to Unset, select the color, and then click Use Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.

Separate title and icons

By default, the calendar title (displaying the current month-year) and the icon for changing the month are positioned on the same row. If you wish to place them in separate rows, navigate to the Properties Panel > Calendar > and enable the Two-row Header option.

Showing week view

To display dates by week instead of month:

Select Calendar from the widget tree or the canvas area.
Move to the Properties panel and scroll down to the Calendar section.
Scroll down and turn on the Week View property.

Start week on Monday

By default, the week starts on Sunday. You can display the week from Monday using the start week on Monday property.

To show weeks starting from Monday:

Select Calendar from the widget tree or the canvas area.
Move to the Properties panel and scroll down to the Calendar section.
Scroll down and turn on the Start week on Monday property.

Changing row height

Changing the row height allows you to adjust the calendar height as per your design.

To change the row height:

Select Calendar from the widget tree or the canvas area.
Move to the Properties panel and scroll down to the Calendar section.
Find the Row Height property and enter the value.

Styling title

To change the style of the Title:

Select Calendar from the widget tree or the canvas area.
Move to the Properties panel and scroll down to the Title Style section. Click on it and open the section.
Now, you can find the instructions for styling the title here.

Styling day of the week

To customize the day name of the week:

Select Calendar from the widget tree or the canvas area.
Move to the Properties panel and scroll down to the Day of Week Style section. Click on it and open the section.
Now, you can find the instructions for styling here.

Styling dates

To style all dates inside the calendar:

Select Calendar from the widget tree or the canvas area.
Move to the Properties panel and scroll down to the Date Style section. Click on it and open the section.
Now, you can find the instructions for styling here.

Styling selected date

To style the selected date:

Select Calendar from the widget tree or the canvas area.
Move to the Properties panel and scroll down to the Selected Date Style section. Click on it and open the section.
Now, you can find the instructions for styling here.

Styling Inactive Dates

Inactive dates are ones that are not in the current month.

To style the Inactive dates:

Select Calendar from the widget tree or the canvas area.
Move to the Properties panel and scroll down to the Inactive Date Style section. Click on it and open the section.
Now, you can find the instructions for styling here.