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.

Usage

FCalendar(...)

FCalendar(
  controller: FCalendarController.date(
    initialSelection: DateTime.utc(2024, 9, 13),
    selectable: (date) => allowedDates.contains(date),
  ),
  start: DateTime.utc(2024),
  end: DateTime.utc(2030),
  today: DateTime.utc(2024, 7, 14),
  initialType = FCalendarPickerType.yearMonth,
  initialMonth = DateTime.utc(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