Category / Section
How to view schedule in the Flutter Calendar
2 mins read
In the Flutter Event Calendar, you can create schedule view by using `view` property of the calendar, by setting the calendar view mode as `schedule` you can create schedule view for the Flutter calendar.
Step 1:
Place the calendar inside the body of the Scaffold widget. Please find the entire code snippet.
import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:syncfusion_flutter_calendar/calendar.dart'; void main() => runApp(ScheduleView()); class ScheduleView extends StatefulWidget { @override ScheduleViewState createState() => ScheduleViewState(); } class ScheduleViewState extends State<ScheduleView> { @override void initState() { super.initState(); } @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: SfCalendar( view: CalendarView.schedule, dataSource: _getDataSource(), ), )); } _DataSource _getDataSource() { final List<Appointment> appointments = <Appointment>[]; appointments.add(Appointment( startTime: DateTime.now().add(Duration(hours: 4)), endTime: DateTime.now().add(Duration(hours: 5)), subject: 'Meeting', color: Colors.red, )); appointments.add(Appointment( startTime: DateTime.now().add(Duration(days: -2, hours: 4)), endTime: DateTime.now().add(Duration(days: -2, hours: 5)), subject: 'Development Meeting New York, U.S.A', color: Color(0xFFf527318), )); appointments.add(Appointment( startTime: DateTime.now().add(Duration(days: -2, hours: 3)), endTime: DateTime.now().add(Duration(days: -2, hours: 4)), subject: 'Project Plan Meeting Kuala Lumpur, Malaysia', color: Color(0xFFfb21f66), )); appointments.add(Appointment( startTime: DateTime.now().add(Duration(days: -2, hours: 2)), endTime: DateTime.now().add(Duration(days: -2, hours: 3)), subject: 'Support - Web Meeting Dubai, UAE', color: Color(0xFFf3282b8), )); appointments.add(Appointment( startTime: DateTime.now().add(Duration(days: -2, hours: 1)), endTime: DateTime.now().add(Duration(days: -2, hours: 2)), subject: 'Project Release Meeting Istanbul, Turkey', color: Color(0xFFf2a7886), )); appointments.add(Appointment( startTime: DateTime.now().add(const Duration(hours: 4, days: -1)), endTime: DateTime.now().add(const Duration(hours: 5, days: -1)), subject: 'Release Meeting', color: Colors.lightBlueAccent, isAllDay: true)); appointments.add(Appointment( startTime: DateTime.now().add(const Duration(hours: 2, days: -4)), endTime: DateTime.now().add(const Duration(hours: 4, days: -4)), subject: 'Performance check', color: Colors.amber, )); appointments.add(Appointment( startTime: DateTime.now().add(const Duration(hours: 11, days: -2)), endTime: DateTime.now().add(const Duration(hours: 12, days: -2)), subject: 'Customer Meeting Tokyo, Japan', color: Color(0xFFffb8d62), )); appointments.add(Appointment( startTime: DateTime.now().add(const Duration(hours: 6, days: 2)), endTime: DateTime.now().add(const Duration(hours: 7, days: 2)), subject: 'Retrospective', color: Colors.purple, )); return _DataSource(appointments); } } class _DataSource extends CalendarDataSource { _DataSource(List<Appointment> source) { appointments = source; } }
By using the hideEmptyScheduleWeek you can hide the weeks that do not have an appointments.
Reference blog: https://www.syncfusion.com/blogs/post/introducing-the-new-schedule-view-in-flutter-event-calendar.aspx
|
|