Category / Section
How to get visible dates details from the Flutter Calendar
2 mins read
In Flutter Event calendar, you can retrieve the details of visible dates using the onViewChanged callback of the flutter calendar widget.
Step 1: In the initState() method, initialize the default values for tracking visible dates:
String? _startDate, _endDate;
Color? _headerColor, _viewHeaderColor, _calendarColor;
@override
void initState() {
_startDate = '';
_endDate = '';
super.initState();
}
Step 2: Create the calendar widget and implement the onViewChanged callback to track visible date ranges:
Expanded(
child: SfCalendar(
viewHeaderStyle:
ViewHeaderStyle(backgroundColor: _viewHeaderColor),
allowedViews: [
CalendarView.day,
CalendarView.week,
CalendarView.workWeek,
CalendarView.month,
CalendarView.timelineDay,
CalendarView.timelineWeek,
CalendarView.timelineWorkWeek
],
backgroundColor: _calendarColor,
view: CalendarView.week,
monthViewSettings: MonthViewSettings(showAgenda: true),
dataSource: getCalendarDataSource(),
onViewChanged: viewChanged,
),
),
void viewChanged(ViewChangedDetails viewChangedDetails) {
_startDate = DateFormat('dd, MMMM yyyy')
.format(viewChangedDetails.visibleDates[0])
.toString();
_endDate = DateFormat('dd, MMMM yyyy')
.format(viewChangedDetails
.visibleDates[viewChangedDetails.visibleDates.length - 1])
.toString();
SchedulerBinding.instance!.addPostFrameCallback((duration) {
setState(() {});
});
}
|
