Flutter日历展示与灵活配置插件flutter_flexible_calendar的使用

Flutter日历展示与灵活配置插件flutter_flexible_calendar的使用

flutter_flexible_calendar

Pub Package

高功能、特性丰富的flutter_flexible_calendar组件适用于Flutter。

图片示例

标准 横向 单选 多选
标准 横向 单选 多选

特性

  • 标准日历用户界面
  • 横向日历用户界面
  • 日历头部可更改月份和年份。
  • 新功能:支持在同一个月份内选择多个日期。
  • 新功能:支持范围选择,默认起始选择和结束选择在同一月份。
  • 新功能:支持设置默认单选日期。

使用

确保查看示例代码

安装

pubspec.yaml文件中添加以下行:

dependencies:
  flutter_flexible_calendar: ^1.0.1

基本设置

标准日历

FlutterFlexibleCalendarView(
    showHeader: true, // 显示日历头部
    headerBgColor: Colors.white38, // 设置头部背景颜色
    calendarType: FlutterFlexibleCalendarType.standard, // 设置日历类型为标准
    showWeekendDay: false, // 不显示周末天数
    disabledPreDay: true, // 禁用前一个天数
    colorBg: Colors.transparent, // 设置日历背景颜色
    maxLimitYear: 2, // 设置最大允许移动的年数
    minLimitYear: 2, // 设置最小允许移动的年数
    month: DateTime(_currentMonth.year, _currentMonth.month, 1), // 设置默认月份
    didResult: (item, datetime) { // 返回用户选择的日期
      print("itme: ${item?.date}");
      print("itme: ${item?.dateTime}");
      print("itme: ${item?.nameOffWeek}");
      print("date: ${datetime?.day}");
      print("date: ${datetime?.month}");
      print("date: ${datetime?.year}");
    },
    didDisableItemClick: () {}, // 当点击禁用项时调用
    didWeekendItemClick: () {}, // 当点击周末项时调用
)

横向日历

FlutterFlexibleCalendarView(
    showHeader: true,
    headerBgColor: Colors.white38,
    calendarType: FlutterFlexibleCalendarType.horizontal,
    showWeekendDay: false,
    disabledPreDay: true,
    colorBg: Colors.transparent,
    maxLimitYear: 2,
    minLimitYear: 2,
    month: DateTime(_currentMonth.year, _currentMonth.month, 1),
    didResult: (item, datetime) {
      print("itme: ${item?.date}");
      print("itme: ${item?.dateTime}");
      print("itme: ${item?.nameOffWeek}");
      print("date: ${datetime?.day}");
      print("date: ${datetime?.month}");
      print("date: ${datetime?.year}");
    },
    didDisableItemClick: () {},
    didWeekendItemClick: () {},
)

单选

FlutterFlexibleCalendarView(
    showHeader: true,
    headerBgColor: Colors.white38,
    calendarType: FlutterFlexibleCalendarType.standard,
    showWeekendDay: false,
    disabledPreDay: true,
    colorBg: Colors.transparent,
    maxLimitYear: 2,
    minLimitYear: 2,
    month: DateTime(_currentMonth.year, _currentMonth.month, 1),
    isMultipleSelected: false, // 设置为单选
    currentSelected: DateTime(2024, 4, 24), // 设置默认选中日期
    didResult: (item, datetime) {
     if (kDebugMode) {
        print(
            "date selected: ${item?.date}, ${item?.dateTime}, ${item?.nameOffWeek}");
      }
    },
    didDisableItemClick: () {},
    didWeekendItemClick: () {},
)

多选

FlutterFlexibleCalendarView(
    showHeader: true,
    headerBgColor: Colors.white38,
    calendarType: FlutterFlexibleCalendarType.standard,
    showWeekendDay: false,
    disabledPreDay: true,
    colorBg: Colors.transparent,
    maxLimitYear: 2,
    minLimitYear: 2,
    month: DateTime(_currentMonth.year, _currentMonth.month, 1),
    isMultipleSelected: true, // 设置为多选
    setStartSelected: DateTime(2024, 4, 13), // 设置默认开始选中日期
    setEndSelected: DateTime(2024, 4, 19), // 设置默认结束选中日期
    didResult: (item, datetime) {
      if (kDebugMode) {
        print(
            "date selected: ${item?.date}, ${item?.dateTime}, ${item?.nameOffWeek}");
      }
    },
    didMultipleSelected: (firstDate, lastDate) {
      if (kDebugMode) {
        print(
            "firstDate: ${firstDate?.date}, ${firstDate?.dateTime}, ${firstDate?.nameOffWeek}");
        print(
            "lastDate: ${lastDate?.date}, ${lastDate?.dateTime}, ${lastDate?.nameOffWeek}");
      }
    },
    didDisableItemClick: () {},
    didWeekendItemClick: () {},
)

参数

* showHeader : 显示日历头部。 
* headerBgColor : 设置头部背景颜色。
* calendarType : 设置日历类型 (horizontal, standard)。
* showWeekendDay: 显示上个月的周末天数。 
* disabledPreDay: 禁用前一个天数。
* colorBg: 设置日历背景颜色。
* maxLimitYear: 设置最大允许移动的年数。
* minLimitYear: 设置最小允许移动的年数。
* month: 设置默认月份。
* didResult: 函数返回用户选择的日期。
* didDisableItemClick: 函数返回点击禁用项的状态。
* didWeekendItemClick: 函数返回点击周末项的状态。
* headerArrowLeft: 允许更改左侧箭头图标。
* headerArrowRight: 允许更改右侧箭头图标。
* isMultipleSelected : 允许设置多选 (true , false)。
* setStartSelected: 设置默认开始选中日期(例如:  DateTime(2024, 4, 13))。
* setEndSelected: 设置默认结束选中日期(例如:  DateTime(2024, 4, 19))。
* currentSelected: 设置默认单选日期(例如: DateTime(2024, 4, 24))。
* 其他你可以检查我们的类。

事件

使用didResult返回用户选择的日期。

didResult: (item, datetime) {

}

使用didDisableItemClick返回点击禁用项的状态。

didDisableItemClick: () {

}

使用didWeekendItemClick返回点击周末项的状态。

didWeekendItemClick: () {

}

使用didMultipleSelected返回第一个和最后一个选中的日期。

didMultipleSelected: (firstDate, lastDate) {

}

更多关于Flutter日历展示与灵活配置插件flutter_flexible_calendar的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter日历展示与灵活配置插件flutter_flexible_calendar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何使用 flutter_flexible_calendar 插件在 Flutter 应用中展示和灵活配置日历的示例代码。这个插件提供了丰富的功能,允许开发者根据需要定制日历视图。

首先,确保你已经在 pubspec.yaml 文件中添加了 flutter_flexible_calendar 依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_flexible_calendar: ^最新版本号  # 请替换为最新的版本号

然后,运行 flutter pub get 以获取依赖。

以下是一个完整的示例代码,展示如何使用 flutter_flexible_calendar 插件:

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

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

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

class CalendarPage extends StatefulWidget {
  @override
  _CalendarPageState createState() => _CalendarPageState();
}

class _CalendarPageState extends State<CalendarPage> {
  FlexibleCalendarController _controller;

  @override
  void initState() {
    super.initState();
    _controller = FlexibleCalendarController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Flexible Calendar Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: FlexibleCalendar(
          controller: _controller,
          // 初始日期设置为当前月份
          firstDate: DateTime(DateTime.now().year, DateTime.now().month, 1),
          lastDate: DateTime(DateTime.now().year, DateTime.now().month + 1, 1).subtract(Duration(days: 1)),
          // 配置日历项点击事件
          onDaySelected: (date, events) {
            print('Selected date: $date');
            // 这里可以处理点击事件,例如显示该日期的详细事件
          },
          // 配置日期装饰器,用于自定义日期显示样式
          dateBuilders: {
            DateTime.now(): CustomDateBuilder(
              decoration: BoxDecoration(
                color: Colors.blue.withOpacity(0.3),
                borderRadius: BorderRadius.circular(10),
              ),
              textStyle: TextStyle(color: Colors.white),
            ),
          },
          // 配置周末日期装饰器
          weekendBuilders: {
            DateTime.now().subtract(Duration(days: 1)): CustomDateBuilder(
              decoration: BoxDecoration(
                color: Colors.red.withOpacity(0.3),
                borderRadius: BorderRadius.circular(10),
              ),
              textStyle: TextStyle(color: Colors.white),
            ),
          },
          // 配置自定义事件装饰器
          eventBuilders: (date) {
            if (date.day == 15) {
              return [
                CustomEventBuilder(
                  decoration: BoxDecoration(
                    color: Colors.green.withOpacity(0.5),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  dotDecoration: BoxDecoration(
                    color: Colors.green,
                    shape: BoxShape.circle,
                  ),
                ),
              ];
            }
            return [];
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 导航到下一个月份
          _controller.nextMonth();
        },
        tooltip: 'Next Month',
        child: Icon(Icons.arrow_forward),
      ),
    );
  }
}

// 自定义日期装饰器
class CustomDateBuilder extends DateBuilder {
  @override
  Widget build(BuildContext context, DateTime date, List<String> events) {
    return Container(
      decoration: decoration,
      child: Center(
        child: Text(
          date.day.toString(),
          style: textStyle,
        ),
      ),
    );
  }
}

// 自定义事件装饰器
class CustomEventBuilder extends EventBuilder {
  @override
  Widget build(BuildContext context, DateTime date) {
    return Positioned(
      bottom: 2,
      right: 2,
      child: Container(
        decoration: decoration,
        child: dot != null
            ? Container(
                width: 6,
                height: 6,
                decoration: dotDecoration,
              )
            : null,
      ),
    );
  }
}

代码说明:

  1. 依赖导入:确保在 pubspec.yaml 中添加了 flutter_flexible_calendar 依赖。
  2. 基本结构:创建了一个简单的 Flutter 应用,包含一个 CalendarPage 页面。
  3. 控制器初始化:在 CalendarPageinitState 方法中初始化了 FlexibleCalendarController 控制器。
  4. 日历配置
    • 设置了初始日期范围。
    • 配置了日期点击事件。
    • 使用 dateBuilders 自定义了特定日期的样式。
    • 使用 weekendBuilders 自定义了周末日期的样式。
    • 使用 eventBuilders 自定义了特定日期的事件样式。
  5. 自定义装饰器:定义了 CustomDateBuilderCustomEventBuilder 类,用于自定义日期和事件的显示样式。
  6. 浮动按钮:添加了一个浮动按钮,用于导航到下一个月份。

这个示例展示了如何使用 flutter_flexible_calendar 插件进行基本的日历展示和灵活配置。你可以根据需要进一步扩展和定制。

回到顶部