Category / Section
How to create time table using Flutter Event Calendar
3 mins read
You can create time table by adding appointments for particular days of week by using onViewChanged callback in Flutter Calendar.
In initState(), set the default values for calendar.
CalendarDataSource _dataSource = _DataSource(<Appointment>[]); List<String> _subjectCollection = <String>[]; List<DateTime> _startTimeCollection = <DateTime>[]; List<DateTime> _endTimeCollection = <DateTime>[]; List<Color> _colorCollection = <Color>[]; List<TimeRegion> _specialTimeRegion = <TimeRegion>[]; @override void initState() { _getSubjectCollection(); _getStartTimeCollection(); _getEndTimeCollection(); _getColorCollection(); super.initState(); }
Using the onViewchanged callback, checks whether the visible date weekday is not falls in weekend to add appointments for week days.
void viewChanged(ViewChangedDetails viewChangedDetails) { List<DateTime> visibleDates = viewChangedDetails.visibleDates; List<TimeRegion> _timeRegion = <TimeRegion>[]; List<Appointment> appointments = <Appointment>[]; _dataSource.appointments!.clear(); for (int i = 0; i < visibleDates.length; i++) { if (visibleDates[i].weekday == 6 || visibleDates[i].weekday == 7) { continue; } _timeRegion.add(TimeRegion( startTime: DateTime(visibleDates[i].year, visibleDates[i].month, visibleDates[i].day, 13, 0, 0), endTime: DateTime(visibleDates[i].year, visibleDates[i].month, visibleDates[i].day, 14, 0, 0), text: 'Break', enablePointerInteraction: false)); SchedulerBinding.instance!.addPostFrameCallback((timeStamp) { setState(() { _specialTimeRegion = _timeRegion; }); }); for (int j = 0; j < _startTimeCollection.length; j++) { DateTime startTime = new DateTime( visibleDates[i].year, visibleDates[i].month, visibleDates[i].day, _startTimeCollection[j].hour, _startTimeCollection[j].minute, _startTimeCollection[j].second); DateTime endTime = new DateTime( visibleDates[i].year, visibleDates[i].month, visibleDates[i].day, _endTimeCollection[j].hour, _endTimeCollection[j].minute, _endTimeCollection[j].second); Random random = Random(); appointments.add(Appointment( startTime: startTime, endTime: endTime, subject: _subjectCollection[random.nextInt(9)], color: _colorCollection[random.nextInt(9)])); } } for (int i = 0; i < appointments.length; i++) { _dataSource.appointments!.add(appointments[i]); } _dataSource.notifyListeners( CalendarDataSourceAction.reset, _dataSource.appointments!); }
Then assign the _dataSource to dataSource property of the calendar.
child: SfCalendar( dataSource: _dataSource, view: CalendarView.week, allowedViews: [ CalendarView.day, CalendarView.week, CalendarView.workWeek, CalendarView.month, CalendarView.timelineDay, CalendarView.timelineWeek, CalendarView.timelineWorkWeek, CalendarView.timelineMonth, CalendarView.schedule ], onViewChanged: viewChanged, specialRegions: _specialTimeRegion, ),