CrCalendar

受 Google Calendar 应用启发的，可自定义的 Flutter 日历。

功能
  • CrCalendar 小部件，用于显示可水平滚动的月份视图，并在日期上方显示事件线。
  • 日期选择对话框（使用 CrCalendar 小部件的范围选择模式），可自定义按钮、文本和 CrCalendar 小部件的外观。
来自 示例应用 的截图

安装

将 cr_calendar 添加为 pubspec.yaml 中的依赖项。

然后将其导入到您的项目中

import 'package:cr_calendar/src/cr_calendar.dart';

CrCalendar 的用法

CrCalendar 参数
类型 名称 描述 默认值
CrCalendarController 控制器 日历控制器 –
DateTime（日期时间） initialDate 创建日历时要显示的初始日期 –
OnTapCallback onDayClicked 当在具有 TouchMode.singleTap 触摸模式的日历中点击日期时触发的回调。 –
WeekDays firstDayOfWeek 设置一周开始的日期 WeekDays.sunday
WeekDaysBuilder weekDaysBuilder 用于自定义日历小部件顶部星期几行的构建器。 –
DayItemBuilder dayItemBuilder 用于自定义日期单元格的构建器。 –
布尔值 forceSixWeek 强制日历在月份视图中显示第六行，即使该周不属于当前月份。 假
颜色 backgroundColor 日历的背景颜色 –
整数 maxEventLines 要在日期单元格上显示的事件小部件的数量 4
EventBuilder eventBuilder 事件小部件构建器 –
TouchMode touchMode 日历的触摸模式。 –
双精度 eventsTopPadding 事件小部件上方的内边距，用于校正它们的对齐。 –
OnRangeSelectedCallback onRangeSelected 当日历用作日期选择器时，用于接收所选范围的回调。 –
整数 onSwipeCallbackDebounceMs 用于防抖 CrCalendarController onSwipe 回调的毫秒数。 –
DateTime（日期时间） minDate 最早允许的日期。 –
DateTime（日期时间） maxDate 最晚允许的日期。 –

基本用法

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  CrCalendarController _controller = CrCalendarController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CrCalendar(
          initialDate: DateTime.now(),
          controller: _controller,
        ),
      ),
    );
  }
}

CrCalendar 日期选择器对话框用法

DatePickerProperties 参数
类型 名称 描述 默认值
颜色 backgroundColor 日期选择器对话框和年份选择小部件的背景颜色。 Colors.white
DateTime（日期时间） initialPickerDate 创建对话框时要打开的初始日期。 –
EdgeInsets padding 选择器对话框的内边距。 EdgeInsets.all(8)
DayItemBuilder dayItemBuilder 对话框中日期项的构建器。 –
TouchMode pickerMode 选择器选择模式。 –
WeekDaysBuilder weekDaysBuilder 月份视图上方日期行的构建器。 –
DateTitleBuilder pickerTitleBuilder 选择器对话框顶部小部件的标题构建器。 –
Alignment pickerTitleAlignInLandscape 横屏模式下选择器标题的对齐方式。 Alignment.centerLeft
Widget backButton 选择器控件栏的后退按钮。 –
Widget forwardButton 选择器控件栏的前进按钮。 –
DateTitleBuilder controlBarTitleBuilder 后退按钮和前进按钮之间显示的控件栏标题的构建器。 –
布尔值 showControlBar 隐藏控件栏的选项。 真
YearPickerItemBuilder yearPickerItemBuilder 确认选择按钮的构建器。 –
PickerButtonBuilder okButtonBuilder 确认选择按钮的构建器。 –
PickerButtonBuilder cancelButtonBuilder 取消按钮的构建器。 –
布尔值 forceSixWeek 强制在月份视图中显示六行。 假
WeekDays firstWeekDay 日期选择器日历的起始日期。 WeekDays.sunday
DateTime（日期时间） minDate 最早允许的日期。 –
DateTime（日期时间） maxDate 最晚允许的日期。 –
LandscapeDaysResizeMode landscapeDaysResizeMode LandscapeDaysResizeMode.adaptive – 日期单元格的高度将根据父容器的高度进行调整 LandscapeDaysResizeMode.scrollable – 日期单元格的高度将根据父容器的高度进行调整，前提是它大于单元格宽度。如果空间不足，月份将滚动。 LandscapeDaysResizeMode.adaptive

基本用法

  /// Show calendar in pop up dialog for selecting date range for calendar event.
  void _showDatePicker(BuildContext context) {
    showCrDatePicker(
      context,
      properties: DatePickerProperties(
        firstWeekDay: WeekDays.monday,
        okButtonBuilder: (onPress) =>
            ElevatedButton(child: const Text('OK'), onPressed: onPress),
        cancelButtonBuilder: (onPress) =>
            OutlinedButton(child: const Text('CANCEL'), onPressed: onPress),
        initialPickerDate: DateTime.now(),
      ),
    );
  }

GitHub

查看 Github