Calendar

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.

1@override
2Widget build(BuildContext _) => FCalendar(
3  control: .managedDate(),
4  start: DateTime(2000),
5  end: DateTime(2040),
6);
7

CLI

To generate and customize this style:

dart run forui style create calendar

Usage

`FCalendar(...)`

1FCalendar(
2  style: const .delta(padding: .zero),
3  start: .utc(1900),
4  end: .utc(2100),
5  today: .now(),
6  initialMonth: .now(),
7  initialType: .day,
8)

Examples

Single Date

1@override
2Widget build(BuildContext _) => FCalendar(
3  control: .managedDate(),
4  start: DateTime(2000),
5  end: DateTime(2040),
6);
7

Multiple Dates with Initial Selections

1@override
2Widget build(BuildContext _) => FCalendar(
3  control: .managedDates(
4    initial: {DateTime(2024, 7, 17), DateTime(2024, 7, 20)},
5  ),
6  start: DateTime(2000),
7  today: DateTime(2024, 7, 15),
8  end: DateTime(2030),
9);
10

Unselectable Dates

1@override
2Widget build(BuildContext _) => FCalendar(
3  control: .managedDates(
4    initial: {DateTime(2024, 7, 17), DateTime(2024, 7, 20)},
5    selectable: (date) =>
6        !{DateTime.utc(2024, 7, 18), DateTime.utc(2024, 7, 19)}.contains(date),
7  ),
8  start: DateTime(2000),
9  today: DateTime(2024, 7, 15),
10  end: DateTime(2030),
11);
12

Range Selection with Initial Range

1@override
2Widget build(BuildContext _) => FCalendar(
3  control: .managedRange(
4    initial: (DateTime(2024, 7, 17), DateTime(2024, 7, 20)),
5  ),
6  start: DateTime(2000),
7  today: DateTime(2024, 7, 15),
8  end: DateTime(2030),
9);
10

On this page