cr_calendar 0.0.6

Awesome calendar with customizations, range picking and event showing.

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:

Type	Name	Description	Default value
CrCalendarController	controller	Calendar controller	-
DateTime	initialDate	Initial date to be showed when calendar created	-
OnTapCallback	onDayClicked	Callback fired when calendar day is tapped in calendar with TouchMode.singleTap touch mode.	-
WeekDays	firstDayOfWeek	Sets day from which week begins	WeekDays.sunday
WeekDaysBuilder	weekDaysBuilder	Builder for customization week days row at top of the calendar widget.	-
DayItemBuilder	dayItemBuilder	Builder for customization of days cells.	-
bool	forceSixWeek	Force calendar to display sixth row in month view even if this week is not in current month.	false
Color	backgroundColor	Background color of the calendar	-
int	maxEventLines	Number of events widgets to be displayed over day item cell	4
EdgeInsets	dayItemMargin	Day item margin. Can only be horizontal.	EdgeInsets.symmetric(horizontal: 0)
EventBuilder	eventBuilder	Event widget builder	-
TouchMode	touchMode	Touch mode of calendar.	-
double	eventsTopPadding	Padding over events widgets to for correction of their aligment.	-
OnRangeSelectedCallback	onRangeSelected	Callback for receiving selected range when calendar is used as date picker.	-
int	onSwipeCallbackDebounceMs	Time in milliseconds for debounce CrCalendarController onSwipe callback.	-

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(
          month: 5,
          year: 1999,
          controller: _controller,
        ),
      ),
    );
  }
}

Usage of CrCalendar date picker dialog

DatePickerProperties parameters:

Type	Name	Description	Default value
Color	backgroundColor	Background color for date picker dialog and year selection widget.	Colors.white
DateTime	initialPickerDate	Initial date to be opened on dialog creation.	-
EdgeInsets	padding	Picker dialog padding.	EdgeInsets.all(8)
DayItemBuilder	dayItemBuilder	Builder for day item in dialog.	-
TouchMode	pickerMode	Picker selection mode.	-
WeekDaysBuilder	weekDaysBuilder	Builder for row of days over month view.	-
DateTitleBuilder	pickerTitleBuilder	Title builder for widget on top of picker dialog.	-
Alignment	pickerTitleAlignInLandscape	Alignment of picker title in landscape mode.	Alignment.centerLeft
Widget	backButton	Back button for picker control bar.	-
Widget	forwardButton	Forward button for picker control bar.	-
DateTitleBuilder	controlBarTitleBuilder	Builder for control bar title showed between backButton and forwardButton.	-
bool	showControlBar	Option for hiding control bar.	true
YearPickerItemBuilder	yearPickerItemBuilder	Builder for confirm selection button.	-
PickerButtonBuilder	okButtonBuilder	Builder for confirm selection button.	-
PickerButtonBuilder	cancelButtonBuilder	Builder for cancel button.	-
bool	forceSixWeek	Force showing six week rows in month view.	false
WeekDays	firstWeekDay	First day of date picker calendar.	WeekDays.sunday

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(),
      ),
    );
  }