Flutter日历插件flutter_neat_and_clean_calendar的使用

简介

flutter_neat_and_clean_calendar 是一个基于 flutter_clean_calendar 包的简单 Flutter 日历组件。该包引入了一个新的 NeatCleanCalendarEvent 对象，用于在日历小部件中传递数据。通过这种方式，可以为日历中的事件点设置不同的颜色。

功能特点

事件列表：日历下方会显示选定日期的事件列表。
高度可定制：可以通过多种属性自定义日历的外观和行为。
不同类型的事件：
- 单日事件（在某一天的特定时间开始和结束）
- 全天事件（覆盖一整天，没有具体的开始和结束时间）
- 多日事件（在某一天的特定时间开始，在另一天的特定时间结束）

使用方法

1. 添加依赖

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

dependencies:
  flutter_neat_and_clean_calendar: ^0.4.1

2. 安装依赖

运行以下命令安装依赖：

flutter pub get

3. 导入包

在 Dart 文件中导入包：

import 'package:flutter_neat_and_clean_calendar/flutter_neat_and_clean_calendar.dart';

4. 使用示例

以下是一个基本的使用示例，展示了如何创建一个包含自定义颜色和事件的日历：

import 'package:flutter/material.dart';
import 'package:flutter_neat_and_clean_calendar/flutter_neat_and_clean_calendar.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Clean Calendar Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      home: CalendarScreen(),
      localizationsDelegates: GlobalMaterialLocalizations.delegates,
      supportedLocales: [
        const Locale('en'),
        const Locale('fr'),
        const Locale('de'),
        const Locale('es'),
        const Locale('it'),
        const Locale('ru'),
      ],
    );
  }
}

class CalendarScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _CalendarScreenState();
  }
}

class _CalendarScreenState extends State<CalendarScreen> {
  bool showEvents = true;

  List<NeatCleanCalendarEvent> _todaysEvents = [
    NeatCleanCalendarEvent(
      '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],
    ),
  ];

  final List<NeatCleanCalendarEvent> _eventList = [
    NeatCleanCalendarEvent(
      'MultiDay Event A',
      description: 'test desc',
      startTime: DateTime(
          DateTime.now().year, DateTime.now().month, DateTime.now().day, 10, 0),
      endTime: DateTime(DateTime.now().year, DateTime.now().month,
          DateTime.now().day + 2, 12, 0),
      color: Colors.orange,
      isMultiDay: true,
    ),
    NeatCleanCalendarEvent('Event X',
        description: 'test desc',
        startTime: DateTime(DateTime.now().year, DateTime.now().month,
            DateTime.now().day, 10, 30),
        endTime: DateTime(DateTime.now().year, DateTime.now().month,
            DateTime.now().day, 11, 30),
        color: Colors.lightGreen,
        isAllDay: false,
        isDone: true,
        icon: 'assets/event1.jpg',
        wide: false),
    NeatCleanCalendarEvent('Allday Event B',
        description: 'test desc',
        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,
        isAllDay: true,
        icon: 'assets/event1.jpg',
        wide: false),
    NeatCleanCalendarEvent(
      'Normal Event D',
      description: 'test desc',
      startTime: DateTime(DateTime.now().year, DateTime.now().month,
          DateTime.now().day, 14, 30),
      endTime: DateTime(
          DateTime.now().year, DateTime.now().month, DateTime.now().day, 17, 0),
      color: Colors.indigo,
      wide: true,
      icon: 'assets/events.jpg',
    ),
    NeatCleanCalendarEvent(
      'Normal Event E',
      description: 'test desc',
      startTime: DateTime(
          DateTime.now().year, DateTime.now().month, DateTime.now().day, 7, 45),
      endTime: DateTime(
          DateTime.now().year, DateTime.now().month, DateTime.now().day, 9, 0),
      color: Colors.indigo,
      wide: true,
      icon: 'assets/profile.jpg',
    ),
  ];

  @override
  void initState() {
    super.initState();
    // 强制选择今天，以便显示今天的事件列表
    _handleNewDate(DateTime(
        DateTime.now().year, DateTime.now().month, DateTime.now().day));
  }

  Widget eventCell(BuildContext context, NeatCleanCalendarEvent event,
      String start, String end) {
    return Container(
        padding: EdgeInsets.all(8.0),
        child: Text('Calendar Event: ${event.summary} from $start to $end'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Calendar(
          startOnMonday: true,
          weekDays: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
          eventsList: _eventList,
          isExpandable: true,
          // 您可以设置自己的事件单元格构建函数来自定义事件单元格
          // 尝试取消以下行的注释
          // eventCellBuilder: eventCell,
          eventDoneColor: Colors.deepPurple,
          selectedColor: Colors.blue,
          selectedTodayColor: Colors.green,
          todayColor: Colors.teal,
          defaultDayColor: Colors.orange,
          defaultOutOfMonthDayColor: Colors.grey,
          datePickerDarkTheme: ThemeData.dark().copyWith(
            colorScheme: ColorScheme.dark(
              primary: Colors.blue,
              onPrimary: Colors.yellow,
              surface: Colors.grey,
              onSurface: Colors.yellow,
            ),
            textButtonTheme: TextButtonThemeData(
              style: TextButton.styleFrom(
                foregroundColor: Colors.orange,
              ),
            ),
          ),
          datePickerLightTheme: ThemeData.dark().copyWith(
            colorScheme: ColorScheme.dark(
              primary: Colors.blue,
              onPrimary: Colors.white,
              surface: Colors.white,
              onSurface: Colors.teal,
            ),
            textButtonTheme: TextButtonThemeData(
              style: TextButton.styleFrom(
                foregroundColor: Colors.orange,
              ),
            ),
          ),
          eventColor: null,
          locale: 'de_DE',
          todayButtonText: 'Heute',
          allDayEventText: 'Ganztägig',
          multiDayEndText: 'Ende',
          isExpanded: true,
          expandableDateFormat: 'EEEE, dd. MMMM yyyy',
          onEventSelected: (value) {
            print('Event selected ${value.summary}');
          },
          onEventLongPressed: (value) {
            print('Event long pressed ${value.summary}');
          },
          onDateSelected: (value) {
            print('Date selected $value');
          },
          onRangeSelected: (value) {
            print('Range selected ${value.from} - ${value.to}');
          },
          datePickerType: DatePickerType.date,
          dayOfWeekStyle: TextStyle(
              color: Colors.red, fontWeight: FontWeight.w800, fontSize: 11),
          showEventListViewIcon: true,
          showEvents: showEvents,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            showEvents = !showEvents;
          });
        },
        child: Icon(showEvents ? Icons.visibility_off : Icons.visibility),
        backgroundColor: Colors.green,
      ),
    );
  }

  void _handleNewDate(date) {
    print('Date selected: $date');
  }
}

属性说明

事件处理程序

onDateSelected：用户选择新日期时的回调函数。
onMonthChanged：显示的月份变化时的回调函数。
onExpandStateChanged：用户更改日历扩展状态时的回调函数。
onRangeSelected：用户选择新的日期范围时的回调函数。
onEventSelected：用户点击事件列表中的某个事件时的回调函数。
onEventLongPressed：用户长按事件列表中的某个事件时的回调函数。
onListViewStateChanged：事件列表状态变化时的回调函数。
onEventsUpdated：eventsMap 更新时的回调函数。
onPrintLog：从日历小部件传递日志消息到父小部件的回调函数。
onTodayButtonPressed：用户点击“今天”按钮时的回调函数。

选项

isExpandable：是否显示扩展按钮以切换周视图和月视图。
dayBuilder：用于渲染日历单元格的自定义小部件。
eventListBuilder：用于渲染事件列表的自定义小部件。
eventCellBuilder：用于渲染事件单元格的自定义小部件。
datePickerType：日期选择器的类型，可以选择隐藏、年份或日期。
hideArrows：是否隐藏导航箭头。
hideTodayIcon：是否隐藏“今天”图标。
defaultDayColor：当前月份未选中的日期的颜色。
defaultOutOfMonthDayColor：当前月份之外的日期的颜色。
selectedColor：选中日期的颜色。
selectedTodayColor：选中今天日期的颜色。
todayColor：未选中今天日期的颜色。
topRowIconColor：顶部栏图标的颜色。
datePickerLightTheme：日期选择器在浅色模式下的主题。
datePickerDarkTheme：日期选择器在深色模式下的主题。
todayButtonText：今天按钮的文本。
allDayEventText：全天事件的文本。
multiDayEndText：多日事件结束的文本。
eventColor：事件点的颜色。
eventDoneColor：已完成事件的颜色。
weekDays：星期几的名称。
initialDate：初始选中的日期。
locale：日期格式化使用的语言环境。
startOnMonday：一周是否从周一开始。
dayOfWeekStyle：星期几文本的样式。
bottomBarTextStyle：底部栏文本的样式。
bottomBarArrowColor：底部栏箭头的颜色。
bottomBarColor：底部栏的颜色。
expandableDateFormat：底部栏日期的格式。
displayMonthTextStyle：顶部栏月份文本的样式。
datePickerConfig：日期选择器的配置。
eventTileHeight：事件列表项的高度。
showEvents：是否显示事件列表。
forceEventListView：是否强制显示事件列表视图。
showEventListViewIcon：是否显示事件列表图标。

设置日历事件

从 v0.4.0 版本开始，设置日历事件的方式发生了变化。现在需要使用 eventsList 属性来传递事件列表。例如：

final List<NeatCleanCalendarEvent> _eventList = [
  NeatCleanCalendarEvent(
    'MultiDay 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 + 2, 12, 0),
    color: Colors.orange,
    isMultiDay: true,
  ),
  NeatCleanCalendarEvent(
    'Allday Event B',
    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,
    isAllDay: true,
  ),
  NeatCleanCalendarEvent(
    'Normal Event D',
    startTime: DateTime(DateTime.now().year, DateTime.now().month,
        DateTime.now().day, 14, 30),
    endTime: DateTime(
        DateTime.now().year, DateTime.now().month, DateTime.now().day, 17, 0),
    color: Colors.indigo,
  ),
];

示例

基本的小部件与自定义颜色

Calendar(
  eventDoneColor: Colors.green,
  selectedColor: Colors.pink,
  todayColor: Colors.blue,
  eventColor: Colors.grey,
)

显示日期选择器以跳转到特定日期

Calendar(
  datePickerType: DatePickerType.date
)

处理全天事件

NeatCleanCalendarEvent('Allday Event B',
    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,
    isAllDay: true,
)

可扩展的日历视图

Calendar(
  isExpandable: true;
)

自定义日历单元格

Calendar(
  dayBuilder: (BuildContext context, DateTime day) {
    return Text("!");
  },
)

自定义事件列表

Calendar(
  eventListBuilder: (BuildContext context,
      List<NeatCleanCalendarEvent> _selectedEvents) {
    return Text("!");
  },
)

希望这些信息对您有所帮助！如果您有任何问题或需要进一步的帮助，请随时提问。

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

nodeper 1楼•14 小时前

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

当然，以下是如何在Flutter项目中集成并使用flutter_neat_and_clean_calendar插件的示例代码。这个插件提供了一个简洁且美观的日历组件，适用于展示和选择日期。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_neat_and_clean_calendar: ^最新版本号  # 请替换为实际发布的最新版本号

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

2. 导入插件

在你的Dart文件中（例如main.dart），导入插件：

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

3. 使用插件

下面是一个简单的示例，展示了如何在Flutter应用中使用flutter_neat_and_clean_calendar插件：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Calendar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CalendarScreen(),
    );
  }
}

class CalendarScreen extends StatefulWidget {
  @override
  _CalendarScreenState createState() => _CalendarScreenState();
}

class _CalendarScreenState extends State<CalendarScreen> {
  DateTime? selectedDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Calendar Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Text(
              selectedDate == null ? 'No date selected' : 'Selected Date: ${selectedDate!.toLocal()}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            Expanded(
              child: NeatCalendar(
                selectedDate: selectedDate,
                onDateSelected: (date) {
                  setState(() {
                    selectedDate = date;
                  });
                },
                // 其他可选参数，如月份标题、星期标题等
                monthTitleTextStyle: TextStyle(fontSize: 24, color: Colors.black),
                dayTextStyle: TextStyle(fontSize: 18, color: Colors.black),
                todayTextStyle: TextStyle(fontSize: 18, color: Colors.red),
                selectedDayTextStyle: TextStyle(fontSize: 18, color: Colors.white, fontWeight: FontWeight.bold),
                selectedDayBackgroundColor: Colors.blue,
                todayBackgroundColor: Colors.grey.withOpacity(0.3),
                daysOfWeekTextStyle: TextStyle(fontSize: 16, color: Colors.grey),
                headerBackgroundColor: Colors.white,
                headerTextStyle: TextStyle(fontSize: 20, color: Colors.black),
                showHeader: true,
                showTrailingButton: true,
                trailingButtonText: 'Today',
                onTrailingButtonPressed: () {
                  final DateTime now = DateTime.now();
                  setState(() {
                    selectedDate = DateTime(now.year, now.month, now.day);
                  });
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明

添加依赖：在pubspec.yaml中添加flutter_neat_and_clean_calendar。
导入插件：在Dart文件中导入flutter_neat_and_clean_calendar。
创建UI：
- 使用NeatCalendar组件展示日历。
- 通过selectedDate属性设置当前选中的日期。
- 使用onDateSelected回调处理日期选择事件。
- 自定义日历的样式，如标题、日期的文本样式和背景颜色等。

这个示例展示了基本的日历集成和日期选择功能，你可以根据需要进一步自定义和扩展。