A calendar shows one month at a time and lets a person pick dates from the grid. It comes in three shapes, one per named constructor: single for one day, multiple for a set of days, and range for a start-to-end span. Chevrons move between months, and the grid is fully operable from the keyboard.

import 'package:fossui/fossui.dart';

FossCalendar.single(
  selected: _day,
  onSelected: (day) => setState(() => _day = day),
);

Multiple days

FossCalendar.multiple tracks a Set<DateTime>. Each tap toggles a day, and onSelected fires with the next set.

FossCalendar.multiple(
  selected: _days,
  onSelected: (days) => setState(() => _days = days),
);

Date range

FossCalendar.range selects a span over two taps. The first tap sets the start, the second sets the end, and onSelected fires with a FossDateRange.

FossCalendar.range(
  selected: _range,
  onSelected: (range) => setState(() => _range = range),
);

Bounds

minDate and maxDate cap the selectable span, and isDateEnabled disables individual days such as weekends or holidays.

FossCalendar.single(
  selected: _day,
  minDate: DateTime.now(),
  isDateEnabled: (day) => day.weekday <= DateTime.friday,
  onSelected: (day) => setState(() => _day = day),
);

Month and week layout

Pass initialMonth to open on a specific month, or focusedMonth with onMonthChanged to control the shown month. firstDayOfWeek sets the leading column, and showOutsideDays toggles the trailing days from adjacent months.

FossCalendar.single(
  selected: _day,
  firstDayOfWeek: DateTime.sunday,
  showOutsideDays: false,
  onSelected: (day) => setState(() => _day = day),
);

One-off styling

Global retheming is the first choice, but a single calendar can override its resolved colors, type, and cell geometry with a FossCalendarStyle. Every field is optional and falls back to the theme.

FossCalendar.single(
  selected: _day,
  style: const FossCalendarStyle(
    dayRadius: 6,
  ),
  onSelected: (day) => setState(() => _day = day),
);

API

FossCalendar.single

Prop	Type	Default	Description
`selected`	`DateTime?`	required	The highlighted day, or `null` for none.
`onSelected`	`ValueChanged<DateTime>`	required	Fires with the tapped day.

FossCalendar.multiple

Prop	Type	Default	Description
`selected`	`Set<DateTime>`	required	The set of highlighted days.
`onSelected`	`ValueChanged<Set<DateTime>>`	required	Fires with the next set as each day toggles.

FossCalendar.range

Prop	Type	Default	Description
`selected`	`FossDateRange?`	required	The chosen span, or `null` for none.
`onSelected`	`ValueChanged<FossDateRange>`	required	Fires as the range is set over two taps.

Shared props

Prop	Type	Default	Description
`initialMonth`	`DateTime?`	`null`	Month shown first when uncontrolled.
`focusedMonth`	`DateTime?`	`null`	Controlled shown month; pair with `onMonthChanged`.
`onMonthChanged`	`ValueChanged<DateTime>?`	`null`	Fires when the shown month changes.
`firstDayOfWeek`	`int`	`DateTime.monday`	Leading column of the week (1 to 7).
`showOutsideDays`	`bool`	`true`	Whether adjacent-month days appear.
`minDate`	`DateTime?`	`null`	Earliest selectable day.
`maxDate`	`DateTime?`	`null`	Latest selectable day.
`isDateEnabled`	`bool Function(DateTime)?`	`null`	Disables individual days.
`semanticsLabel`	`String?`	`null`	Accessibility name for the grid.
`style`	`FossCalendarStyle?`	`null`	Per-instance overrides on the theme.

Live demo

Open the interactive gallery to try single, multiple, and range modes with live knobs.

Calendar

On this page