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 Selection
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.