Calendar

The Calendar widget is used to display and interact with dates in a structured, month-based or week-based view. It’s ideal for anything related to scheduling, bookings, events, reminders, or date selection inside your app.

Adding a Calendar Widget

The Calendar widget is located in the Form Elements section of the Widget Palette. Once added, you can configure its properties from the Widget Properties Panel.

The Calendar widget provides intuitive date selection and event visualization.

Core Concepts

To keep the Calendar powerful but flexible, its properties are grouped into 4 major sections in the dashboard:

1. Calendar Style

   • Core calendar functionality and behavior

   • Date range configuration, format, and visual styling

   • Includes selection modes, highlighting, and layout options

2. Headers Style

   • Style the top header of the calendar

   • Month & year display, navigation controls, and header appearance

   • Controls text styling, alignment, colors, and spacing

3. Days of Week Style

   • Style the row that shows the days of the week

   • Weekday labels, weekend styling, and row appearance

   • Controls text styles, colors, borders, and layout

4. Action

   • Event handling for date selections

   • Trigger actions when users select dates or ranges

These groups make it easier to customize the entire calendar to match your app’s design system while keeping functionality consistent.

Properties

Calendar Style

Property	Description
firstDay	The first date that can be selected in the calendar.
lastDay	The last date that can be selected in the calendar.
currentDay	The current date, which is often highlighted.
focusedDay	The date that is initially focused when the calendar is displayed.
startingDayOfWeek	The day of the week to start the calendar with (sunday, monday, etc.).
calendarFormat	The format of the calendar (month, twoWeeks, week).
rangeSelectionMode	The selection mode (singleDate, range).
rangeStartDateInitialValue	The initial value for the start date in range selection mode.
rangeEndDateInitialValue	The initial value for the end date in range selection mode.
rangeHighlightScale	The scale of the highlight for a selected date range.
rangeHighlightColor	The color of the highlight for a selected date range.
outsideDaysVisible	If true, days from the previous and next months will be visible.
isTodayHighlighted	If true, the current date will be highlighted.
tableBorderColor	The color of the border around the calendar table.
tableBorderWidth	The width of the border around the calendar table.
tablePadding	The padding around the calendar table.
rowHeight	The height of each row in the calendar.
pageJumpingEnabled	If true, allows the user to jump to a specific month or year.
shouldFillViewport	If true, the calendar will fill the entire viewport.
weekNumbersVisible	If true, week numbers will be displayed.

Headers Style

Property	Description
headersVisible	If true, the header with the month and year will be visible.
shape	The shape of the header.
color	The background color of the header.
borderColor	The border color of the header.
borderWidth	The border width of the header.
headerBorderRadius	The border radius of the header.
headerPadding	The padding around the header.
centerTitle	If true, the header title will be centered.
textStyle	The TextStyle for the header title.
leftChevronPadding	The padding around the left chevron icon for navigating between months.
rightChevronPadding	The padding around the right chevron icon for navigating between months.

Days of Week Style

Property	Description
daysOfWeekVisible	If true, the row with the days of the week will be visible.
daysOfWeekHeight	The height of the days of the week row.
weekdayTextStyle	The TextStyle for the weekday labels.
weekendTextStyle	The TextStyle for the weekend labels.
shape	The shape of the days of the week row.
color	The background color of the days of the week row.
borderColor	The border color of the days of the week row.
borderWidth	The border width of the days of the week row.
daysOfWeekShapeBorderRadius	The border radius of the days of the week row shape.

Action

Property	Description
onRangeSelected	Action triggered when a date range is selected by the user. Receives an object with selectedRangeStart (ISO 8601 string of the start date), selectedRangeEnd (ISO 8601 string of the end date), and focusedDay (ISO 8601 string of the currently focused day) for processing the date range selection.

Default Properties

The Calendar widget supports the following sections of Default Properties:

Layout

• width

• height

• padding

• margin

Alignment

• align

Visible

• visible

Use Cases

You’d typically use a Calendar widget for:

• Bookings & Appointments

  • Booking a salon, doctor, class, or event slot

  • Selecting check-in/check-out dates for travel or hotels

• Events & Schedules

  • Showing upcoming events on specific days

  • Highlighting days with tasks, deadlines, or meetings

• Reminders & Tracking

  • Habit trackers, streaks, attendance

  • Marking completed days, missed days, or goals

• Forms & Input

  • Choosing a date of birth

  • Picking due dates or target dates

Basically, whenever the user needs to see dates visually and select or understand patterns over time, the Calendar widget fits.