image
r_calendar
📅📆Flutter日历插件,支持自定义日历,月视图/周视图切换、点击拦截、单选(切换月自动选)、多选(散选/聚选)
.----------------------------------------------
| github地址:
| https://github.com/rhymelph/r_calendar
| pub地址:
| https://pub.dev/packages/r_calendar
| apk体验:
| https://fir.im/2aut
`----------------------------------------------
- [✔] 月视图/周视图切换
- [✔] 自定义日历
- [✔] 点击拦截
- [✔] 单选,切换月/周自动选
- [✔] 多选,散选/聚选
1.如何使用.
-
pubspec.yaml
文件添加依赖
dependencies:
r_calendar: last version
- 导入包
import 'package:r_calendar/r_calendar.dart';
- 单选控制器初始化
///
/// [selectedDate] 默认选中的那天
/// [isAutoSelect] 当月份改变时,是否自动选中对应的月份的同一天
RCalendarController controller= RCalendarController.single(
selectedDate: DateTime.now(),
isAutoSelect: true,);
- 多选控制器初始化
///
/// [selectedDates] 默认选中的日期数组
/// [isDispersion] 是否散选,否则为连续选中
RCalendarController controller = RCalendarController.multiple(
selectedDates: [
DateTime(2019, 12, 1),
DateTime(2019, 12, 2),
DateTime(2019, 12, 3),
],
isDispersion: true);
- 周视图/月视图(默认月视图)
///
/// [mode] 模式
/// - RCalendarMode.week 周视图模式
/// - RCalendarMode.month 月视图模式
RCalendarController controller = RCalendarController.single(
mode:RCalendarMode.week);
- 数据变化监听
/// 添加监听器观察值的变化
RCalendarController controller = RCalendarController.multiple(...)
..addListener((){
// 是否为多选
// controller.isMultiple
// 单选下
// 当月份改变时,是否自动选中对应的月份的同一天
// controller.isAutoSelect
// 当前选中的日期
// controller.selectedDate;
// 多选
// 是否散选,否则为连续选中
// controller.isDispersion;
// 当前选中的日期列表
// controller.selectedDates;
// 周视图/月视图
// controller.mode
});
- 自定义日历
class MyRCalendarCustomWidget extends RCalendarCustomWidget {
// 如果你想设置第一天是星期一,请更改MaterialLocalizations 的firstDayOfWeekIndex
// 日 一 二 三 四 五 六
//构建头部
@override
List<Widget> buildWeekListWidget(BuildContext context,MaterialLocalizations localizations){...};
// 1 2 3 4 5 6 7
//构建普通的日期
@override
Widget buildDateTime(BuildContext context,DateTime time, List<RCalendarType> types){...};
// < 2019年 11月 >
//构建年份和月份 左指示器、右指示器,返回null就没有
@override
Widget buildTopWidget(BuildContext context,RCalendarController controller){...};
//是否不可用,不可用时,无点击事件
@override
bool isUnable(DateTime time, bool isSameMonth){...};
//点击拦截,当返回true时进行拦截,就不会改变选中日期
@override
FutureOr<bool> clickInterceptor(BuildContext context,DateTime dateTime){...};
//子view的高度
@override
double get childHeight=>{...};
}
2.使用它.
import 'package:flutter/material.dart';
import 'package:r_calendar/r_calendar.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
RCalendarController controller;
@override
void initState() {
super.initState();
controller = RCalendarController.multiple(selectedDates: [
DateTime(2019, 12, 1),
DateTime(2019, 12, 2),
DateTime(2019, 12, 3),
]);
// controller = RCalendarController.single(selectedDate: DateTime.now(),isAutoSelect: true);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: RCalendarWidget(
controller: controller,
customWidget: DefaultRCalendarCustomWidget(),
firstDate: DateTime(1970, 1, 1), //当前日历的最小日期
lastDate: DateTime(2055, 12, 31),//当前日历的最大日期
),
);
}
}