WeeklyCalendar

Flutter 的一个非常简单的每周日历小部件。

特点

• 简单的日历小部件
• 本地化支持
• 可自定义的配色方案

用法

请查看示例以获取更多详细信息。

安装

要使用此小部件，请在 pubspec.yaml 中添加以下行

dependencies:
  weekly_calendar: ^0.1.2

基本设置

import 'package:weekly_calendar/weekly_calendar.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: WeeklyCalendar(),
        ),
      ),
    );
  }
}

日历样式

通过使用 CalendarStyle，您可以使用自己喜欢的颜色模式自定义 WeeklyCalendar。

class CalendarStyle {

  /// The locale of the calendar.
  ///
  final String locale;

  /// The padding of the calendar.
  ///
  final EdgeInsets padding;

  /// The margin of the calendar.
  ///
  final EdgeInsets margin;

  /// The decoration of the calendar.
  ///
  final BoxDecoration decoration;

  /// The alignment of the header date text.
  ///
  final Alignment headerDateTextAlign;

  /// The color of the header date text.
  ///
  final Color headerDateTextColor;

  /// Whether to show the header date text.
  ///
  final bool isShowHeaderDateText;

  /// The alignment of the footer date text.
  ///
  final Alignment footerDateTextAlign;

  /// The color of the footer date text.
  ///
  final Color footerDateTextColor;

  /// Whether to show the footer date text.
  ///
  final bool isShowFooterDateText;

  /// The color of the selected circle in DayCell.
  ///
  final Color selectedCircleColor;

  /// The color of the selected circle at today in DayCell.
  ///
  final Color todaySelectedCircleColor;

  /// The color of the day text in DayCell.
  ///
  final Color dayTextColor;

  /// The color of the day text at today in DayCell.
  ///
  final Color todayDayTextColor;

  /// The color of the selected day text in DayCell.
  ///
  final Color selectedDayTextColor;

  /// The color of the weekend day text in DayCell.
  ///
  final Color weekendDayTextColor;

  /// The color of the text in DayOfWeekCell.
  ///
  final Color dayOfWeekTextColor;

  /// The color of the weekend text in DayOfWeekCell.
  ///
  final Color weekendDayOfWeekTextColor;
}

使用 CalendarStyle 时，将其设置如下

WeeklyCalendar(
    style: CalendarStyle(
        locale: "en",
        padding: EdgeInsets.all(10),
        decoration: BoxDecoration(
            color: Colors.black,
            borderRadius: BorderRadius.all(Radius.circular(14)),
        ),
        headerDateTextAlign: Alignment.centerLeft,
        headerDateTextColor: Colors.white,
        footerDateTextColor: Colors.grey,
        isShowFooterDateText: true,
    ),
)

事件

当您在 WeeklyCalendar 中选择特定日期时，可以通过回调函数 onChangedSelectedDate 检索所选日期。

onChangedSelectedDate: (DateTime date) {
    debugPrint("onChangedSelectedDate: $date");
}

您可以使用 isAutoSelect 参数控制在滑动更改显示的周页面时是否自动选择日期。

isAutoSelect: bool,

滑动更改周页面时，您可以检索星期三的日期和页面状态 PageState（前一页或下一页）。

onChangedPage: (DateTime date, PageState state) {
    debugPrint("onChangedPage: $date ${state.name}");
}

GitHub

https://github.com/mlballack/WeeklyCalendarForFlutter