flutter_calendar_widget

GitHub Pub Version

logo

flutter_calendar_widget 是一个高度可定制的日历小部件。

您不仅可以更改样式，还可以更改日历中的小部件，因此您可以根据需要进行自定义。

功能

  • 支持多种日期选择，如单选、范围选择、多选等
  • 可在日历中注册事件
  • 高级可定制；日历中的所有小部件都可以更改。
  • 支持多语言翻译。
  • 日历大小会根据内容动态变化。
  • 可以添加日历导航头。
  • 可以更改导航头中的图标。
  • 可以更改日历样式。
  • 日历中的所有文本都可以更改。

安装

flutter pub add flutter_calendar_widget

用法

请务必查看 示例 和 API文档 以获取更多详细信息。

选择模式

根据选择模式，您可以指定以下三种选择方法。

1. CalendarSelectionMode.single 用于选择单个日期。

允许选择单个日期，选择新日期将取消先前日期的选择，并将选择更新为新选择的日期。

预览

single_demo

示例

FlutterCalendar(
    selectionMode: CalendarSelectionMode.single,
    onDayPressed: (DateTime date) {
        print(date);
    }
)

2. CalendarSelectionMode.multiple 用于选择多个日期。

允许多日期选择，选择新日期不会取消先前日期的选择，允许尽可能多地选择日期。

预览

multiple_demo

示例

FlutterCalendar(
    selectionMode: CalendarSelectionMode.multiple,
    onMultipleDates: (List<DateTime> dates) {
        for (var date in dates) {
            print(date);
        }
    },
)

3. CalendarSelectionMode.range 允许选择一个日期范围。

预览

range_demo

示例

FlutterCalendar(
    selectionMode: CalendarSelectionMode.range,
    onRageDate: (CalendarDateRange dateRange) {
        print(
            'start: ${dateRange.start}, end: ${dateRange.end}',
        );
    },
)

如何更改样式

有两种主要方法可以为日历小部件设置样式。

1. 更改文本样式。

您可以通过注入 CalendarTextStyle 实例来更改文本样式。

示例

FlutterCalendar(
    selectionMode: CalendarSelectionMode.single,
    textStyle: const CalendarTextStyle(
        dayFontSize: 16,
        dayTextColor: Colors.blue,
    ),
)

2. 更改文本以外的样式。

文本样式以外的样式可以通过注入 CalendarStyle 实例来更改。

示例

FlutterCalendar(
    selectionMode: CalendarSelectionMode.single,
    style: const CalendarStyle(
        markerColor: Colors.green,
    ),
)

如何更改小部件

日历中的所有小部件都可以更改。所有小部件都是通过继承 CalendarBuilder 抽象类来构建的，您可以通过方法重写来对所需的小部件进行更改。

预览

custom_demo

示例

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

class CustomCalenderBuilder extends CalendarBuilder {
  @override
  Widget buildRangeDay(DateTime dateTime) {
    return Container();
  }

  @override
  Widget buildRangeDayLine(BoxConstraints constraints) {
    return SizedBox(
      child: Container(
        alignment: Alignment.center,
        color: Colors.greenAccent,
        child: const Text(
          '?',
          style: TextStyle(
            color: Colors.black,
          ),
        ),
      ),
    );
  }

  @override
  Widget buildRangeStartLine(BoxConstraints constraints) {
    return Align(
      alignment: Alignment.centerRight,
      child: Container(
        width: constraints.maxWidth / 2,
        decoration: BoxDecoration(
          border: Border.all(width: 0, color: Colors.greenAccent),
          color: Colors.greenAccent,
        ),
      ),
    );
  }

  @override
  Widget buildRangeEndLine(BoxConstraints constraints) {
    return Align(
      alignment: Alignment.centerLeft,
      child: Container(
        width: constraints.maxWidth / 2,
        decoration: BoxDecoration(
          border: Border.all(width: 0, color: Colors.greenAccent),
          color: Colors.greenAccent,
        ),
      ),
    );
  }
}

class CustomDemoScreen extends StatelessWidget {
  const CustomDemoScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom demo screen'),
      ),
      body: SafeArea(
        child: FlutterCalendar(
          selectionMode: CalendarSelectionMode.range,
          calendarBuilder: CustomCalenderBuilder(),

        ),
      ),
    );
  }
}

如何注册事件

您可以创建事件并将其注册到日历中。

预览

event_demo

用法

创建一个 EventList 来注册事件。如果您在 General 中指定类型，您可以在 onDayPressed 回调中区分类型。

示例

EventList<Event> events = EventList(
    events: {
        DateTime(2022, 6, 7): [
            const Event('Event 1),
            const Event('Event 2),
        ]
    }
);

...

FlutterCalendar(
    selectionMode: CalendarSelectionMode.single,
    focusedDate: DateTime.now(),
    events: events,
    onDayPressed: (DateTime day) {
        Event event = events.get(day);
        print(event);
    },
),

另请参阅： event_demo_screen

如何设置本地化

该项目正在使用 intl 包进行本地化。

默认值为设备上设置的语言值。您可以在 此处 查看 locale 可以输入的值。

示例

FlutterCalendar(
    locale: 'en',
)

贡献者 ✨

在提交拉取请求之前，请务必阅读 贡献指南。感谢所有为维护和升级此项目做出贡献的人！

感谢这些出色的人（表情符号键）

J-flowJ-flow?⚠️ ?

GitHub

查看 Github