Flutter自定义日历插件get_flutter_custom_calendar的使用

概述

get_flutter_custom_calendar 是一个在 Flutter 上实现的自定义日历控件，支持公历、农历、节气、传统节日和常用节假日等。该插件提供了丰富的配置选项，允许开发者根据需求定制日历的样式和功能。

主要特性

• 支持公历，农历，节气，传统节日，常用节假日。
• 可以设置日期范围，支持禁用日期范围。
• 支持单选、多选模式，提供多选超过限制个数的回调和多选超过指定范围的回调。
• 跳转到指定日期，默认支持动画切换。
• 自定义日历Item，支持组合widget的方式和利用canvas绘制的方式。
• 自定义顶部的WeekBar。
• 支持周视图和月视图的展示与切换联动。

效果图

使用

1. 添加依赖

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

dependencies:
  get_flutter_custom_calendar:
    git:
      url: https://github.com/LXD312569496/flutter_custom_calendar.git

2. 导入库

import 'package:get_flutter_custom_calendar/get_flutter_custom_calendar.dart';

3. 创建日历控件

// 创建CalendarController对象
CalendarController controller = CalendarController(
  minYear: 2018,
  minYearMonth: 1,
  maxYear: 2020,
  maxYearMonth: 12,
  showMode: CalendarConstants.MODE_SHOW_MONTH_AND_WEEK,
);

// 创建CalendarViewWidget对象
CalendarViewWidget calendar = CalendarViewWidget(
  calendarController: controller,
);

4. 操作日历

// 切换月视图和周视图
controller.toggleExpandStatus();

// 切换到上一页
controller.previousPage();

// 切换到下一页
controller.nextPage();

2.0版本

主要改动

• UI配置相关的参数，移动到 CalendarView 的构造方法里面（旧版本是在 controller 里面配置）。
• 日历支持 padding 和 margin 属性，item 的大小计算修改。
• 实现日历整体自适应高度。
• controller 提供 changeExtraDataMap 的方法，可以随时动态地修改自定义数据 extraDataMap。
• 支持显示月视图和周视图的情况，优先显示周视图，MODE_SHOW_WEEK_AND_MONTH。
• 支持 verticalSpacing 和 itemSize 属性。

注意事项

• 如果使用2.0之前的版本，则需要将UI配置相关的参数，移动到 CalendarView 的构造方法里面（旧版本是在 controller 里面配置）。
• 暂时没有发现其他问题，如果有其他问题，可以跟我说一下。
• 如果你用这个库做了日历，可以将展示结果分享给我，我贴到文档上进行展示。

示例代码

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

import 'pages/blue_style_page.dart';
import 'pages/custom_sign_page.dart';
import 'pages/custom_style_page.dart';
import 'pages/default_style_page.dart';
import 'pages/multi_select_style_page.dart';
import 'pages/only_week_page.dart';
import 'pages/progress_style_page.dart';
import 'pages/red_style_page.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(
      routes: <String, WidgetBuilder>{
        "/default": (context) => DefaultStylePage(
          title: "默认风格+单选",
        ),
        "/custom": (context) => CustomStylePage(
          title: "自定义风格+单选",
        ),
        "/multi_select": (context) => MultiSelectStylePage(
          title: "自定义风格+多选",
        ),
        "/progress": (context) => ProgressStylePage(
          title: "进度条风格+单选",
        ),
        "/custom_sign": (context) => CustomSignPage(
          title: "自定义额外数据，实现标记功能",
        ),
        "/only_week_view": (context) => OnlyWeekPage(
          title: "仅显示周视图",
        ),
        "/blue_style_page": (context) => BlueStylePage(title: "蓝色背景Demo"),
        "/red_style_page": (context) => RedStylePage(title: "红色Demo"),
      },
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, "/default");
              },
              child: Text("默认风格+单选"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, "/custom");
              },
              child: Text("自定义风格+单选"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, "/multi_select");
              },
              child: Text("自定义风格+多选"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, "/progress");
              },
              child: Text("进度条风格+单选"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, "/custom_sign");
              },
              child: Text("自定义额外数据，实现标记功能"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, "/only_week_view");
              },
              child: Text("仅显示周视图"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, "/blue_style_page");
              },
              child: Text("蓝色Demo"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, "/red_style_page");
              },
              child: Text("红色Demo"),
            )
          ],
        ),
      ),
    );
  }
}