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