Comment on page
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.
.png?alt=media&token=32d6e077-38f7-4a3f-b891-847ca9f52e5f)
Calendar widget
To add the Calendar widget to your project:
- 1.Drag the Calendar widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
- 2.On running the app, the calendar widget shows today's date by default. To set a different date, follow the instructions as below.
- 3.Move to the Properties Panel and scroll down to the Calendar section.
- 4.Find the Initial Date property, click Unset, and set the date from the variable (app state, API, etc.).

Adding calendar
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:

Showing selected date
The steps to show the selected date in the Text widget are as follows:
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).
It should look something like this:

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:
- 1.Select the Calendar widget from the widget tree or canvas area.
- 2.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.
- 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.

Saving selected date in app state variable
To show the selected date in the Text widget:
- 1.Select the Text, move to the properties panel, and click Set from Variable.
- 2.Select Source as App State and Available Options to the App State Variable name.
- 3.(Optional) Set the Timestamp Format to display the date in a specific format.
- 4.(Optional) Set the default value if you wish to.
- 5.Click Confirm.

Showing date in Text widget from a app state variable
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:

Using a calendar to filter the list
The steps to use the calendar to filter the list are as follows:
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.
You can create a Firestore collection with a date field like the one below:

Sample Firestore collection
Your UI must include at least two calendars and ListView widgets. Here's how you add it:
- 1.Add the Calendar widget. To provide a better user experience, you can switch to the week view. See how to do it here.
- 2.Add the ListView and show the data from the Firestore collection.

Building UI
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:
- 1.Select ListView from the widget tree or the canvas area.
- 2.Click on the Backend Query tab (on the right side of your screen).
- 3.
- 4.Scroll down and click on the + Filter button at the bottom
- 5.Find the Field Name, click on the Unset, and select the field on which you would like to apply the filter.
- 6.Find the Relation dropdown, click on the Unset and choose the relation as Equal To.
- 7.Set the Value Source to From Variable.
- 8.Set the Source to Widget State.
- 9.Set the Available Options to the calendarSelectedDay.
- 10.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.
- 11.Click Confirm.
- 12.

Applying date filter on backend query
To change the selected date color:
- 1.Select Calendar from the widget tree or the canvas area.
- 2.Move to the Properties panel and scroll down to the Calendar section.
- 3.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 the selected date color
You can change the color of the icons displayed on the top right side of the calendar. to do that:
- 1.Select Calendar from the widget tree or the canvas area.
- 2.Move to the Properties panel and scroll down to the Calendar section.
- 3.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.

Changing icon color
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.

Separate title and icons
To display dates by week instead of month:
- 1.Select Calendar from the widget tree or the canvas area.
- 2.Move to the Properties panel and scroll down to the Calendar section.
- 3.Scroll down and turn on the Week View property.

Enabling week view
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:
- 1.Select Calendar from the widget tree or the canvas area.
- 2.Move to the Properties panel and scroll down to the Calendar section.
- 3.Scroll down and turn on the Start week on Monday property.

Start week on Monday
Changing the row height allows you to adjust the calendar height as per your design.
To change the row height:
- 1.Select Calendar from the widget tree or the canvas area.
- 2.Move to the Properties panel and scroll down to the Calendar section.
- 3.Find the Row Height property and enter the value.

Changing row height
To change the style of the Title:
- 1.Select Calendar from the widget tree or the canvas area.
- 2.Move to the Properties panel and scroll down to the Title Style section. Click on it and open the section.
- 3.

Styling Title
To customize the day name of the week:
- 1.Select Calendar from the widget tree or the canvas area.
- 2.Move to the Properties panel and scroll down to the Day of Week Style section. Click on it and open the section.
- 3.

Styling day of the week
To style all dates inside the calendar:
- 1.Select Calendar from the widget tree or the canvas area.
- 2.Move to the Properties panel and scroll down to the Date Style section. Click on it and open the section.
- 3.

Styling Dates
To style the selected date:
- 1.Select Calendar from the widget tree or the canvas area.
- 2.Move to the Properties panel and scroll down to the Selected Date Style section. Click on it and open the section.
- 3.

Styling selected date
Inactive dates are ones that are not in the current month.
To style the Inactive dates:
- 1.Select Calendar from the widget tree or the canvas area.
- 2.Move to the Properties panel and scroll down to the Inactive Date Style section. Click on it and open the section.
- 3.

Styling Inactive Dates
Last modified 1mo ago