Calendar

A date field component that allows users to enter and edit date.

The calendar pages are designed to be navigable through swipe gestures on mobile platforms, allowing left and right swipes to transition between pages.

A FCalendarController is used to customize the date selection behavior.

FCalendar and all FCalendarControllers return DateTimes in UTC timezone, truncated to the nearest day.

Usage

FCalendar(...)

FCalendar(
  controller: FCalendarController.date(
    initialSelection: DateTime(2024, 9, 13),
    selectable: (date) => allowedDates.contains(date),
  ),
  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) => print(date),
  onPress: (date) => print(date),
  onLongPress: (date) => print(date),
);

Examples

Single Date

Multiple Dates with Initial Selections

Unselectable Dates

Range Selection with Initial Range