ShadCalendar class

A customizable calendar widget for selecting dates or date ranges.

The ShadCalendar widget supports single date selection, multiple date selection, or date range selection through its variants. It offers extensive customization for appearance, navigation, and behavior, integrating with ShadTheme for styling. Use named constructors like ShadCalendar.multiple or ShadCalendar.range for specific selection modes, or ShadCalendar.raw for full control.

Inheritance
Available extensions

Constructors

ShadCalendar({Key? key, DateTime? selected, ValueChanged<DateTime?>? onChanged, bool? showOutsideDays, DateTime? initialMonth, String formatMonthYear(DateTime date)?, String formatMonth(DateTime date)?, String formatYear(DateTime date)?, String formatWeekday(DateTime date)?, bool? showWeekNumbers, int? weekStartsOn, bool? fixedWeeks, bool? hideWeekdayNames, int numberOfMonths = 1, DateTime? fromMonth, DateTime? toMonth, ValueChanged<DateTime>? onMonthChanged, bool reverseMonths = false, bool selectableDayPredicate(DateTime day)?, ShadCalendarCaptionLayout? captionLayout, bool? hideNavigation, double? yearSelectorMinWidth, double? monthSelectorMinWidth, EdgeInsetsGeometry? yearSelectorPadding, EdgeInsetsGeometry? monthSelectorPadding, double? navigationButtonSize, double? navigationButtonIconSize, IconData? backNavigationButtonIconData, IconData? forwardNavigationButtonIconData, EdgeInsetsGeometry? navigationButtonPadding, double? navigationButtonDisabledOpacity, ShadDecoration? decoration, double? spacingBetweenMonths, double? runSpacingBetweenMonths, BoxConstraints? monthConstraints, double? headerHeight, EdgeInsetsGeometry? headerPadding, double? captionLayoutGap, TextStyle? headerTextStyle, EdgeInsetsGeometry? weekdaysPadding, TextStyle? weekdaysTextStyle, TextAlign? weekdaysTextAlign, String? weekNumbersHeaderText, TextStyle? weekNumbersHeaderTextStyle, TextStyle? weekNumbersTextStyle, TextAlign? weekNumbersTextAlign, double? dayButtonSize, double? dayButtonOutsideMonthOpacity, EdgeInsetsGeometry? dayButtonPadding, ShadDecoration? dayButtonDecoration, TextStyle? selectedDayButtonTextStyle, TextStyle? insideRangeDayButtonTextStyle, TextStyle? dayButtonTextStyle, ShadButtonVariant? dayButtonVariant, ShadButtonVariant? selectedDayButtonVariant, ShadButtonVariant? insideRangeDayButtonVariant, ShadButtonVariant? todayButtonVariant, double? gridMainAxisSpacing, double? gridCrossAxisSpacing, TextStyle? dayButtonOutsideMonthTextStyle, ShadButtonVariant? dayButtonOutsideMonthVariant, ShadButtonVariant? selectedDayButtonOusideMonthVariant, bool? allowDeselection, Object? groupId, String dropdownFormatMonth(DateTime date)?, String dropdownFormatYear(DateTime date)?})
Creates a single-date selection calendar widget.
const
ShadCalendar.multiple({Key? key, List<DateTime>? selected, ValueChanged<List<DateTime>>? onChanged, bool? showOutsideDays, DateTime? initialMonth, String formatMonthYear(DateTime date)?, String formatMonth(DateTime date)?, String formatYear(DateTime date)?, String formatWeekday(DateTime date)?, bool? showWeekNumbers, int? weekStartsOn, bool? fixedWeeks, bool? hideWeekdayNames, int numberOfMonths = 1, DateTime? fromMonth, DateTime? toMonth, ValueChanged<DateTime>? onMonthChanged, bool reverseMonths = false, int? min, int? max, bool selectableDayPredicate(DateTime day)?, ShadCalendarCaptionLayout? captionLayout, bool? hideNavigation, double? yearSelectorMinWidth, double? monthSelectorMinWidth, EdgeInsetsGeometry? yearSelectorPadding, EdgeInsetsGeometry? monthSelectorPadding, double? navigationButtonSize, double? navigationButtonIconSize, IconData? backNavigationButtonIconData, IconData? forwardNavigationButtonIconData, EdgeInsetsGeometry? navigationButtonPadding, double? navigationButtonDisabledOpacity, ShadDecoration? decoration, double? spacingBetweenMonths, double? runSpacingBetweenMonths, BoxConstraints? monthConstraints, double? headerHeight, EdgeInsetsGeometry? headerPadding, double? captionLayoutGap, TextStyle? headerTextStyle, EdgeInsetsGeometry? weekdaysPadding, TextStyle? weekdaysTextStyle, TextAlign? weekdaysTextAlign, String? weekNumbersHeaderText, TextStyle? weekNumbersHeaderTextStyle, TextStyle? weekNumbersTextStyle, TextAlign? weekNumbersTextAlign, double? dayButtonSize, double? dayButtonOutsideMonthOpacity, EdgeInsetsGeometry? dayButtonPadding, ShadDecoration? dayButtonDecoration, TextStyle? selectedDayButtonTextStyle, TextStyle? insideRangeDayButtonTextStyle, TextStyle? dayButtonTextStyle, ShadButtonVariant? dayButtonVariant, ShadButtonVariant? selectedDayButtonVariant, ShadButtonVariant? insideRangeDayButtonVariant, ShadButtonVariant? todayButtonVariant, double? gridMainAxisSpacing, double? gridCrossAxisSpacing, TextStyle? dayButtonOutsideMonthTextStyle, ShadButtonVariant? dayButtonOutsideMonthVariant, ShadButtonVariant? selectedDayButtonOusideMonthVariant, Object? groupId, String dropdownFormatMonth(DateTime date)?, String dropdownFormatYear(DateTime date)?})
Creates a multiple-date selection calendar widget.
const
ShadCalendar.range({Key? key, ShadDateTimeRange? selected, ValueChanged<ShadDateTimeRange?>? onChanged, bool? showOutsideDays, DateTime? initialMonth, String formatMonthYear(DateTime date)?, String formatMonth(DateTime date)?, String formatYear(DateTime date)?, String formatWeekday(DateTime date)?, bool? showWeekNumbers = false, int? weekStartsOn, bool? fixedWeeks, bool? hideWeekdayNames, int numberOfMonths = 1, DateTime? fromMonth, DateTime? toMonth, ValueChanged<DateTime>? onMonthChanged, bool reverseMonths = false, int? min, int? max, bool selectableDayPredicate(DateTime day)?, ShadCalendarCaptionLayout? captionLayout, bool? hideNavigation, double? yearSelectorMinWidth, double? monthSelectorMinWidth, EdgeInsetsGeometry? yearSelectorPadding, EdgeInsetsGeometry? monthSelectorPadding, double? navigationButtonSize, double? navigationButtonIconSize, IconData? backNavigationButtonIconData, IconData? forwardNavigationButtonIconData, EdgeInsetsGeometry? navigationButtonPadding, double? navigationButtonDisabledOpacity, ShadDecoration? decoration, double? spacingBetweenMonths, double? runSpacingBetweenMonths, BoxConstraints? monthConstraints, double? headerHeight, EdgeInsetsGeometry? headerPadding, double? captionLayoutGap, TextStyle? headerTextStyle, EdgeInsetsGeometry? weekdaysPadding, TextStyle? weekdaysTextStyle, TextAlign? weekdaysTextAlign, String? weekNumbersHeaderText, TextStyle? weekNumbersHeaderTextStyle, TextStyle? weekNumbersTextStyle, TextAlign? weekNumbersTextAlign, double? dayButtonSize, double? dayButtonOutsideMonthOpacity, EdgeInsetsGeometry? dayButtonPadding, ShadDecoration? dayButtonDecoration, TextStyle? selectedDayButtonTextStyle, TextStyle? insideRangeDayButtonTextStyle, TextStyle? dayButtonTextStyle, ShadButtonVariant? dayButtonVariant, ShadButtonVariant? selectedDayButtonVariant, ShadButtonVariant? insideRangeDayButtonVariant, ShadButtonVariant? todayButtonVariant, double? gridMainAxisSpacing, double? gridCrossAxisSpacing, TextStyle? dayButtonOutsideMonthTextStyle, ShadButtonVariant? dayButtonOutsideMonthVariant, ShadButtonVariant? selectedDayButtonOusideMonthVariant, bool? allowDeselection, Object? groupId, String dropdownFormatMonth(DateTime date)?, String dropdownFormatYear(DateTime date)?})
Creates a date range selection calendar widget.
const
ShadCalendar.raw({Key? key, required ShadCalendarVariant variant, DateTime? selected, List<DateTime>? multipleSelected, ValueChanged<DateTime?>? onChanged, ValueChanged<List<DateTime>>? onMultipleChanged, bool? showOutsideDays, DateTime? initialMonth, String formatMonthYear(DateTime date)?, String formatMonth(DateTime date)?, String formatYear(DateTime date)?, String formatWeekday(DateTime date)?, bool? showWeekNumbers, int? weekStartsOn, bool? fixedWeeks, bool? hideWeekdayNames, int numberOfMonths = 1, DateTime? fromMonth, DateTime? toMonth, ValueChanged<DateTime>? onMonthChanged, bool reverseMonths = false, int? min, int? max, bool selectableDayPredicate(DateTime day)?, ValueChanged<ShadDateTimeRange?>? onRangeChanged, ShadDateTimeRange? selectedRange, ShadCalendarCaptionLayout? captionLayout, bool? hideNavigation, double? yearSelectorMinWidth, double? monthSelectorMinWidth, EdgeInsetsGeometry? yearSelectorPadding, EdgeInsetsGeometry? monthSelectorPadding, double? navigationButtonSize, double? navigationButtonIconSize, IconData? backNavigationButtonIconData, IconData? forwardNavigationButtonIconData, EdgeInsetsGeometry? navigationButtonPadding, double? navigationButtonDisabledOpacity, ShadDecoration? decoration, double? spacingBetweenMonths, double? runSpacingBetweenMonths, BoxConstraints? monthConstraints, double? headerHeight, EdgeInsetsGeometry? headerPadding, double? captionLayoutGap, TextStyle? headerTextStyle, EdgeInsetsGeometry? weekdaysPadding, TextStyle? weekdaysTextStyle, TextAlign? weekdaysTextAlign, String? weekNumbersHeaderText, TextStyle? weekNumbersHeaderTextStyle, TextStyle? weekNumbersTextStyle, TextAlign? weekNumbersTextAlign, double? dayButtonSize, double? dayButtonOutsideMonthOpacity, EdgeInsetsGeometry? dayButtonPadding, ShadDecoration? dayButtonDecoration, TextStyle? selectedDayButtonTextStyle, TextStyle? insideRangeDayButtonTextStyle, TextStyle? dayButtonTextStyle, ShadButtonVariant? dayButtonVariant, ShadButtonVariant? selectedDayButtonVariant, ShadButtonVariant? insideRangeDayButtonVariant, ShadButtonVariant? todayButtonVariant, double? gridMainAxisSpacing, double? gridCrossAxisSpacing, TextStyle? dayButtonOutsideMonthTextStyle, ShadButtonVariant? dayButtonOutsideMonthVariant, ShadButtonVariant? selectedDayButtonOusideMonthVariant, bool? allowDeselection, Object? groupId, String dropdownFormatMonth(DateTime date)?, String dropdownFormatYear(DateTime date)?})
Creates a calendar widget with a specified variant, allowing full customization.
const

Properties

allowDeselection → bool?
Whether to allow deselection of the selected date, defaults to false.
final
backNavigationButtonIconData → IconData?
The back navigation button src, defaults to LucideIcons.chevronLeft
final
captionLayout → ShadCalendarCaptionLayout?
The layout of the caption, defaults to ShadCalendarCaptionLayout.label.
final
captionLayoutGap → double?
The gap between the caption layout elements, defaults to 8
final
dayButtonDecoration → ShadDecoration?
The decoration of the day buttons, defaults to
final
dayButtonOutsideMonthOpacity → double?
The opacity of the day buttons outside the month, defaults to .5
final
dayButtonOutsideMonthTextStyle → TextStyle?
The text style of the day buttons outside the month, defaults to textTheme.muted
final
dayButtonOutsideMonthVariant → ShadButtonVariant?
The variant of the day buttons outside the month, defaults to ShadButtonVariant.ghost
final
dayButtonPadding → EdgeInsetsGeometry?
The padding of the day buttons, defaults to EdgeInsets.zero
final
dayButtonSize → double?
The size of the day buttons, defaults to 36
final
dayButtonTextStyle → TextStyle?
The text style of the day button, defaults to
final
dayButtonVariant → ShadButtonVariant?
The variant of the day button, defaults to ShadButtonVariant.ghost
final
decoration → ShadDecoration?
The decoration of the calendar, defaults to
final
The format to use for the month in dropdowns, defaults to 'MMM'.
final
The format to use for the year in dropdowns, defaults to 'y'.
final
fixedWeeks → bool?
Display six weeks per months, regardless the month’s number of weeks.
final
formatMonth → String Function(DateTime date)?
The format to use for the month, defaults to 'LLLL'.
final
formatMonthYear → String Function(DateTime date)?
The format to use for the month, defaults to 'LLLL y'.
final
formatWeekday → String Function(DateTime date)?
The format to use for the weekday, defaults to 'EE'.
final
formatYear → String Function(DateTime date)?
The format to use for the year, defaults to 'y'.
final
forwardNavigationButtonIconData → IconData?
The forward navigation button src, defaults to LucideIcons.chevronRight
final
fromMonth → DateTime?
The month to start the calendar from, defaults to null.
final
gridCrossAxisSpacing → double?
The cross axis spacing of the grid, defaults to 0
final
gridMainAxisSpacing → double?
The main axis spacing of the grid, defaults to 8
final
groupId → Object?
The group id of the popover, defaults to UniqueKey().
final
hashCode → int
The hash code for this object.
no setterinherited
headerHeight → double?
The height of the header, defaults to 38
final
headerPadding → EdgeInsetsGeometry?
The padding of the header, defaults to EdgeInsets.only(bottom: 16)
final
headerTextStyle → TextStyle?
The text style of the header, defaults to effectiveTextTheme.small
final
hideNavigation → bool?
Whether to hide the navigation buttons, defaults to false.
final
hideWeekdayNames → bool?
Hide the month’s head displaying the weekday names, defaults to false.
final
initialMonth → DateTime?
The month to show by default, defaults to the current month.
final
insideRangeDayButtonTextStyle → TextStyle?
The text style of the inside range day button, defaults to
final
insideRangeDayButtonVariant → ShadButtonVariant?
The variant of the inside range day button, defaults to ShadButtonVariant.secondary
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
max → int?
The maximum amount of days that can be selected.
final
min → int?
The minimum amount of days that can be selected.
final
monthConstraints → BoxConstraints?
The month constraints, defaults to BoxConstraints(maxWidth: 252) or BoxConstraints(maxWidth: 310) depending on the hideNavigation and captionLayout values.
final
monthSelectorMinWidth → double?
The minimum width of the month selector, defaults to 64
final
monthSelectorPadding → EdgeInsetsGeometry?
The padding of the month selector, defaults to EdgeInsets.symmetric(horizontal: 8, vertical: 4)
final
multipleSelected → List<DateTime>?
The dates that are currently selected, defaults to null.
final
The opacity of the navigation button when disabled, defaults to .5
final
The navigation button icon size, defaults to 16
final
The padding of the navigation button, defaults to EdgeInsets.zero
final
The navigation button size, defaults to 28
final
numberOfMonths → int
The number of displayed months, defaults to 1.
final
onChanged → ValueChanged<DateTime?>?
Called when the user selects a date.
final
onMonthChanged → ValueChanged<DateTime>?
A callback that is called when the month changes.
final
onMultipleChanged → ValueChanged<List<DateTime>>?
Called when the user selects multiple dates.
final
onRangeChanged → ValueChanged<ShadDateTimeRange?>?
Called when the user selects a range of dates.
final
reverseMonths → bool
Whether to reverse the months, defaults to false.
final
runSpacingBetweenMonths → double?
The run spacing between months, defaults to 16
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
selectableDayPredicate → bool Function(DateTime day)?
A function that determines whether a day is selectable.
final
selected → DateTime?
The date that is currently selected, defaults to null.
final
selectedDayButtonOusideMonthVariant → ShadButtonVariant?
The variant of the selected day buttons outside the month, defaults to ShadButtonVariant.secondary
final
selectedDayButtonTextStyle → TextStyle?
The text style of the selected day button, defaults to
final
selectedDayButtonVariant → ShadButtonVariant?
The variant of the selected day button, defaults to ShadButtonVariant.primary
final
selectedRange → ShadDateTimeRange?
The range of dates that are currently selected, defaults to null.
final
showOutsideDays → bool?
Whether to show days outside the current month, defaults to true.
final
showWeekNumbers → bool?
Whether to show week numbers, defaults to false.
final
spacingBetweenMonths → double?
The spacing between months, defaults to 16
final
todayButtonVariant → ShadButtonVariant?
The variant of the today button, defaults to ShadButtonVariant.secondary
final
toMonth → DateTime?
The month to end the calendar with, defaults to null.
final
variant → ShadCalendarVariant
The variant of the calendar to use.
final
weekdaysPadding → EdgeInsetsGeometry?
The padding of the weekdays, defaults to EdgeInsets.only(bottom: 8)
final
weekdaysTextAlign → TextAlign?
The text align of the weekdays, defaults to TextAlign.center
final
weekdaysTextStyle → TextStyle?
The text style of the weekdays, defaults to textTheme.muted.copyWith(fontSize: 12.8)
final
weekNumbersHeaderText → String?
The header text of the week numbers, defaults to #
final
weekNumbersHeaderTextStyle → TextStyle?
The header text style of the week numbers, defaults to textTheme.muted.copyWith(fontSize: 12.8)
final
weekNumbersTextAlign → TextAlign?
The text align of the week numbers, defaults to TextAlign.center
final
weekNumbersTextStyle → TextStyle?
The text style of the week numbers, defaults to textTheme.muted.copyWith(fontSize: 12.8)
final
weekStartsOn → int?
Which day of the week is the first day of the week.
final
yearSelectorMinWidth → double?
The minimum width of the year selector, defaults to 64
final
yearSelectorPadding → EdgeInsetsGeometry?
The padding of the year selector, defaults to EdgeInsets.symmetric(horizontal: 8, vertical: 4)
final

Methods

animate({Key? key, List<Effect>? effects, AnimateCallback? onInit, AnimateCallback? onPlay, AnimateCallback? onComplete, bool? autoPlay, Duration? delay, AnimationController? controller, Adapter? adapter, double? target, double? value}) → Animate

Available on Widget, provided by the AnimateWidgetExtensions extension

Wraps the target Widget in an Animate instance, and returns the instance for chaining calls. Ex. myWidget.animate() is equivalent to Animate(child: myWidget).
createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<ShadCalendar>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
positionedWith(ShadPosition position) → Widget

Available on Widget, provided by the PositionedExt extension

toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited