CustomCalendarViewer class

Inheritance

Constructors

CustomCalendarViewer({Key? key, Duration duration = const Duration(milliseconds: 600), Duration yearDuration = const Duration(milliseconds: 500), List<Date>? dates, List<RangeDate>? ranges, List<Color>? daysNameColors, dynamic onDayTapped(DateTime date)?, dynamic onCalendarUpdate(DateTime date)?, dynamic onDatesUpdated(List<Date>)?, dynamic onRangesUpdated(List<RangeDate>)?, CustomCalendarType calendarType = CustomCalendarType.view, CustomCalendarStyle calendarStyle = CustomCalendarStyle.withBorder, CustomCalendarStartDay calendarStartDay = CustomCalendarStartDay.monday, CustomCalendarAnimatedDirection animateDirection = CustomCalendarAnimatedDirection.horizontal, int startYear = 2010, int endYear = 2050, Widget? separatedWidget, Color activeColor = Colors.blue, Color dropArrowColor = Colors.black, Color movingArrowColor = Colors.black, Border? currentDayBorder, Border? dayBorder, Color headerBackground = Colors.transparent, Color daysHeaderBackground = Colors.transparent, Color daysBodyBackground = Colors.transparent, bool showCurrentDayBorder = true, bool showBorderAfterDayHeader = false, bool showMonthAndYearHeader = false, MainAxisAlignment headerAlignment = MainAxisAlignment.spaceBetween, bool showHeader = true, double dropArrowSize = 34, double movingArrowSize = 16, double spaceBetweenMovingArrow = 48, DateTime? closeDateBefore, Color closedDatesColor = Colors.grey, double radius = 40, TextStyle headerStyle = const TextStyle(fontWeight: FontWeight.w600, fontSize: 14, color: Colors.black), TextStyle dropDownYearsStyle = const TextStyle(fontWeight: FontWeight.w600, fontSize: 14, color: Colors.black), TextStyle dayNameStyle = const TextStyle(fontWeight: FontWeight.w600, fontSize: 14, color: Colors.black), TextStyle inActiveStyle = const TextStyle(fontWeight: FontWeight.w400, fontSize: 14, color: Colors.black), TextStyle activeStyle = const TextStyle(fontWeight: FontWeight.w400, fontSize: 14, color: Colors.white), EdgeInsets headerMargin = const EdgeInsets.only(left: 42, right: 42, top: 8, bottom: 10), EdgeInsets daysMargin = const EdgeInsets.only(left: 45, right: 45, top: 0, bottom: 0), Alignment iconAlignment = Alignment.topLeft, EdgeInsets iconPadding = EdgeInsets.zero, Color calendarBorderColor = Colors.grey, double calendarBorderRadius = 10, double calendarBorderWidth = 1, String local = 'en', String toolTipMessage = 'Message', double? toolTipHeight, double toolTipAddSpaceLeft = 10, double toolTipAddSpaceTop = 15, EdgeInsets? toolTipPadding, Decoration? toolTipDecoration, TextStyle? toolTipTextStyle, TextAlign? toolTipTextAlign, Duration toolTipWaitDuration = const Duration(seconds: 2), bool showTooltip = false, Color addDatesIndicatorColor = Colors.grey, Color addDatesIndicatorActiveColor = Colors.blue, TextStyle addDatesTextStyle = const TextStyle(fontWeight: FontWeight.w500, color: Colors.black, fontSize: 14), TextStyle addDatesActiveTextStyle = const TextStyle(fontWeight: FontWeight.w600, color: Colors.blue, fontSize: 14), EdgeInsets addDatesMargin = const EdgeInsets.only(left: 45, right: 45, top: 10, bottom: 0)})
const

Properties

activeColor → Color
  • Here you can control the active color
    • final
    activeStyle → TextStyle
  • From these you can handel the style for active day number text in the calendar
    • final
    addDatesActiveTextStyle → TextStyle
  • The Text style for the indicator text when this selected
    • final
    addDatesIndicatorActiveColor → Color
  • The color of the indicator when this selected
    • final
    addDatesIndicatorColor → Color
  • The color of the indicator when this not selected
    • final
    addDatesMargin → EdgeInsets
  • The empty space that surrounds the add dates widget.
    • final
    addDatesTextStyle → TextStyle
  • The Text style for the indicator text when this not selected
    • final
    animateDirection → CustomCalendarAnimatedDirection
  • From here you can change the direction when you move between months there's 2 types
    • CustomCalendarAnimatedDirection.horizontal
    • CustomCalendarAnimatedDirection.vertical
    • If you use CustomCalendarType.viewFullYear the moving will be only horizontal
    • final
    calendarBorderColor → Color
  • The color for the border around the calendar
    • final
    calendarBorderRadius → double
  • The radius for the border around the calendar
    • final
    calendarBorderWidth → double
  • The width for the border around the calendar
    • final
    calendarStartDay → CustomCalendarStartDay
  • From here you can change the start day there's 3 types
    • CustomCalendarStyle.saturday
    • CustomCalendarStyle.sunday
    • CustomCalendarStyle.monday
    • final
    calendarStyle → CustomCalendarStyle
  • There's 2 style to handle your calendar
    • CustomCalendarStyle.withBorder this will add border around the calendar
    • CustomCalendarStyle.normal this will show the calendar without border
    • final
    calendarType → CustomCalendarType
  • There's 6 types to handle your calendar
    • CustomCalendarType.view this will make the user can't press on the calendar just for view
    • CustomCalendarType.viewFullYear this will make the user can't press on the calendar just for view full year data in the screen
    • CustomCalendarType.date this will make the user can add only one date
    • CustomCalendarType.range this will make the user to add only one range
    • CustomCalendarType.multiDates this will make the user can add multiple dates
    • CustomCalendarType.multiRanges this will make the user can add multiple ranges
    • CustomCalendarType.multiDatesAndRanges this will make the user can add multiple dates and ranges
    • CustomCalendarType.monthsAndYears this will make you can show calendar with only years and months
    • final
    closeDateBefore → DateTime?
  • If you need to close dates before specific date just enter this here
    • final
    closedDatesColor → Color
  • Here if you need to put specific color for closed date
    • final
    currentDayBorder → Border?
  • Here you can customize you current day border or this will use default border
    • final
    dates → List<Date>?
  • Here you can add specific active days dates
  • This will take Date Model
  • if you leave the color or text color null this will take the colors from active color for background and active day num style for text color
    • final
    dayBorder → Border?
  • If you need to add border for all days expect the current day
    • final
    dayNameStyle → TextStyle
  • From these you can handel the style for day name text in the calendar
    • final
    daysBodyBackground → Color
  • You can use specific days body background color for your calendar
    • final
    daysHeaderBackground → Color
  • You can use specific days header background color for your calendar
    • final
    daysMargin → EdgeInsets
  • The empty space that surrounds the the days body.
    • final
    daysNameColors → List<Color>?
  • If you need to put specific color for each day name
  • Make sure the list should have 7 colors when used
    • final
    dropArrowColor → Color
  • Here you can control the drop down arrow color
    • final
    dropArrowSize → double
  • From here you can control the size for drop down arrow size
    • final
  • From these you can handel the style for years text in the dropDown
    • final
    duration → Duration
  • This the duration for the calender when change the month
    • final
    endYear → int
  • From here you can control the calendar end year
    • final
    hashCode → int
    The hash code for this object.
    no setterinherited
    headerAlignment → MainAxisAlignment
  • Put the alignment for Header
    • final
    headerBackground → Color
  • You can use specific header background color for your calendar
    • final
    headerMargin → EdgeInsets
  • The empty space that surrounds the header.
    • final
    headerStyle → TextStyle
  • From these you can handel the style for header text in the calendar
    • final
    iconAlignment → Alignment
  • The alignment for the icon default in Alignment.topLeft
  • The icon widget this will shown with the day number
    • final
    iconPadding → EdgeInsets
  • The space around the icon
  • The icon widget this will shown with the day number
    • final
    inActiveStyle → TextStyle
  • From these you can handel the style for day number text in the calendar
    • final
    key → Key?
    Controls how one widget replaces another widget in the tree.
    finalinherited
    local → String
  • You can use 'ar' to show the calendar Arabic or 'en'(default) for English
    • final
    movingArrowColor → Color
  • Here you can control the moving arrow color
    • final
    movingArrowSize → double
  • From here you can control the moving arrow size
    • final
    onCalendarUpdate → (dynamic Function(DateTime date)?)
  • This function will give you the new date when the month or year updated
    • final
    onDatesUpdated → (dynamic Function(List<Date>)?)
  • This function will give you the updated lest for dates
    • final
    onDayTapped → (dynamic Function(DateTime date)?)
  • This function will give you the date for the day that's tapped
    • final
    onRangesUpdated → (dynamic Function(List<RangeDate>)?)
  • This function will give you the updated lest for dates
    • final
    radius → double
  • you can control the radius for the active days
    • final
    ranges → List<RangeDate>?
  • Here you can add specific active ranges dates
  • This will take RangeDate Model
  • if you leave the color or text color null this will take the colors from active color for background and active day num style for text color
    • final
    runtimeType → Type
    A representation of the runtime type of the object.
    no setterinherited
    separatedWidget → Widget?
  • This widget will be between the calendars this shown only on CustomCalendarType.viewFullYear
    • final
    showBorderAfterDayHeader → bool
  • If You need to show border between days name and the days number
    • final
    showCurrentDayBorder → bool
  • You can control if you need to show the border for current day or not default is true
    • final
    showHeader → bool
  • If this true the header will be shown
    • final
    showMonthAndYearHeader → bool
  • If this true the header will be shown only with Month and Year
    • final
    showTooltip → bool
  • If this true the Tooltip will be active
    • final
    spaceBetweenMovingArrow → double
  • From here you can control the space between moving arrows
    • final
    startYear → int
  • From here you can control the calendar start year
    • final
    toolTipAddSpaceLeft → double
  • If you need to add space to toolTip from left side
    • final
    toolTipAddSpaceTop → double
  • If you need to add space to toolTip from top
    • final
    toolTipDecoration → Decoration?
  • Specifies the tooltip's shape and background color.
  • The tooltip shape defaults to a rounded rectangle with a border radius of 4.0. Tooltips will also default to an opacity of 90% and with the color Colors.grey\700\ if ThemeData.brightness is Brightness.dark, and Colors.white if it is Brightness.light.
    • final
    toolTipHeight → double?
  • The height of the tooltip's child.
  • If the child is null, then this is the tooltip's intrinsic height.
    • final
    toolTipMessage → String
  • The text to display in the tooltip. Only one of message.
    • final
    toolTipPadding → EdgeInsets?
  • The amount of space by which to inset the tooltip's child.
  • On mobile, defaults to 16.0 logical pixels horizontally and 4.0 vertically.
  • On desktop, defaults to 8.0 logical pixels horizontally and 4.0 vertically.
    • final
    toolTipTextAlign → TextAlign?
  • How the message of the tooltip is aligned horizontally.
  • If this property is null, then TooltipThemeData.textAlign is used. If TooltipThemeData.textAlign is also null, the default value is TextAlign.start.
    • final
    toolTipTextStyle → TextStyle?
  • The style to use for the message of the tooltip.
  • If null, the message's TextStyle will be determined based on ThemeData.
  • If ThemeData.brightness is set to Brightness.dark, TextTheme.bodyMedium of ThemeData.textTheme will be used with Colors.white. Otherwise, if ThemeData.brightness is set to Brightness.light, TextTheme.bodyMedium of ThemeData.textTheme will be used with Colors.black.
    • final
    toolTipWaitDuration → Duration
  • The length of time that a pointer must hover over a tooltip's widget before the tooltip will be shown.
  • Defaults to 0 milliseconds (tooltips are shown immediately upon hover).
    • final
    yearDuration → Duration
  • This the duration for the years when open the years widget
    • final

    Methods

    createElement() → StatefulElement
    Creates a StatefulElement to manage this widget's location in the tree.
    inherited
    createState() → State<CustomCalendarViewer>
    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
    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}) → 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