Flutter 的可水平滑动日历小部件。此小部件可以帮助您构建高度可定制的日历小部件。

矩形样式

calendar1

圆形样式

calendar2

无边框

calendar3

标记日期

calendar4

入门

要开始使用 Flutter，请参阅我们的在线
文档.

Props

props types 默认值
星期 ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
视口比例 双精度 1.0
前几天文本样式 TextStyle
天文本样式 TextStyle
后几天文本样式 TextStyle
前月日期边框颜色 颜色 Colors.transparent
本月日期边框颜色 颜色 Colors.transparent
后月日期边框颜色 颜色 Colors.transparent
日期内边距 双精度 2.0
高度 双精度 double.infinity
width 双精度 double.infinity
今天文本样式 TextStyle fontSize: 14.0, color: Colors.white
日期按钮颜色 颜色 Colors.red
今天边框颜色 颜色 Colors.red
今天按钮颜色 颜色 Colors.red
选定日期时间 DateTime（日期时间）
选定日期文本样式 TextStyle fontSize: 14.0, color: Colors.white
选定日期边框颜色 颜色 Colors.green
选定日期按钮颜色 颜色 Colors.green
日期是否有圆形边框 布尔值
onDayPressed Func
星期文本样式 TextStyle fontSize: 14.0, color: Colors.deepOrange
iconColor 颜色 Colors.blueAccent
标题文本 文本 Text('${DateFormat.yMMM().format(this._dates[1])}')
周末文本样式 TextStyle fontSize: 14.0, color: Colors.pinkAccent
标记日期 List<DateTime []
标记日期颜色 颜色 Colors.blueAccent
标记日期小部件 颜色 Positioned(child: Container(color: Colors.blueAccent, height: 4.0, width: 4.0), bottom: 4.0, left: 18.0);
标题边距 EdgetInsets const EdgeInsets.symmetric(vertical: 16.0)
子元素宽高比 双精度 1.0
星期边距 EdgeInsets const EdgeInsets.only(bottom: 4.0)

安装

将 flutter_calendar_carousel 添加为 pubspec.yaml 中的依赖项。
有关如何添加为依赖项的帮助，请参阅 文档。

用法

import 'package:flutter_calendar_carousel/flutter_calendar_carousel.dart' show CalendarCarousel;
Widget widget() {
  return Container(
    margin: EdgeInsets.symmetric(horizontal: 16.0),
    child: CalendarCarousel(
      current: DateTime.now(),
      onDayPressed: (DateTime date) {
        this.setState(() => _currentDate = date);
      },
      thisMonthDayBorderColor: Colors.grey,
      height: 420.0,
      selectedDateTime: _currentDate,
      daysHaveCircularBorder: false, /// null for not rendering any border, true for circular border, false for rectangular border
//          weekendStyle: TextStyle(
//            color: Colors.red,
//          ),
//          weekDays: null, /// for pass null when you do not want to render weekDays
//          headerText: Container( /// Example for rendering custom header
//            child: Text('Custom Header'),
//          ),
    ),
  );
}

待办事项

  • [x] 渲染星期。
  • [x] 可自定义的 headerWidget。
  • [x] 设置星期可见性。
  • [x] 可自定义周末日期的文本样式。
  • [x] 标记日期。
  • [ ] 多日期选择。
  • [ ] Widget 测试。

GitHub

https://github.com/dooboolab/flutter_calendar_carousel