Features

• Show a calendar to pick range of dates.

  

Usage

Basic

Import this package in your file you want to use.
Then, place DateRangeCalendar widget wherever you want to declare.

You need to pass a callback function onTappedDay of type Function(DateTime?, DateTime?).

  void onTappedDay(DateTime? s, DateTime? e) {
    // handle tapped start date and tapped end date here.
    print('$s, $e');
    ...
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DateRangeCalendar(
          onTappedDay: onTappedDay,
        ),
      ),
    );
  }

Custom

Also, you can change styles etc.

  final mySetupData = CalendarSetupData(
    // Day cell style
    dayCellStyle: const calendar.DayCellStyle(
      backgroundColorOfStartDay: Colors.blue,
      backgroundColorOfEndDay: Colors.red,
      backgroundColorOfBetweenDay: Colors.yellow,
      borderColorOfToday: Colors.purple,
      borderRadius: Radius.circular(6),
    ),

    // Other styles etc.
    monthLayoutType: MonthLayoutType.yearMonth,
    monthTitleYearUnit: '年',
    monthLabelsData: const MonthLabelsData(jan: '1月', feb: '2月'),
    dayOfTheWeekLabelsData: const DayOfTheWeekLabelsData(
      mon: '月', tue: '火', wed: '水', thu: '木', fri: '金', sat: '土', sun: '日'),
    initialMonth: DateTime(2023, 1),
  ),

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DateRangeCalendar(
          onTappedDay: onTappedDay,
          setupData: mySetupData,
        ),
      ),
    );
  }