Category / Section
How to change the time interval width and height in the Flutter Calendar
In the Flutter Event Calendar, you can change the time interval, width and height by using the timeInterval properties timeIntervalHeight and timeIntervalWidth in TimeSlotViewSettings.
Note:
The timeIntervalWidth property is only applicable for timeline day, week, work week, month views. The timeIntervalHeight property is only applicable for day, week, work week views.
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';
void main() {
return runApp(TimeInterval());
}
class TimeInterval extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: SfCalendar(
view: CalendarView.day,
allowedViews: [
CalendarView.day,
CalendarView.week,
CalendarView.workWeek,
CalendarView.timelineDay,
CalendarView.timelineWeek,
CalendarView.timelineWorkWeek,
CalendarView.timelineMonth
],
dataSource: _getCalendarDataSource(),
timeSlotViewSettings: TimeSlotViewSettings(
timeInterval: Duration(hours: 2),
timeIntervalHeight: 80,
timeIntervalWidth: 100),
),
)),
);
}
_AppointmentDataSource _getCalendarDataSource() {
List<Appointment> appointments = <Appointment>[];
appointments.add(Appointment(
startTime: DateTime(2021, 1, 25, 04, 0, 0),
endTime: DateTime(2021, 1, 25, 05, 0, 0),
subject: 'Meeting',
color: Colors.blue,
));
appointments.add(Appointment(
startTime: DateTime(2021, 1, 26, 01, 0, 0),
endTime: DateTime(2021, 1, 26, 03, 0, 0),
subject: 'Planning',
color: Colors.green,
));
return _AppointmentDataSource(appointments);
}
}
class _AppointmentDataSource extends CalendarDataSource {
_AppointmentDataSource(List<Appointment> source) {
appointments = source;
}
}
|
