Flutter日历数据时间线展示插件calendar_data_timeline的使用

Flutter日历数据时间线展示插件calendar_data_timeline的使用

calendar_data_timeline 是一个用于创建和查看高度可定制的日历插件，支持带有范围数据的时间线。它适用于移动设备（Android 和 iOS）、网页和桌面应用。

图像

网页

移动设备

注意：

• 由于颜色堆叠的效果，颜色可能不完全相同。

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 calendar_data_timeline 插件。

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

void main() {
  runApp(MyApp());
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: CalendarDataTimeline(
        // 数据列表，每个元素代表一个事件或时间段
        data: [
          CalendarContent(
            name: "Zeus Cajurao",
            dates: [
              DateFromTo(
                color: Colors.red,
                from: DateTime.now(), // 开始时间
                to: DateTime.now().add(Duration(days: 4)), // 结束时间
              ),
              DateFromTo(
                color: Colors.blue,
                from: DateTime.now().subtract(Duration(days: 42)),
                to: DateTime.now().subtract(Duration(days: 2)),
              ),
              DateFromTo(
                color: Colors.green,
                from: DateTime.now().subtract(Duration(days: 10)),
                to: DateTime.now().add(Duration(days: 6)),
              ),
            ],
          ),
          CalendarContent(
            name: "John Doe",
            dates: [
              DateFromTo(
                color: Colors.green,
                from: DateTime.now(),
                to: DateTime.now().add(Duration(days: 4)),
              ),
              DateFromTo(
                color: Colors.yellow,
                from: DateTime.now().subtract(Duration(days: 42)),
                to: DateTime.now().subtract(Duration(days: 2)),
              ),
              DateFromTo(
                color: Colors.blue,
                from: DateTime.parse("2021-02-28"),
                to: DateTime.now(),
              ),
            ],
          ),
        ],
        // 头部设置
        settings: HeaderSettings(
          locale: 'en_US',
          topColor: Colors.blue,
          bottomColor: Colors.grey.shade900,
        ),
        // 星期日的颜色
        sundayColor: Colors.grey.shade300,
        // 身体部分的设置
        bodySettings: BodySettings(
          titleBGColor: Colors.blue,
          backgroundColor: Colors.grey.shade100,
        ),
      ),
    );
  }
}