Flutter日曆組件 mini_calendar

mini_calendar

插件地址 https://pub.flutter-io.cn/packages/mini_calendar

GitHub https://github.com/OpenFlutter/mini_calendar

Date component developed with Flutter, plans to support display, swipe left and right, add date mark, radio, display week, etc.

使用Flutter開發的日期組件，計劃支持顯示，左右滑動，添加日期標記，單選，顯示星期等功能。

主要想實現的內容

使用

引入庫

dependencies:
  mini_calendar: ^0.2.1
複製代碼

導包

import 'package:mini_calendar/mini_calendar.dart';
複製代碼

月視圖(MonthWidget)

MonthWidget();// 默認當月
複製代碼

• 可經過控制器參數來控制顯示的月份以及選擇的日期

MonthWidget(
  controller: MonthController.init(
      MonthOption<String>(
        currentDay: DateDay.now().copyWith(month: index + 1, day: Random().nextInt(27) + 1),
        currentMonth: DateMonth.now().copyWith(month: index + 1),
      )
  ),
)
複製代碼

• 支持顯示連選

MonthWidget(
  controller: MonthController.init(MonthOption(
    currentMonth: DateMonth.now().copyWith(month: 1),
    enableContinuous: true,
    firstSelectDay: DateDay.now().copyWith(month: 1, day: 8),
    secondSelectDay: DateDay.now().copyWith(month: 1, day: 18),
  )),
)
複製代碼

• 支持添加標記
• ……

滾動日曆(MonthPageView)

控制器須要建立後獲取 onCreated

MonthPageView(
  padding: EdgeInsets.all(1),
  scrollDirection: Axis.horizontal,// 水平滑動或者豎直滑動
  option: MonthOption(
    enableContinuous: true,// 單選、連選控制
    marks: { 
      DateDay.now().copyWith(day: 1): '111',
      DateDay.now().copyWith(day: 5): '222',
      DateDay.now().copyWith(day: 13): '333',
      DateDay.now().copyWith(day: 19): '444',
      DateDay.now().copyWith(day: 26): '444',
    },
  ),
  showWeekHead: true, // 顯示星期頭部
  onContinuousSelectListen: (firstDay, endFay) {
  },// 連選回調
  onMonthChange: (month) {
  },// 月份更改回調
  onDaySelected: (day, data) {
  },// 日期選中會迪歐啊
  onCreated: (controller){
  }, // 控制器回調
),
複製代碼

控制器

參數初始化

MonthOption({
    DateDay currentDay,//選擇的日期
    DateMonth currentMonth,//當前月份
    int firstWeek = 7,//第一列顯示的星期 [1,7]
    DateDay firstSelectDay,//連選第一個日期
    DateDay secondSelectDay,//連選第二個日期
    bool enableContinuous = false,//是否支持連選
    Map<DateDay, T> marks = const {},//標記
    DateDay minDay,//可選的最小日期
    DateDay maxDay,//可選的最大日期
  });
複製代碼

註銷

MonthPageController#dispose();
複製代碼

更新

MonthPageController#reLoad();
複製代碼

下一月

MonthPageController#next();
複製代碼

上一月

MonthPageController#last();
複製代碼

跳轉到指定月份

MonthPageController#goto(DateMonth month);
複製代碼

高級功能

自定義

自定義月視圖背景

buildMonthBackground: (_, width, height, month) => Image.network(
    'https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/b0c57bd90abd49d59920924010ab66a9.png!sswm',
    height: height,
    width: width,
    fit: BoxFit.cover,
    ),
複製代碼

自定義月視圖頭部

buildMonthHead: (ctx, width, height, month) => Container(
padding: EdgeInsets.all(5),
child: Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    Text(
      "${month.year}年",
      style: TextStyle(fontSize: 40, color: Colors.white),
    ),
    Container(
      margin: EdgeInsets.only(left: 5, right: 5),
      width: 1,
      color: Colors.yellow,
      height: 50,
    ),
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          "${month.month}月",
          style: TextStyle(fontSize: 18, color: Colors.orange),
        ),
        Text("這是一個自定義的月頭部"),
      ],
    )
  ],
),
),
複製代碼

• 自定義星期頭部
• 自定義日視圖
• ……

更多功能clone項目，運行demo

最後如須要轉載時請用【轉載】juejin.im/editor/post…，尊重原創！！

開源不易，老鐵們多多支持，點個贊也是支持！