CrCalendar

Customizable Flutter calendar inspired by Google Calendar app.

Features:
  • CrCalendar widget for displaying horizontally scrollable month view, with events lines over days.
  • date selection dialog (uses CrCalendar widget in range selection mode) with customization of buttons, texts and look of the CrCalendar widget.
Screenshots of example app:

Installation

Add cr_calendar as a dependency in pubspec.yaml.

Then import it to your project:

import 'package:cr_calendar/src/cr_calendar.dart';


Usage of CrCalendar

CrCalendar parameters:
TypeNameDescriptionDefault value
CrCalendarControllercontrollerCalendar controller-
DateTimeinitialDateInitial date to be showed when calendar created-
OnTapCallbackonDayClickedCallback fired when calendar day is tapped in calendar with TouchMode.singleTap touch mode.-
WeekDaysfirstDayOfWeekSets day from which week beginsWeekDays.sunday
WeekDaysBuilderweekDaysBuilderBuilder for customization week days row at top of the calendar widget.-
DayItemBuilderdayItemBuilderBuilder for customization of days cells.-
boolforceSixWeekForce calendar to display sixth row in month view even if this week is not in current month.false
ColorbackgroundColorBackground color of the calendar-
intmaxEventLinesNumber of events widgets to be displayed over day item cell4
EventBuildereventBuilderEvent widget builder-
TouchModetouchModeTouch mode of calendar.-
doubleeventsTopPaddingPadding over events widgets to for correction of their alignment.-
OnRangeSelectedCallbackonRangeSelectedCallback for receiving selected range when calendar is used as date picker.-
intonSwipeCallbackDebounceMsTime in milliseconds for debounce CrCalendarController onSwipe callback.-
DateTimeminDateEarliest allowable date.-
DateTimemaxDateLatest allowable date.-

Base usage:

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  CrCalendarController _controller = CrCalendarController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CrCalendar(
          initialDate: DateTime.now(),
          controller: _controller,
        ),
      ),
    );
  }
}

Usage of CrCalendar date picker dialog

DatePickerProperties parameters:
TypeNameDescriptionDefault value
ColorbackgroundColorBackground color for date picker dialog and year selection widget.Colors.white
DateTimeinitialPickerDateInitial date to be opened on dialog creation.-
EdgeInsetspaddingPicker dialog padding.EdgeInsets.all(8)
DayItemBuilderdayItemBuilderBuilder for day item in dialog.-
TouchModepickerModePicker selection mode.-
WeekDaysBuilderweekDaysBuilderBuilder for row of days over month view.-
DateTitleBuilderpickerTitleBuilderTitle builder for widget on top of picker dialog.-
AlignmentpickerTitleAlignInLandscapeAlignment of picker title in landscape mode.Alignment.centerLeft
WidgetbackButtonBack button for picker control bar.-
WidgetforwardButtonForward button for picker control bar.-
DateTitleBuildercontrolBarTitleBuilderBuilder for control bar title showed between backButton and forwardButton.-
boolshowControlBarOption for hiding control bar.true
YearPickerItemBuilderyearPickerItemBuilderBuilder for confirm selection button.-
PickerButtonBuilderokButtonBuilderBuilder for confirm selection button.-
PickerButtonBuildercancelButtonBuilderBuilder for cancel button.-
boolforceSixWeekForce showing six week rows in month view.false
WeekDaysfirstWeekDayFirst day of date picker calendar.WeekDays.sunday
DateTimeminDateEarliest allowable date.-
DateTimemaxDateLatest allowable date.-
LandscapeDaysResizeModelandscapeDaysResizeModeLandscapeDaysResizeMode.adaptive - days cells will change their height according to parent height LandscapeDaysResizeMode.scrollable - days cells will change their height according to parent height as long as it is larger than the cells width. The month scrolls if there is not enough spaceLandscapeDaysResizeMode.adaptive

Base usage:

  /// Show calendar in pop up dialog for selecting date range for calendar event.
  void _showDatePicker(BuildContext context) {
    showCrDatePicker(
      context,
      properties: DatePickerProperties(
        firstWeekDay: WeekDays.monday,
        okButtonBuilder: (onPress) =>
            ElevatedButton(child: const Text('OK'), onPressed: onPress),
        cancelButtonBuilder: (onPress) =>
            OutlinedButton(child: const Text('CANCEL'), onPressed: onPress),
        initialPickerDate: DateTime.now(),
      ),
    );
  }

Libraries

cr_calendar