Category / Section
How to add a special region dynamically using onTap, onViewChanged callbacks of the Flutter Calendar
1 min read
In the Flutter Event Calendar, you can add special region by using the Flutter calendar `onViewChanged`, `onTap` and `onPressed` callbacks.
STEP 1: Add the time region using the ‘startTime’, ’endTime’ properties of the `TimeRegion`.
void _getTimeRegions() {
_specialTimeRegions!.add(TimeRegion(
startTime: DateTime(2020, 5, 29, 09, 0, 0),
endTime: DateTime(2020, 5, 29, 10, 0, 0),
recurrenceRule: 'FREQ=WEEKLY;INTERVAL=1;BYDAY=SAT,',
text: 'Special Region',
color: Colors.red,
enablePointerInteraction: true,
textStyle: TextStyle(
color: Colors.black,
fontStyle: FontStyle.italic,
fontSize: 10,
)));
}
STEP 2: Assign the _specialTimeRegions variable to `specialRegions` property of SfCalendar.
body: SafeArea( child: SfCalendar( view: CalendarView.day, specialRegions: _specialTimeRegions, onViewChanged: viewChanged, onTap: calendarTapped, onLongPress: longPressed, ), ),
STEP 3: By using the `onViewChanged`, `onTap` and `onpressed` callbacks of the Flutter calendar, you can add special regions in the tapped or long pressed time slots. Please find the code snippet for the same.
void calendarTapped(CalendarTapDetails calendarTapDetails) {
_specialTimeRegions!.add(TimeRegion(
startTime: calendarTapDetails.date!,
endTime: calendarTapDetails.date!.add(Duration(hours: 1)),
text: 'Added via calendar tap callback',
color: Color(0xffbD3D3D3),
));
setState(() {});
}
void longPressed(CalendarLongPressDetails calendarLongPressDetails) {
_specialTimeRegions!.add(TimeRegion(
startTime: calendarLongPressDetails.date!,
endTime: calendarLongPressDetails.date!.add(Duration(hours: 1)),
text: 'Added via long press callback',
color: Color(0xffbD3D3D3),
));
setState(() {});
}
void viewChanged(ViewChangedDetails viewChangedDetails) {
_specialTimeRegions!.add(TimeRegion(
startTime: viewChangedDetails.visibleDates[0],
endTime: viewChangedDetails.visibleDates[0].add(Duration(hours: 1)),
text: 'Added via view changed callback',
color: Color(0xffbD3D3D3),
));
}
Highlighted timeslots touch interaction can be enabled or disabled.
Reference blog: https://www.syncfusion.com/blogs/post/introducing-a-special-time-region-in-the-flutter-event-calendar.aspx
|
