Skip to content

Lightweight and highly customizable calendar picker built on Flutter's original CalendarDatePicker, with support for multi and range modes.

License

Notifications You must be signed in to change notification settings

lotum/calendar_date_picker2

 
 

Repository files navigation

CalendarDatePicker2

Pub Package Pub Package

A lightweight and customizable calendar picker based on Flutter CalendarDatePicker, with support for single date picker, range picker and multi picker.

single-mode-picker multi-mode-picker range-picker-mode dialog-function
single mode multi mode range mode dialog function

Intro

CalendarDatePicker2 consists of two main widgets:

  • CalendarDatePicker2, this widget only includes the calendar UI and will emit event whenever user taps a different date.
  • CalendarDatePicker2WithActionButtons, this widget includes calendar UI and the action buttons (CANCEL & OK). This widget will only emit the updated value when user taps 'OK' button.

Features

  • Extended CalendarDatePicker allows null initialDate
  • Customizable UI
  • Supports three modes: single, multi and range
  • Built-in showCalendarDatePicker2Dialog

How to use

Make sure to check out examples for more details.

Installation

Add the following line to pubspec.yaml:

dependencies:
  calendar_date_picker2: ^0.2.2

Basic setup

The complete example is available here.

CalendarDatePicker2 requires you to provide config and initialValue:

  • config contains the configurations for your calendar setup and UI.
  • initialValue is initial values passed into your calendar picker, initial value must be a List.

The minimum working sample

CalendarDatePicker2(
  config: CalendarDatePicker2Config(),
  initialValue: [],
);

Single Date Picker Configuration

During the initialization of CalendarDatePicker2Config the calendarType of the config instance will by default set to CalendarDatePicker2Type.single, so you don't have to set the calendar type specifically.

Multi Date Picker Configuration

In order to use multi mode date picker, you will need to set the calendarType of config to CalendarDatePicker2Type.multi:

CalendarDatePicker2(
  config: CalendarDatePicker2Config(
      calendarType: CalendarDatePicker2Type.multi,
  ),
  initialValue: [],
);

Range Date Picker Configuration

In order to use range mode date picker, you will need to set the calendarType of config to CalendarDatePicker2Type.range:

CalendarDatePicker2(
  config: CalendarDatePicker2Config(
      calendarType: CalendarDatePicker2Type.range,
  ),
  initialValue: [],
);

Use built-in dialog display method

This package includes built-in support to display calendar as a dialog. To use it, you will need to call showCalendarDatePicker2Dialog, which takes three required arguments: context, config, dialogSize:

...
var results = await showCalendarDatePicker2Dialog(
  context: context,
  config: CalendarDatePicker2Config(),
  dialogSize: const Size(325, 400),
  initialValue: _dialogCalendarPickerValue,
  borderRadius: 15,
);
...

Config options

For CalendarDatePicker2Config:

Option Type Description
calendarType CalendarDatePicker2Type? Calendar picker type, has 3 values: single, multi, range
firstDate DateTime? The earliest allowable DateTime user can select
lastDate DateTime? The latest allowable DateTime user can select
currentDate DateTime? The DateTime representing today which will be outlined in calendar
calendarViewMode DatePickerMode? The initially displayed view of the calendar picker
weekdayLabels List<String>? Custom weekday labels, should starts with Sunday
weekdayLabelTextStyle TextStyle? Custom text style for weekday labels
controlsHeight double? Custom height for calendar control toggle's height
lastMonthIcon Widget? Custom icon for last month button control
nextMonthIcon Widget? Custom icon for next month button control
controlsTextStyle TextStyle? Custom text style for calendar mode toggle control
dayTextStyle TextStyle? Custom text style for calendar day text
selectedDayTextStyle TextStyle? Custom text style for selected calendar day text
selectedDayHighlightColor Color? The highlight color selected day
disabledDayTextStyle TextStyle? Custom text style for disabled calendar day(s)

In addition to the configurations above, CalendarDatePicker2WithActionButtonsConfig has 7 extra options

Option Type Description
gapBetweenCalendarAndButtons double? The gap between calendar and action buttons
cancelButtonTextStyle TextStyle? Text style for cancel button
cancelButton Widget? Custom cancel button
okButtonTextStyle TextStyle? Text style for ok button
okButton Widget? Custom ok button
openedFromDialog bool? Is the calendar opened from dialog
shouldCloseDialogAfterCancelTapped bool? If the dialog should be closed when user taps the cancel button

Custom UI

By using the configs above, you could make your own custom calendar picker as your need. image

CalendarDatePicker2WithActionButtons(
  config: CalendarDatePicker2WithActionButtonsConfig(
    calendarType: CalendarDatePicker2Type.range,
    selectedDayHighlightColor: Colors.purple[800],
  ),
  initialValue: [],
  onValueChanged: (values) => setState(() => _yourVariable = values),
);

About

Lightweight and highly customizable calendar picker built on Flutter's original CalendarDatePicker, with support for multi and range modes.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Dart 70.7%
  • C++ 16.3%
  • CMake 8.0%
  • HTML 3.8%
  • C 0.7%
  • Swift 0.4%
  • Other 0.1%