Skip to Content
Forui 0.12.0 is released 🎉
DocumentationData PresentationCalendar

Calendar

A calendar component for selecting and editing dates.

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.

API Reference

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

CLI

To generate and customize this style:

dart run forui style create calendar

Usage

FCalendar(...)

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

Last updated on
BadgeCard