Flutter日历功能插件flutter_calendar_essentials的使用

CalendarEssentials Widget for Flutter

本README提供了如何使用EventCalendar小部件的详细说明。EventCalendar是一个可定制的日历小部件，适用于Flutter，允许显示事件，并提供事件选择、事件标记和日历样式的自定义选项。

测试环境：Web 和 Android

功能

• 在日历上显示事件。
• 自定义选定日期和今日日期的外观。
• 添加标记以指示事件。
• 使用回调处理日期选择、格式更改和页面更改。
• 限制日历的日期范围并控制手势。

安装

在pubspec.yaml文件中添加以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_calendar_essentials: ^1.0.10

使用

创建一个事件类

要使用EventCalendar，您需要创建一个继承自EventCalendarEssential的类，并覆盖所需的属性和方法。

import 'package:flutter/material.dart';
import 'package:flutter_calendar_essentials/event_calendar.dart';

// 自定义事件日历类
class MyCustomEventCalendar extends EventCalendarEssential {
  bool defaultEvent = true;
  var events = <CalendarEventEntity>[];

  // 构造函数
  MyCustomEventCalendar(DateTime date, this.defaultEvent, this.events)
      : super(date, false);

  // 判断某一天是否被选中
  [@override](/user/override)
  bool isEventSelected(DateTime selectedDay) {
    return date.year == selectedDay.year &&
        date.month == selectedDay.month &&
        date.day == selectedDay.day;
  }

  // 构建事件显示的UI
  [@override](/user/override)
  Widget buildEvent(bool isSelected, bool isToday) {
    return Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: isSelected
            ? Colors.blue
            : isToday
                ? Colors.blueGrey
                : Colors.transparent,
        border: isSelected
            ? Border.all(color: Colors.grey, width: 0.5)
            : Border.all(color: Colors.transparent),
      ),
      child: Center(
        child: Text(
          date.day.toString(),
          style: const TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
    );
  }

  // 构建事件标记
  Widget _buildDot(Color color) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(1, 0, 1, 0),
      child: Container(
        width: 8,
        height: 8,
        decoration: BoxDecoration(
          color: color,
          shape: BoxShape.circle,
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget buildMarkerEvent() {
    List<Widget> dotWidgets = [];

    for (var event in events) {
      dotWidgets.add(_buildDot(event.api.color));
    }

    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: dotWidgets,
    );
  }
}

使用日历小部件

创建一个MyEvent对象列表，并将其传递给CalendarEssentials小部件。

import 'package:flutter/material.dart';
import 'package:event_calendar/event_calendar.dart';

class CalendarPage extends StatefulWidget {
  [@override](/user/override)
  _CalendarPageState createState() => _CalendarPageState();
}

class _CalendarPageState extends State<CalendarPage> {
  late List<MyEvent> events;
  late DateTime selectedDay;
  late DateTime firstDayLimit;
  late DateTime lastDayLimit;
  late CalendarFormat calendarFormat;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化事件、选定日期、日期限制和格式
    selectedDay = DateTime.now();
    firstDayLimit = DateTime.now().subtract(Duration(days: 365));
    lastDayLimit = DateTime.now().add(Duration(days: 365));
    calendarFormat = CalendarFormat.twoWeeks;
    events = [
      MyEvent(
        date: DateTime.now(),
        events: [EventDetail(color: Colors.red)],
      ),
      // 添加更多事件
    ];
  }

  // 处理日期选择
  void onDaySelected(DateTime day) {
    setState(() {
      selectedDay = day;
    });
  }

  // 刷新事件列表
  void refreshEvents() {
    setState(() {
      // 更新您的事件列表
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('事件日历'),
      ),
      body: CalendarEssentials(
        events: events,
        calendarDaysTextStyle: Theme.of(context).textTheme.titleSmall,
        formatTextStyle: Theme.of(context).textTheme.titleSmall,
        weekDaysHeaderTextStyle: Theme.of(context)
            .textTheme
            .titleSmall!
            .copyWith(color: Theme.of(context).colorScheme.tertiary),
        dateHeaderTextStyle: Theme.of(context)
            .textTheme
            .titleSmall!
            .copyWith(color: Theme.of(context).colorScheme.secondary),
        calendarStyle: CalendarStyle(
          todayDecoration: BoxDecoration(
            color: Theme.of(context).primaryColor,
            shape: BoxShape.circle,
          ),
          selectedDecoration: BoxDecoration(
            color: Theme.of(context).colorScheme.secondary,
            shape: BoxShape.rectangle,
          ),
        ),
        onDaySelected: (selectedDay) {
          onDaySelected(selectedDay);
        },
        defaultCalendarFormat: CalendarFormat.twoWeeks,
        onFormatChanged: (format) {
          setState(() {
            calendarFormat = format;
          });
          refreshEvents();
        },
        onChanged: (firstDay, lastDay) {
          setState(() {
            firstDayLimit = firstDay;
            lastDayLimit = lastDay;
          });
        },
        heightCell: 30,
        selectedDay: selectedDay,
        firstDay: firstDayLimit,
        lastDay: lastDayLimit,
        availableGestures: AvailableGestures.horizontal,
        onPageChanged: (focusedDay) {
          onDaySelected(focusedDay);
          refreshEvents();
        },
      ),
    );
  }
}