The calendar supports swipe gestures on mobile platforms, allowing users to navigate between pages by swiping left or right.
A FCalendarController
controls the date selection behavior, including single date, multiple dates, and date range selection.
FCalendar and all FCalendarControllers return DateTimes in UTC timezone, truncated to the nearest day.
Hold Shift while scrolling to navigate through dates on desktop and web.
FCalendar(
control: FCalendarControl.managedDate(),
start: DateTime(2000),
end: DateTime(2040),
);CLI
To generate and customize this style:
dart run forui style create calendarUsage
FCalendar(...)
FCalendar(
control: FCalendarControl.managedDate(
controller: FCalendarController.date(...),
initial: DateTime(2024, 9, 13),
selectable: (date) => allowedDates.contains(date),
toggleable: true,
truncateAndStripTimezone: true,
onChange: (date) {},
),
style: (style) => style.copyWith(...),
dayBuilder: (context, data, child) => child!,
start: DateTime(2024),
end: DateTime(2030),
today: DateTime(2024, 7, 14),
initialType: FCalendarPickerType.yearMonth,
initialMonth: DateTime(2024, 9),
onMonthChange: (date) {},
onPress: (date) {},
onLongPress: (date) {},
);Examples
Single Date
FCalendar(
control: FCalendarControl.managedDate(),
start: DateTime(2000),
end: DateTime(2040),
);Multiple Dates with Initial Selections
FCalendar(
control: FCalendarControl.managedDates(
initial: {DateTime(2024, 7, 17), DateTime(2024, 7, 20)},
),
start: DateTime(2000),
today: DateTime(2024, 7, 15),
end: DateTime(2030),
);Unselectable Dates
FCalendar(
control: FCalendarControl.managedDates(
initial: {DateTime(2024, 7, 17), DateTime(2024, 7, 20)},
selectable: (date) => !{DateTime.utc(2024, 7, 18), DateTime.utc(2024, 7, 19)}.contains(date),
),
start: DateTime(2000),
today: DateTime(2024, 7, 15),
end: DateTime(2030),
);Range Selection with Initial Range
FCalendar(
control: FCalendarControl.managedRange(
initial: (DateTime(2024, 7, 17), DateTime(2024, 7, 20)),
),
start: DateTime(2000),
today: DateTime(2024, 7, 15),
end: DateTime(2030),
);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.