date_range_calendar

Description:

date range calendar

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,
),
),
);
}
copied to clipboard

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,
),
),
);
}
copied to clipboard