Category / Section
How to view schedule in the Flutter Calendar
In the Flutter Event Calendar, you can create schedule view by using the `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. Here's the complete 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;
}
}
You can use the hideEmptyScheduleWeek property to hide weeks that do not have any appointments, creating a more streamlined view.
Reference blog: https://www.syncfusion.com/blogs/post/introducing-the-new-schedule-view-in-flutter-event-calendar.aspx
|
|
|
