scrolling_day_calendar

一个Flutter日历包，允许用户通过左右滑动或按下箭头来滚动给定的日期。活动日期显示为标题，当天的任务显示在下方。此包可在Android和IOS上使用。

工作原理

  • 在widgets方法中传入
    您只需传入开始日期、结束日期、活动日期和每天要显示的widgets。

  • SetState方法
    您只需传入开始日期、结束日期、活动日期和一个回调函数，
    该包将允许用户通过PageView在日期之间滑动，
    在每次页面更改时，将调用您设置的回调函数，以便您更新给定日期的页面内容。

截图

1

2

用法

使用插件

dependencies:
  flutter:
    sdk: flutter

  scrolling_day_calendar: 2.0.1
  • 导入包
import 'package:scrolling_day_calendar/scrolling_day_calendar.dart';

如何使用Widget传入方法 - 推荐获得更好的体验

DateTime selectedDate = DateTime.now();
DateTime startDate = DateTime.now().subtract(Duration(days: 10));
DateTime endDate = DateTime.now().add(Duration(days: 10));
Map<String, Widget> widgets = Map();
String widgetKeyFormat = "yyyy-MM-dd";

body: ScrollingDayCalendar(
          startDate: startDate,
          endDate: endDate,
          selectedDate: selectedDate,
          dateStyle: TextStyle(
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
          displayDateFormat: "dd, MMM yyyy",
          dateBackgroundColor: Colors.grey,
          forwardIcon: Icons.arrow_forward,
          backwardIcon: Icons.arrow_back,
          pageChangeDuration: Duration(
            milliseconds: 700,
          ),
          widgets: widgets,
          widgetKeyFormat: widgetKeyFormat,
          noItemsWidget: Center(
            child: Text("No items have been added for this date"), // add buttons etc here to add new items for date
          ),
        ),

如何使用SetState方法

// set the initial page value
Widget _pageItems = Text("Inital value");
DateTime selectedDate = DateTime.now();
DateTime startDate = DateTime.now().subtract(Duration(days: 10));
DateTime endDate = DateTime.now().add(Duration(days: 10));
String widgetKeyFormat = "yyyy-MM-dd";

// add to body of a Scaffold
body: ScrollingDayCalendar(
          startDate: startDate,
          endDate: endDate,
          selectedDate: selectedDate,
          onDateChange: (direction, DateTime selectedDate) {
            setState(() {
              pageItems = _widgetBuilder(selectedDate);
            });
          },
          dateStyle: TextStyle(
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
          pageItems: pageItems,
          displayDateFormat: "dd/MM/yyyy",
          dateBackgroundColor: Colors.grey,
          forwardIcon: Icons.arrow_forward,
          backwardIcon: Icons.arrow_back,
          pageChangeDuration: Duration(
            milliseconds: 400,
          ),
          noItemsWidget: Center(
            child: Text("No items have been added for this date"), // add buttons etc here to add new items for date
          ),
        ),

GitHub

https://github.com/bmb-enterprises/scrolling-day-calendar