mini_calendar 0.3.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 80

mini_calendar #

GitHub code size in bytes

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.3.2

导包 #

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),
  )),
)
  • 支持多选
MonthWidget(
  controller: MonthController.init(MonthOption(
    currentMonth: DateMonth.now().copyWith(month: 1),
    enableMultiple: true,
    multipleDays: [
            DateDay.now().copyWith(month: 1, day: 3),
            DateDay.now().copyWith(month: 1, day: 5),
            DateDay.now().copyWith(month: 1, day: 8),
          ],
  )),
)
  • 支持添加标记
  • ……

image.png

滚动日历(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("这是一个自定义的月头部"),
      ],
    )
  ],
),
),
  • 自定义星期头部
  • 自定义日视图
  • ……
image.pngimage.png

更多功能clone项目,运行demo

开源不易,老铁们多多支持,点赞也是支持 😃 ! #

image.pngimage.png

0.3.2 #

  • 支持多选

0.3.1 #

  • 国际化支持(en、zh)

下版本计划

  • 周视图
  • 年视图

0.3.0 #

  • 跳转到指定月份
  • 最大可选日期
  • 最小可选日期

下版本计划

  • 周视图
  • 国际化

0.2.1 #

  • 修复不安全的属性
  • 支持日视图自定义
  • 增加月头部视图支持(可自定义)
  • 可自定义工作日和周末字体颜色
  • 滑动日历视图自适应高度
  • 增加上一月、下一月主动控制

下版本计划

  • 指定月份跳转

0.2.0 #

  • 代码重构
  • 滑动切换
  • 可单选、可连选
  • 月视图添加背景
  • 星期头部可自定义

下版本计划

  • 下一月
  • 上一月
  • 月份跳转

0.1.0 #

  • 实现左右滑动切换月
  • 实现自定义添加mark
  • 实现滑动与点击时间变更监听
  • 实现主动变更月视图
  • 支持设置选择的日期、设置当前视图月

下版本计划

  • 滑动切换
  • 可单选、可连选
  • 月视图添加背景
  • 星期头部可自定义

0.0.1 #

  • 显示日历

下版本计划

  • 实现左右滑动切换月
  • 实现自定义添加mark
  • 实现滑动与点击时间变更监听
  • 实现主动变更月视图
  • 支持设置选择的日期、设置当前视图月

example/lib/main.dart

import 'package:flutter/material.dart';

import 'page/calendar_customize.dart';
import 'page/calendar_view.dart';
import 'page/month_page_view_demo.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'mini calendar',
      home: new HomeWidget(),
    );
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('mini calendar'),
        centerTitle: true,
      ),
      body: ListView(
        children: <Widget>[
          _buildItem(context, '显示日历', CalendarViewPage()),
          _buildItem(context, '自定义日历示例', CalendarCustomizePage()),
          Divider(),
          _buildItem(context, '翻页日历', MonthPageViewDemo()),
        ],
      ),
    );
  }

  Widget _buildItem(BuildContext context, String title, Widget page) {
    return ListTile(
      title: Text(title ?? ''),
      onTap: () => Navigator.push(context, MaterialPageRoute(builder: (ctx) => page)),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  mini_calendar: ^0.3.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:mini_calendar/mini_calendar.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
60
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
80
Learn more about scoring.

We analyzed this package on May 24, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.1
  • pana: 0.13.8-dev
  • Flutter: 1.17.0

Health suggestions

Format lib/controller/month_controller.dart.

Run flutter format to format lib/controller/month_controller.dart.

Format lib/controller/month_page_controller.dart.

Run flutter format to format lib/controller/month_page_controller.dart.

Format lib/handle.dart.

Run flutter format to format lib/handle.dart.

Fix additional 6 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/model/date_day.dart (Run flutter format to format lib/model/date_day.dart.)
  • lib/model/date_month.dart (Run flutter format to format lib/model/date_month.dart.)
  • lib/model/i18n_model.dart (Run flutter format to format lib/model/i18n_model.dart.)
  • lib/model/month_option.dart (Run flutter format to format lib/model/month_option.dart.)
  • lib/widget/month_page_view.dart (Run flutter format to format lib/widget/month_page_view.dart.)
  • lib/widget/month_widget.dart (Run flutter format to format lib/widget/month_widget.dart.)

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test