The calendar supports swipe gestures on mobile platforms, allowing users to navigate between pages by swiping left or right.
A FCalendarControl
controls navigation, while a FDateSelectionControl
controls the selection behavior (single date, multiple dates, or a range).
FCalendar, FDateSelectionController, and all FCalendarControllers return DateTimes in UTC timezone, truncated
to the nearest day.
CLI
To generate a specific style for customization:
dart run forui style create calendarUsage
FCalendar.grid(...)
1FCalendar.grid(2 style: const .delta(padding: .value(.zero)),3 fixedWeeks: false,4)FCalendar.splitGrid(...)
1FCalendar.splitGrid(2 style: const .delta(padding: .value(.zero)),3 fixedWeeks: false,4)FCalendar.wheel(...)
1FCalendar.wheel(2 style: const .delta(padding: .value(.zero)),3 fixedWeeks: false,4)Examples
Fixed Weeks
By default, the day grid adjusts its height to each month's 4 — 6 weeks. Set fixedWeeks: true to keep the calendar's
height constant.
Modes
Split Grid
Month-Year Wheel
Selection
Single Date
Multiple Dates
Range
.managedRange() always holds a complete range, unlike .managedOpenRange() which leaves one bound open until the
user selects it.
Open Range
.managedOpenRange() leaves one bound open until the user selects it, unlike .managedRange() which always holds a
complete range.
Display Only
Pass selectionControl: .none() to render a read-only calendar that selects nothing.
Unselectable Dates
Custom Footer with Presets
Badge
A badge draws attention to specific information, such as labels and counts. Use badges to display status, notifications, or small pieces of information that need to stand out.
Card
A flexible container component that displays content with an optional title, subtitle, and child widget. Cards are commonly used to group related information and actions.