如何在 SfCalendar 中启用 startDate 和 endDate 之间的时间？

Question

我已经实现了禁用 startDate 和 endDate 之间时间的代码，但我想要相反的版本，我的意思是启用 startDate 和 endDate 之间的时间并禁用所有其他时间，这是我的代码：

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;
  }
}

Answer 1

您可以使用 TimeRegion 类的 specialRegions 属性实现相同的功能。

如何使用 specialRegions 属性禁用所有时隙的示例，但介于 startDate 和 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,
  ),
],

完整示例

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(),
);