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

6yjfywim  于 2023-04-03  发布在  其他
关注(0)|答案(1)|浏览(109)

我已经实现了禁用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;
  }
}
ljsrvy3e

ljsrvy3e1#

可以使用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(),
);

相关问题