Flutter日历插件flutter_clean_calendar2的使用

Flutter日历插件flutter_clean_calendar2的使用

本插件是Carlos Peña创建的flutter_clean_calendar插件的一个修改版本。它已被修改以适应最新版本的Flutter（当前为Flutter 3.10.5）。

原始包

原始的flutter_clean_calendar包可以在这里找到。

许可证

此修改后的包根据MIT许可证分发。更多信息请参见LICENSE文件。

原始许可证

原始的flutter_clean_calendar包也根据MIT许可证分发。更多信息请参见ORIGINAL_LICENSE文件。

flutter_clean_calendar

注意：

由于我的当前工作，我无法继续维护此项目了。这是一段激动人心的旅程，感谢所有使用过它的用户。 你可以现在使用@rwbr维护的项目，他的插件是从这个项目fork出来的，所以可以确保这里的功能都能得到支持并且更多。 你可以在推特上通过@elcharliep找到我。

这是一个基于flutter_calendar的简单Flutter日历。 感谢@AppleEducate的贡献。 你可以通过上下滑动日历来切换周视图和月视图。 它会显示特定日期的事件数量。 它会用不同的颜色显示已经完成的事件。

破坏性更改

  • 引入了CleanCalendarEvent类。这使得之前存储事件的Map语法变得不兼容。

使用方法

将Calendar小部件嵌入到列中。在日历下方（作为列中的第二个小部件）放置一个ListView.builder小部件来渲染事件列表。

Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    Container(
      child: Calendar(
        startOnMonday: true,
        weekDays: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
        events: _events,
        onRangeSelected: (range) => print('Range is ${range.from}, ${range.to}'),
        onDateSelected: (date) => _handleNewDate(date),
        isExpandable: true,
        eventDoneColor: Colors.green,
        selectedColor: Colors.pink,
        todayColor: Colors.blue,
        eventColor: Colors.grey,
        locale: 'de_DE',
        todayButtonText: 'Heute',
        expandableDateFormat: 'EEEE, dd. MMMM yyyy',
        dayOfWeekStyle: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.w800,
            fontSize: 11),
      ),
    ),
    _buildEventList()
  ],
),

...

/// 这个函数[_buildEventList]构造了选中日期的事件列表。该列表会在周视图或月视图下方渲染。
Widget _buildEventList() {
  return Expanded(
    child: ListView.builder(
      padding: EdgeInsets.all(0.0),
      itemBuilder: (BuildContext context, int index) {
        final CleanCalendarEvent event = _selectedEvents[index];
        final String start =
            DateFormat('HH:mm').format(event.startTime).toString();
        final String end =
            DateFormat('HH:mm').format(event.endTime).toString();
        return ListTile(
          contentPadding:
              EdgeInsets.only(left: 2.0, right: 8.0, top: 2.0, bottom: 2.0),
          leading: Container(
            width: 10.0,
            color: event.color,
          ),
          title: Text(event.summary),
          subtitle: event.description.isNotEmpty ? Text(event.description) : null,
          trailing: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [Text(start), Text(end)],
          ),
          onTap: () {},
        );
      },
      itemCount: _selectedEvents.length,
    ),
  );
}

更多细节请参阅示例。

属性

/// [onDateSelected] 是类型为 [ValueChanged<DateTime>] 的回调函数，
/// 当点击某个日期时会被调用
/// [onMonthChanged] 是类型为 [ValueChanged<DateTime>] 的回调函数，
/// 当切换到另一个月份时会被调用
/// [onExpandStateChanged] 是类型为 [ValueChanged<bool>] 的回调函数，
/// 当视图从展开变为压缩或反之时会被调用
/// [onRangeSelected] 包含一个类型为 [ValueChanged] 的回调函数，
/// 在范围发生变化时（切换到下一个或前一个星期或一个月）会被调用
/// [isExpandable] 是一个 [bool]。通过这个参数你可以控制视图是否可以从周视图扩展到月视图，默认值为 [false]。
/// [dayBuilder] 可以包含一个 [Widget]。如果这个属性不为空（!= null），则会使用这个小部件来渲染日历格子（因此你可以自定义视图）
/// [hideArrows] 是一个布尔值。当设置为 [true] 时，顶部导航栏中的箭头（用于导航到下一周/月）将被隐藏。默认值为 [false]。
/// [hideTodayIcon] 是一个布尔值。当设置为 [true] 时，顶部导航栏中的今天图标（按钮，用于导航到今天的日期）将被隐藏。默认值为 [false]。
/// [hideBottomBar] 目前没有功能。默认值为 [false]。
/// [events] 是类型为 [Map<DateTime, List<CleanCalendarEvent>>] 的数据结构。这个数据结构包含了要显示的事件
/// [selectedColor] 这是应用在选中日期圆圈上的颜色
/// [todayColor] 这是今天的日期的颜色
/// [todayButtonText] 是一个 [String]。通过这个属性你可以设置今天图标的标题（按钮，用于导航到今天的日期）。如果留空，则日历会使用字符串 "Today"。
/// [eventColor] 允许你选择事件点的颜色。如果 `CleanCalendarEvent` 属性 color 没有设置，日历将使用这个参数。
/// [eventDoneColor] 通过这个属性你可以定义已完成事件的颜色，即过去的事件。
/// [initialDate] 是类型为 [DateTime] 的值。它可以包含一个可选的开始日期。这是日历最初选中的日期。默认情况下不设置此参数。然后日历使用 `DateTime.now()`。
/// [isExpanded] 是一个布尔值。如果设置为 [true]，日历将以月视图形式渲染。
/// [weekDays] 包含一个 [List<String>] 定义星期几的名称，以便可以按当前语言环境命名它们。
/// [locale] 是一个 [String]。这个设置用于根据当前语言环境格式化日期。
/// [startOnMonday] 是一个 [bool]。这个参数允许日历确定一周的第一天。
/// [dayOfWeekStyle] 是一个 [TextStyle] 用于样式化顶部导航栏中的星期几文本。
/// [bottomBarTextStyle] 是一个 [TextStyle]，用于设置底部导航栏中的文本样式。
/// [bottomBarArrowColor] 可以设置底部导航栏中展开/压缩日历的箭头颜色。
/// [bottomBarColor] 设置底部导航栏的颜色。
/// [expandableDateFormat] 定义底部导航栏中的日期格式。
final ValueChanged<DateTime> onDateSelected;
final ValueChanged<DateTime> onMonthChanged;
final ValueChanged<bool> onExpandStateChanged;
final ValueChanged onRangeSelected;
final bool isExpandable;
final DayBuilder dayBuilder;
final bool hideArrows;
final bool hideTodayIcon;
final Map<DateTime, List<CleanCalendarEvent>> events;
final Color selectedColor;
final Color todayColor;
final String todayButtonText;
final Color eventColor;
final Color eventDoneColor;
final DateTime initialDate;
final bool isExpanded;
final List<String> weekDays;
final String locale;
final bool startOnMonday;
final bool hideBottomBar;
final TextStyle dayOfWeekStyle;
final TextStyle bottomBarTextStyle;
final Color bottomBarArrowColor;
final Color bottomBarColor;
final String expandableDateFormat;

示例事件数据

由于引入了CleanCalendarEvent类，事件映射的语法发生了变化。

final Map<DateTime, List<CleanCalendarEvent>> _events = {
  DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day): [
    CleanCalendarEvent('Event A',
        startTime: DateTime(DateTime.now().year, DateTime.now().month,
            DateTime.now().day, 10, 0),
        endTime: DateTime(DateTime.now().year, DateTime.now().month,
            DateTime.now().day, 12, 0),
        description: 'A special event',
        color: Colors.blue[700]),
  ],
  DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day + 2): [
    CleanCalendarEvent('Event B',
        startTime: DateTime(DateTime.now().year, DateTime.now().month,
            DateTime.now().day + 2, 10, 0),
        endTime: DateTime(DateTime.now().year, DateTime.now().month,
            DateTime.now().day + 2, 12, 0),
        color: Colors.orange),
    CleanCalendarEvent('Event C',
        startTime: DateTime(DateTime.now().year, DateTime.now().month,
            DateTime.now().day + 2, 14, 30),
        endTime: DateTime(DateTime.now().year, DateTime.now().month,
            DateTime.now().day + 2, 17, 0),
        color: Colors.pink),
  ],
};

更多关于Flutter日历插件flutter_clean_calendar2的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter日历插件flutter_clean_calendar2的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_clean_calendar2 是一个 Flutter 插件，用于提供一个简洁、可定制的日历组件。它可以帮助你在应用中轻松地集成日历功能，并支持事件标记、日期选择等功能。以下是如何使用 flutter_clean_calendar2 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_clean_calendar2 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_clean_calendar2: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 flutter_clean_calendar2 包：

import 'package:flutter_clean_calendar2/flutter_clean_calendar2.dart';

3. 使用日历组件

接下来，你可以在你的应用中使用 Calendar 组件。以下是一个简单的示例：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CalendarExample(),
    );
  }
}

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

class _CalendarExampleState extends State<CalendarExample> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Clean Calendar Example'),
      ),
      body: Calendar(
        startOnMonday: true,
        selectedColor: Colors.blue,
        todayColor: Colors.green,
        eventColor: Colors.red,
        eventDoneColor: Colors.grey,
        bottomBarColor: Colors.blueAccent,
        onRangeSelected: (range) {
          print('Selected range: ${range.from} - ${range.to}');
        },
        onDateSelected: (date) {
          print('Selected date: $date');
        },
        events: {
          DateTime(2023, 10, 1): ['Event 1', 'Event 2'],
          DateTime(2023, 10, 5): ['Event 3'],
        },
      ),
    );
  }
}
回到顶部