Flutter日历展示插件calendar_viewer的使用

Flutter日历展示插件calendar_viewer的使用

Calendar Viewer

一个高度可定制的日历小部件，适用于预订、事件以及多语言支持。

Calendar

目录

  1. 安装
  2. 特性
  3. 使用
  4. 示例项目
  5. 属性
  6. 事件
  7. 贡献者

🖥 安装

添加依赖

dependencies:
  calendar_viewer: ^1.0.0+3 # 使用最新版本

导入包

import 'package:calendar_viewer/calendar_viewer.dart';

✨ 特性

  • 可自定义月份标签和周栏。
  • 支持多语言的月份和星期名称。
  • 可添加跨越多个日期的预订。
  • 可自定义日期、星期和预订的样式。
  • 支持日期上的点击和长按事件处理。

📖 使用

基本示例

CalendarViewer(
  initialDate: DateTime.now(),
  months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // 月份数组
  weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 星期数组
  nextMonthDateConfig: CalendarDateConfig(
      decoration: BoxDecoration(
        color: Colors.black12,
        border: Border.all(color: Colors.black12, width: 0.5),
      ),
    ),
);

高级配置

CalendarViewer(
  key: Key(_selectedDate.toString()), // 设置键以区分不同的日期
  initialDate: _selectedDate, // 初始日期
  months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], // 月份数组
  weekdays: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], // 星期数组
  dateConfigBuilder: (date) { // 自定义日期样式
    if (date.isAtSameMomentAs(DateTime(_now.year, _now.month, _now.day))) {
      return CalendarDateConfig(
        decoration: BoxDecoration(
          color: Colors.teal.withOpacity(.3),
          borderRadius: BorderRadius.circular(5),
        ),
      );
    } else if(date.isAtSameMomentAs(_selectedDate)) {
      return CalendarDateConfig(
        decoration: BoxDecoration(
          color: Colors.blue.withOpacity(.3),
          borderRadius: BorderRadius.circular(5),
        ),
      );
    }
    return null;
  },
  reservations: [
    CalendarViewerReservation(
      from: DateTime(2023, 10, 9),
      to: DateTime(2023, 10, 13),
      user: const CalendarReservationUser(
        name: 'Mohammad Alamoudi',
        netImage:
            'https://cdn-icons-png.flaticon.com/512/9203/9203764.png',
      ),
    ),
  ],
  reservation: CalenderReservationConfig(
    style: CalendarReservationStyle(
      color: Colors.teal.withOpacity(0.6),
    ),
  ),
  nextMonthDateConfig: CalendarDateConfig(
      decoration: BoxDecoration(
        color: Colors.black12,
        border: Border.all(color: Colors.black12, width: 0.5),
      ),
    ),
);

更多关于Flutter日历展示插件calendar_viewer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter日历展示插件calendar_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


calendar_viewer 是一个用于展示日历的 Flutter 插件。虽然这个插件并不是 Flutter 官方提供的插件，但有很多类似的开源日历插件可供选择，如 table_calendar, flutter_calendar_carousel, syncfusion_flutter_calendar 等。下面我将以 table_calendar 为例，介绍如何使用日历展示插件。

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 table_calendar 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  table_calendar: ^3.0.8  # 请使用最新版本

然后运行 flutter pub get 获取依赖。

2. 基本使用

在你的 Dart 文件中，导入 table_calendar 插件并创建一个简单的日历视图：

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Calendar Viewer',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CalendarView(),
    );
  }
}

class CalendarView extends StatefulWidget {
  [@override](/user/override)
  _CalendarViewState createState() => _CalendarViewState();
}

class _CalendarViewState extends State<CalendarView> {
  CalendarFormat _calendarFormat = CalendarFormat.month;
  DateTime _focusedDay = DateTime.now();
  DateTime? _selectedDay;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Calendar Viewer'),
      ),
      body: TableCalendar(
        firstDay: DateTime.utc(2010, 10, 16),
        lastDay: DateTime.utc(2030, 3, 14),
        focusedDay: _focusedDay,
        calendarFormat: _calendarFormat,
        selectedDayPredicate: (day) {
          return isSameDay(_selectedDay, day);
        },
        onDaySelected: (selectedDay, focusedDay) {
          setState(() {
            _selectedDay = selectedDay;
            _focusedDay = focusedDay; // update `_focusedDay` here as well
          });
        },
        onFormatChanged: (format) {
          setState(() {
            _calendarFormat = format;
          });
        },
        onPageChanged: (focusedDay) {
          _focusedDay = focusedDay;
        },
      ),
    );
  }
}
回到顶部