Flutter日历管理插件clean_calendar的使用

Word from creator

Hello👋, Clean Calendar目前处于早期开发阶段，可能会有很多破坏性变化。如果您有任何问题或建议，请通过GitHub issues、邮件、discord或我GitHub个人资料上列出的任何方式联系我。

是的，给这个包一个👍(Pub)或⭐(Github)会鼓励我更多地工作。

Package description

准备好用这个很棒的日历包来增强你的Flutter应用程序吧！凭借其简单而优雅的设计，你可以创建一个完全定制的日历以满足你的需求。它提供了一个可定制的月视图，并且可以高亮显示具有连续性的日期。这只是开始，我们将会添加更多的功能。

Features

• 显示连续日期
• 月度日历
  • 深色模式 | 浅色模式
• 周度日历
  • 深色模式 | 浅色模式

Getting started

添加依赖

在pubspec.yaml文件中添加以下依赖：

dependencies:
  clean_calendar: 

导入包

在您的Dart文件中导入clean_calendar包：

import 'package:clean_calendar/clean_calendar.dart';

Basic Usage

下面是一个简单的使用示例，展示如何在应用中集成CleanCalendar组件：

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 2,
        title: const Text("Calendar"),
      ),
      body: CleanCalendar(
        datesForStreaks: [
          DateTime.now().subtract(Duration(days: 5)),
          DateTime.now().subtract(Duration(days: 4)),
          DateTime.now().subtract(Duration(days: 3)),
          // Add more dates as needed
        ],
      ),
    );
  }
}

Customisations

您可以根据需要自定义日历的外观和行为。例如：

• Customise date boundary behaviour and tap behaviour

  CleanCalendar(
    enableDenseViewForDates: true,
    enableDenseSplashForDates: true,
  )
  

• Disable and hide different types of dates

  CleanCalendar(
    leadingTrailingDatesProperties: DatesProperties(
      disable: true,
      hide: true,
    ),
  )
  

• Customise dates look by changing its properties

  CleanCalendar(
    currentDateProperties: DatesProperties(
      datesDecoration: DatesDecoration(
        datesBorderRadius: 1000,
        datesBackgroundColor: Colors.lightGreen.shade100,
        datesBorderColor: Colors.green,
        datesTextColor: Colors.black,
      ),
    ),
    generalDatesProperties: DatesProperties(
      datesDecoration: DatesDecoration(
        datesBorderRadius: 1000,
        datesBackgroundColor: Colors.lightGreen.shade100,
        datesBorderColor: Colors.blue.shade100,
        datesTextColor: Colors.black,
      ),
    ),
  )
  

• Customise weekdays header by changing its properties

  CleanCalendar(
    weekdaysProperties: WeekdaysProperties(
      generalWeekdaysDecoration: WeekdaysDecoration(weekdayTextColor: Colors.red),
      sundayDecoration: WeekdaysDecoration(
        weekdayTextColor: Colors.green,
        weekdayTextStyle: Theme.of(context).textTheme.headlineMedium,
      ),
      saturdayDecoration: WeekdaysDecoration(
        weekdayTextColor: Colors.green,
        weekdayTextStyle: Theme.of(context).textTheme.headlineMedium,
      ),
    ),
  )
  

• Customise navigator header by changing its properties

  CleanCalendar(
    headerProperties: HeaderProperties(
      monthYearDecoration: MonthYearDecoration(
        monthYearTextColor: Colors.amber,
        monthYearTextStyle: Theme.of(context).textTheme.labelMedium,
      ),
      navigatorDecoration: NavigatorDecoration(
        navigatorResetButtonIcon: Icon(Icons.restart_alt, color: Colors.amber),
        navigateLeftButtonIcon: Icon(Icons.arrow_circle_left, color: Colors.amber),
        navigateRightButtonIcon: Icon(Icons.arrow_circle_right, color: Colors.amber),
      ),
    ),
  )
  

Date Selection

Multiple date selection with customization

CleanCalendar(
  enableDenseViewForDates: true,
  enableDenseSplashForDates: true,
  datesForStreaks: [DateTime.now().subtract(Duration(days: 5)), ...],
  dateSelectionMode: DatePickerSelectionMode.singleOrMultiple,
  onSelectedDates: (List<DateTime> value) {
    if (selectedDates.contains(value.first)) {
      selectedDates.remove(value.first);
    } else {
      selectedDates.add(value.first);
    }
    setState(() {});
  },
  selectedDates: selectedDates,
  selectedDatesProperties: DatesProperties(
    datesDecoration: DatesDecoration(datesBorderRadius: 1000),
  ),
)

Single date selection

只需修改上述代码中的onSelectedDates逻辑以存储最新的单个日期作为选中日期。

Changing calendar view type

CleanCalendar(
  datePickerCalendarView: DatePickerCalendarView.weekView,
)

Changing calendar start weekday

CleanCalendar(
  startWeekday: WeekDay.monday,
)

Changing weekday and month symbols

CleanCalendar(
  weekdaysSymbol: const Weekdays(sunday: "s", monday: "m", tuesday: "t", wednesday: "w", thursday: "t", friday: "f", saturday: "s"),
  monthsSymbol: const Months(january: "Jan", february: "Feb", march: "Mar", april: "Apr", may: "May", june: "Jun", july: "Jul", august: "Aug", september: "Sep", october: "Oct", november: "Nov", december: "Dec"),
)

Accessing selected dates

CleanCalendar(
  onSelectedDates: (List<DateTime> selectedDates) {
    print(selectedDates);
  },
)

Providing pre-selected dates

CleanCalendar(
  selectedDates: [DateTime(2022, 8, 6), DateTime(2022, 8, 9), DateTime(2022, 8, 11)],
)

Providing start and end dates

CleanCalendar(
  startDateOfCalendar: DateTime(2022,6,5),
  endDateOfCalendar: DateTime(2022,10,15),
)

Providing initial month view for calendar

CleanCalendar(
  initialViewMonthDateTime: DateTime(2022,9,5),
)

Providing current date for calendar

CleanCalendar(
  currentDateOfCalendar: DateTime(2022,9,5),
)

Listening for calendar view week or month change

CleanCalendar(
  onCalendarViewDate: (DateTime calendarViewDate) {
    print(calendarViewDate);
  },
)

Additional information

支持计划包括但不限于：

• 完整文档。
• 禁用用户交互选项。
• 更多自定义和预设模板。
• 更多日历视图类型。
• 日期选择选项如范围和多个范围选择。
• 年、月或日视图选择。
• 事件风格日期显示。
• 低性能设备优化模式。

如果您认为还有其他重要的功能未被提及，请告知我。