Category / Section
How to get visible dates details from the Flutter Calendar
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(() {});
});
}
|
