[Flutter]イベントを表示できるカレンダーのウェジェット

どうも、ちょげ(@chogetarou)です。

イベントを表示することのできるカレンダーを表示することの出来るウェジェットを紹介します。

SfCalendar

「syncfusion_flutter_calendar」パッケージの「SfCalendar」ウェジェットでイベントを表示することが出来ます。

「SfCalendar」は、スケジュールや週、月のカレンダーを表示することが出来る便利なウェジェットです。

dependencies:
  syncfusion_flutter_calendar: ^19.2.62

import 'package:syncfusion_flutter_calendar/calendar.dart';

イベントを表示するには？

「SfCalendar」でイベントを表示するには、次の引数を使います。

• view : 表示スタイル
• dataSource : イベントをカレンダーに反映する
• monthViewSettings : イベントを表示するためのもの

これらの引数を使うことでカレンダーにイベントを表示することが出来ます。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            child: SfCalendar(
      view: CalendarView.month,
      dataSource: EventDataSource(_getDataSource()),
      monthViewSettings: MonthViewSettings(showAgenda: true),
    )));
  }

[Flutter] カレンダーにイベントを追加する方法

カレンダーに予定や約束などのイベントを追加する方法を紹介します。

www.choge-blog.com

2021.10.03

[Flutter]カレンダーにイベントを表示する方法

追加してあるイベントを、カレンダーに表示する方法を解説します。

www.choge-blog.com

2021.10.01

全体のコード

ここで使用したコードを載せておきます。

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            child: SfCalendar(
      view: CalendarView.month,
      dataSource: EventDataSource(_getDataSource()),
      monthViewSettings: MonthViewSettings(showAgenda: true),
    )));
  }
}

List<Event> _getDataSource() {
  final List<Event> event = <Event>[];
  for (var i = 0; i < 10; i++) {
    final DateTime today = DateTime.now();
    final DateTime startTime =
        DateTime(today.year, today.month, today.day + i, 9, 0, 0);
    final DateTime endTime = startTime.add(const Duration(hours: 2));
    event
        .add(Event('イベント', startTime, endTime, const Color(0xFF0F8644), false));
  }
  return event;
}

class EventDataSource extends CalendarDataSource {
  EventDataSource(List<Event> event) {
    appointments = event;
  }

  @override
  Color getColor(int index) {
    return appointments![index].background;
  }

  @override
  DateTime getEndTime(int index) {
    return appointments![index].to;
  }

  @override
  DateTime getStartTime(int index) {
    return appointments![index].from;
  }

  @override
  String getSubject(int index) {
    return appointments![index].eventName;
  }

  @override
  bool isAllDay(int index) {
    return appointments![index].isAllDay;
  }
}

class Event {
  Event(this.eventName, this.from, this.to, this.background, this.isAllDay);

  Color background;
  String eventName;
  DateTime from;
  bool isAllDay;
  DateTime to;
}