Calendar

The Calendar widget allows users to view and select dates, making it ideal for booking appointments, managing schedules, displaying events, or filtering records by date.

Adding a Calendar Widget

To add and configure a calendar:

1. Add the Calendar widget from the Base Elements section of the Widget Palette.
2. In the Calendar section, choose a Style: Modern or Material.
3. Set Selection to Single Date or Date Range.
4. Set the initial value for your selection type:
   • For Single Date, use Initial Date.
   • For Date Range, use Initial Range Start and Initial Range End.

For example, use Single Date for an appointment picker or Date Range for a hotel stay. You can set the initial date or range from app state, backend data, an API response, or another dynamic source.

Using the Selected Date

Use the Calendar's widget state to read a selected date, and its event to run actions when a date is selected:

• calendarSelectedDay widget state: Provides the selected date. Choose Set from Variable > Widget State > calendarSelectedDay to use it in a property or action.
• On Date Selected event: Runs when the user selects a date. Configure it from the Calendar widget's Actions tab.

For example, use On Date Selected to update a list of available appointment times for the date in calendarSelectedDay.

tip

For range selection, calendarSelectedDay provides start and end values. Choose Start or End under Range Part when using the value. Both values return the same date for single-date selection.

Customizing the Calendar Widget

Select the Calendar widget and use the Calendar section to customize its appearance and behavior:

Layout and Navigation

• Icon Colors: Sets the color of the calendar navigation icons.
• Week View: Shows one week at a time instead of the full month.
• Start week on Monday: Starts each week on Monday instead of Sunday.
• Row Height: Sets the size of each date cell. In the Modern style, date cells are square, so this value sets both their width and height.
• Header: Choose Label to show the month and year as text, or Dropdown to let users jump to another month or year.
• Months Shown: Sets how many months appear side by side. Showing multiple months can make date-range selection easier.
• Cell Radius: Sets the rounding of date cells. The border radius in Selected Date Style overrides it for the selected date; the border radius in Range Style overrides it for the ends of a selected range.
• Show Outside Days: Fills the first and last weeks with dates from the previous and next months.
• Fixed Weeks: Always shows six weeks so the calendar stays the same height when users move between months.
• Show Week Numbers: Shows the week-of-year number beside each week.
• Show Navigation: Shows buttons for moving to the previous or next month. Turn it off if actions control the displayed month instead.
• Booked Dates: Provide a list of DateTime values for dates that cannot be selected, such as reserved days. For example, a calendar could show 14, 15, 16, 17 when 15 and 16 are booked.

Date Styles

• Title Style: Customizes the month and year title.
• Day of Week Style: Customizes the weekday labels shown above the dates.
• Date Style: Customizes the appearance of regular dates.
• Selected Date Style: Customizes the appearance of the currently selected date.
• Range Style: Customizes the appearance of a selected date range, including the rounding at its ends.
• Today Date Style: Customizes the appearance of today's date.
• Booked Date Style: Customizes the appearance of dates provided under Booked Dates.
• Inactive Date Style: Customizes inactive dates, such as dates outside the currently displayed month.