How to enable time between startDate and endDate in SfCalendar? - Flutter

AbbasJafari
April 1, 2023
123 views
1 vote
2 Answers

I already implemented codes that disable times between startDate and endDate, but I want to have the reverse version, I mean enable times between startDate and endDate and disable all the other times, here is my codes:

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

class TestFile extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<TestFile> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SfDataGrid Column Resizing Example')),
      body: SfCalendar(
        initialDisplayDate: DateTime.now(),
        view: CalendarView.week,
        specialRegions: _getTimeRegions(),
      ),
    );
  }

  List<TimeRegion> _getTimeRegions() {
    final List<TimeRegion> regions = <TimeRegion>[];

    DateTime now = DateTime.now();
    DateTime startTime = DateTime(now.year, now.month, now.day, 14, 0, 0);
    DateTime endTime = DateTime(now.year, now.month, now.day, 15, 0, 0);

    regions.add(TimeRegion(
      startTime: startTime,
      endTime: endTime,
      color: Colors.grey.withOpacity(0.2),
      textStyle: TextStyle(color: Colors.black45, fontSize: 15),
      recurrenceRule: 'FREQ=DAILY;COUNT=1',
    ));
    return regions;
  }
}

Answers

You can achieve the same functionality by using the specialRegions property of the TimeRegion class.

Example of how you can use the specialRegions property to disable all timeslots except for the ones that fall between startDate and endDate:

 specialRegions: <TimeRegion>[
  TimeRegion(
    startTime: startDate,
    endTime: endDate,
    color: Colors.green,
    enablePointerInteraction: false,
  ),
  TimeRegion(
    startTime: DateTime(1900, 1, 1),
    endTime: DateTime(2050, 12, 31),
    color: Colors.grey,
    enablePointerInteraction: true,
  ),
],

Full example

SfCalendar(
  view: CalendarView.day,
  timeSlotViewSettings: TimeSlotViewSettings(
    startHour: 9,
    endHour: 18,
    timeInterval: Duration(minutes: 30),
    timeRegionBuilder: (BuildContext context, TimeRegion timeRegion, List<TimeRegion> visibleTimeRegions) {
      return Container(
        color: timeRegion.color,
        height: 25,
        width: double.infinity,
        child: Text(
          '${timeRegion.text}',
          textAlign: TextAlign.center,
          style: TextStyle(color: Colors.white),
        ),
      );
    },
    specialRegions: <TimeRegion>[
      TimeRegion(
        startTime: startDate,
        endTime: endDate,
        color: Colors.green.withOpacity(0.2),
        enablePointerInteraction: false,
      ),
      TimeRegion(
        startTime: DateTime(1900, 1, 1),
        endTime: DateTime(2050, 12, 31),
        color: Colors.grey.withOpacity(0.2),
        enablePointerInteraction: true,
      ),
    ],
  ),
  dataSource: _getCalendarDataSource(),
);

You can achieve your requirement by using the “specialRegions” support in the Flutter calendar. We have prepared the sample for the same, please find the attached sample and output for the same,

Refer to our UG documentation to know more details about special regions support in the calendar,

https://help.syncfusion.com/flutter/calendar/timeslot-views#special-time-regions

Sample: ` List _getTimeRegions() {
final List regions = [];

DateTime now = DateTime.now();
regions.add(TimeRegion(
  startTime: DateTime(now.year, now.month, now.day),
  endTime: DateTime(now.year, now.month, now.day, 14, 0, 0),
  color: Colors.grey.withOpacity(0.2),
  textStyle: TextStyle(color: Colors.black45, fontSize: 15),
));

regions.add(TimeRegion(
  startTime: DateTime(now.year, now.month, now.day, 15, 0, 0),
  endTime: DateTime(now.year, now.month, now.day, 23, 59, 59),
  color: Colors.grey.withOpacity(0.2),
  textStyle: TextStyle(color: Colors.black45, fontSize: 15),
));

final DateTime date =
DateTime.now().add(Duration(days: -DateTime.now().weekday));
regions.add(TimeRegion(
  startTime: DateTime(date.year, date.month, date.day),
  endTime: DateTime(date.year, date.month, date.day, 23,59,59),
  enablePointerInteraction: false,
  textStyle: const TextStyle(color: Colors.black45, fontSize: 15),
  color: Colors.grey.withOpacity(0.2),
  recurrenceRule: 'FREQ=DAILY;INTERVAL=1',
  recurrenceExceptionDates: [DateTime.now()],
));

return regions;

Please signup or login to give your own answer.

Click here to cancel reply.

How to enable time between startDate and endDate in SfCalendar? – Flutter

Answers