Flutter日历插件emorphiscalendar的使用

Emorphis Calendar 是一个高度可定制且功能丰富的 Flutter 日历小部件。它支持多种视图（如月视图和周视图），并且可以轻松导航和选择日期。此外，它还提供了事件日历功能，支持动态事件、日期范围限制以及事件点颜色等。

特性

• 月视图日历：显示一整个月份，并允许用户选择日期。当前日期会被高亮显示，周日会以红色标记。
• 周视图日历：一次显示一周，并支持通过滑动在不同周之间导航。
• 事件列表：为选定的日期显示事件列表，每个事件项都带有边框和内边距，便于清晰查看。

安装

将以下依赖项添加到您的 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  emorphiscalendar: ^0.0.4

然后运行以下命令以获取依赖项：

flutter pub get

使用方法

月视图日历

以下是一个简单的月视图日历示例：

import 'package:flutter/material.dart';
import 'package:emorphiscalendar/calendar/emorphis_month_calendar.dart';

class MonthlyCalendarScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Monthly Calendar')),
      body: EmorphisMonthCalendar(),
    );
  }
}

周视图日历

以下是一个简单的周视图日历示例：

import 'package:flutter/material.dart';
import 'package:emorphiscalendar/calendar/emorphis_week_calendar.dart';

class WeeklyCalendarScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Weekly Calendar')),
      body: EmorphisWeekCalendar(),
    );
  }
}

自定义周视图日历

以下是一个自定义周视图日历的示例：

import 'package:flutter/material.dart';
import 'package:emorphiscalendar/calendar/custom_week_day.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Week Day'),
        backgroundColor: Colors.blue.withOpacity(0.5),
      ),
      body: Center(
        child: CustomWeekDay(
          onDateSelected: (date) {
            print(date); // 打印选中的日期
          },
        ),
      ),
    );
  }
}

事件日历

以下是一个包含事件的日历示例：

import 'package:flutter/material.dart';
import 'package:emorphiscalendar/calendar/emorphis_event_calendar.dart';

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

class _EventCalendarScreenState extends State<EventCalendarScreen> {
  DateTime _focusedDay = DateTime.now();
  DateTime _selectedDay = DateTime.now();
  Map<DateTime, List<String>> _events = {};

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Emorphis Event Calendar'),
        backgroundColor: Colors.blue.withOpacity(0.5),
        actions: [_buildAddEventButton()],
      ),
      body: Column(
        children: [
          EmorphisEventCalendar(
            focusedDay: _focusedDay,
            selectedDay: _selectedDay,
            events: _events,
            onDaySelected: (selectedDay) {
              setState(() {
                _selectedDay = selectedDay;
              });
            },
            onFocusedDayChanged: (focusedDay) {
              setState(() {
                _focusedDay = focusedDay;
              });
            },
          ),
          if (_events[_selectedDay] != null) _buildEventList(),
        ],
      ),
    );
  }

  Widget _buildEventList() {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: _events[_selectedDay]?.length ?? 0,
          itemBuilder: (context, index) {
            return Container(
              padding: const EdgeInsets.all(10.0),
              margin: const EdgeInsets.only(bottom: 8.0),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black, width: 0.5),
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Text(_events[_selectedDay]![index]),
            );
          },
        ),
      ),
    );
  }

  Widget _buildAddEventButton() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ElevatedButton(
        onPressed: () async {
          String? event = await _addEventDialog();
          if (event != null && event.isNotEmpty) {
            final updatedEvents = Map<DateTime, List<String>>.from(_events);
            updatedEvents[_selectedDay] = updatedEvents[_selectedDay] ?? [];
            updatedEvents[_selectedDay]!.add(event);
            setState(() {
              _events = updatedEvents;
            });
          }
        },
        child: const Text("Add Event"),
      ),
    );
  }

  Future<String?> _addEventDialog() {
    TextEditingController _controller = TextEditingController();

    return showDialog<String>(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text("Add Event"),
          content: TextField(
            controller: _controller,
            decoration: const InputDecoration(hintText: 'Enter event details'),
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('Cancel'),
            ),
            TextButton(
              onPressed: () {
                Navigator.of(context).pop(_controller.text);
              },
              child: const Text('Add'),
            ),
          ],
        );
      },
    );
  }
}

节日日历

以下是一个节日日历的示例：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:emorphiscalendar/calendar/emorphis_holiday_calendar.dart';
import 'package:http/http.dart' as http;
import 'country.dart';

class HolidayCalendarScreen extends StatefulWidget {
  [@override](/user/override)
  State<HolidayCalendarScreen> createState() => _HolidayCalendarScreenState();
}

class _HolidayCalendarScreenState extends State<HolidayCalendarScreen> {
  List<Holiday> holidays = [];
  DateTime _focusedDay = DateTime.now();
  String _selectedCountryCode = 'US'; // 默认国家代码

  final List<DropdownMenuItem<String>> dropdownItems = countryList.map((Country country) {
    return DropdownMenuItem<String>(
      value: country.code,
      child: Text(country.name),
    );
  }).toList();

  Future<List<Holiday>> fetchHolidays(String countryCode, int year) async {
    final response = await http.get(
      Uri.parse('https://date.nager.at/Api/v2/PublicHolidays/$year/$countryCode'),
    );
    if (response.statusCode == 200) {
      final List<dynamic> data = json.decode(response.body);
      return data.map((holiday) {
        return Holiday(
          DateTime.parse(holiday['date']),
          holiday['name'],
        );
      }).toList();
    } else {
      setState(() {
        _focusedDay = _focusedDay;
        holidays = [];
      });
      throw Exception('Failed to load holidays');
    }
  }

  void _updateHolidays(DateTime newFocusedDay) {
    final newYear = newFocusedDay.year;
    fetchHolidays(_selectedCountryCode, newYear).then(
      (value) {
        setState(() {
          holidays = value;
          _focusedDay = newFocusedDay;
        });
      },
    );
  }

  void _onCountryCodeChanged(String? newCountryCode) {
    if (newCountryCode != null) {
      setState(() {
        _selectedCountryCode = newCountryCode;
        _updateHolidays(_focusedDay);
      });
    }
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    // 获取当前年份的节日数据
    _updateHolidays(DateTime.now());
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Holiday Calendar'),
        actions: [
          Align(
            alignment: Alignment.centerLeft,
            child: SizedBox(
              width: 150, // 调整宽度以适应屏幕
              child: DropdownButton<String>(
                value: _selectedCountryCode,
                onChanged: _onCountryCodeChanged,
                items: dropdownItems,
                isExpanded: true,
                autofocus: true,
              ),
            ),
          ),
        ],
      ),
      body: EmorphisHolidayCalendar(
        holidays: holidays,
        initialFocusedDay: _focusedDay,
        initialSelectedDay: DateTime.now(),
        onFocusedDayChanged: _updateHolidays,
      ),
    );
  }
}