shadcn_ui-calendar

Installation
SKILL.md

Shadcn UI — Calendar

Instructions

ShadCalendar is a date field that lets users enter and edit dates. Modes: single date, multiple dates (ShadCalendar.multiple), or range (ShadCalendar.range). Use fromMonth/toMonth to limit range; captionLayout for dropdown months/years.

Single

final today = DateTime.now();

ShadCalendar(
  selected: today,
  fromMonth: DateTime(today.year - 1),
  toMonth: DateTime(today.year, 12),
)

Multiple

ShadCalendar.multiple(
  numberOfMonths: 2,
  fromMonth: DateTime(today.year),
  toMonth: DateTime(today.year + 1, 12),
  min: 5,
  max: 10,
)

Range

const ShadCalendar.range(
  min: 2,
  max: 5,
)

Caption layout

ShadCalendar(
  captionLayout: ShadCalendarCaptionLayout.dropdownMonths,
);

ShadCalendar(
  captionLayout: ShadCalendarCaptionLayout.dropdownYears,
);

Options

  • hideNavigation: true — Hide month navigation.
  • showWeekNumbers: true — Show week numbers.
  • showOutsideDays: false — Hide days from adjacent months.
  • fixedWeeks: true — Fixed number of rows.
  • hideWeekdayNames: true — Hide weekday headers.
Related skills

More from serverpod/skills-registry

Installs
6
GitHub Stars
8
First Seen
Apr 13, 2026