CalendarDatePicker2

CalendarDatePicker2 is a lightweight, highly customizable calendar picker for Flutter. It extends the standard CalendarDatePicker and supports three selection modes: single, multi, and range. It also supports four different views: day, month, year, and scroll.

Key features include:

• Support for null initial dates.
• Built-in showCalendarDatePicker2Dialog function.
• Multi-language support.
• Material 3 compatibility.

The library provides two primary widgets depending on how you want to handle user selection and confirmation:

1. CalendarDatePicker2: This widget contains only the calendar UI. It emits an event immediately whenever the user taps a different date. Use this when you want real-time updates.

2. CalendarDatePicker2WithActionButtons: This widget includes the calendar UI plus action buttons (typically CANCEL and OK). It only emits the updated value when the user explicitly taps the OK button. Use this when you want to allow users to confirm their selection before applying changes.

You can change the selection mode by setting the calendarType property within the CalendarDatePicker2Config instance. The available types are:

• CalendarDatePicker2Type.single: Default mode (single date selection).
• CalendarDatePicker2Type.multi: Allows selecting multiple individual dates.
• CalendarDatePicker2Type.range: Allows selecting a start and end date range.

// Multi Date Picker
CalendarDatePicker2(
  config: CalendarDatePicker2Config(
      calendarType: CalendarDatePicker2Type.multi,
  ),
  value: _dates,
  onValueChanged: (dates) => _dates = dates,
);

// Range Date Picker
CalendarDatePicker2(
  config: CalendarDatePicker2Config(
      calendarType: CalendarDatePicker2Type.range,
  ),
  value: _dates,
  onValueChanged: (dates) => _dates = dates,
);

CalendarDatePicker2 supports multiple languages via Flutter's localization system. To enable it, you must configure your wrapping MaterialApp with localizationsDelegates and a list of supportedLocales. This allows the picker to display month names, day names, and other UI elements in the specified languages (e.g., Chinese, Russian, Spanish, Hindi).

MaterialApp(
  localizationsDelegates: GlobalMaterialLocalizations.delegates,
  supportedLocales: const [
    Locale('en', ''),
    Locale('zh', ''),
    Locale('ru', ''),
    Locale('es', ''),
    Locale('hi', ''),
  ],
  ...
);

To customize the iOS launch screen, you can replace the existing image files within the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory with your own assets.

Alternatively, you can use Xcode for a more visual approach:

1. Open the iOS workspace using open ios/Runner.xcworkspace.
2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
3. Drag and drop your desired images into the asset catalog.

Add the package to your pubspec.yaml file under dependencies to use the calendar picker in your Flutter project.

dependencies:
  calendar_date_picker2: ^3.0.0

To use the CalendarDatePicker2 widget, you must provide a config (of type CalendarDatePicker2Config) and a value (a List<DateTime?>). The onValueChanged callback is used to update your local state when dates are selected.

Note that value must always be a List, even for single date selection.

CalendarDatePicker2(
  config: CalendarDatePicker2Config(),
  value: _dates,
  onValueChanged: (dates) => _dates = dates,
);

Migration to version 2.x.x is dependent on your Flutter SDK version:

• If your Flutter SDK is above 3.27.0, you can safely migrate to v2.x.x.
• If your Flutter SDK is 3.27.0 or below, you should continue using v1.x.x to avoid dependency issues.

The calendarViewMode determines the primary view of the picker. Use CalendarDatePicker2Mode to switch between different selection granularities.

• day: Standard day grid view.
• month: Month selection view.
• year: Year selection view.
• scroll: A vertically scrollable calendar view. This mode requires the calendar to be wrapped inside a height-constrained widget.

The calendarType determines the selection mode of the picker. Use CalendarDatePicker2Type to choose between single, multiple, or range selection.

• single: Allows selecting a single date.
• multi: Allows selecting multiple dates.
• range: Allows selecting a range of two dates. Note that when using range, you can also enable rangeBidirectional in the config to allow selecting dates in reverse-chronological order.

// Example of setting the type to range
CalendarDatePicker2Config(
  calendarType: CalendarDatePicker2Type.range,
  rangeBidirectional: true,
);

When using CalendarDatePicker2Type.range, you can customize how the selected range is highlighted.

• selectedRangeHighlightColor: Sets the highlight color for days included in the selected range.
• selectedRangeDayTextStyle: Sets the text style for days within the selected range.
• selectedRangeHighlightBuilder: A function to provide full control over the range picker highlight widget.
• selectedRangeDecorationPredicate: A function to determine the BoxDecoration for a day within a selected range. It provides dayToBuild, decoration, isStartDate, and isEndDate.