Articles in this section
Category / Section

How to create time table using Flutter Event Calendar

1 min 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,
),

View sample in GitHub

Flutter Calendar Time Table

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied