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

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

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

方法

準備

まず、イベント用のクラスを作ります。

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

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

次にイベントをカレンダーに表示するために、データソースというのを作ります。

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

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

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

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

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

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

データソースは、「CalendarDataSourceクラス」を継承させたクラスで作ります。

クラス内のコードは、データーをカレンダーに表示するためのものです。

そして、データソースにイベントのデーターを渡す関数を用意します。

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

関数で重要なのは、データをまとめておくリストと、それを戻り値として返すことです。

２〜４行目までのコードは、サンプルのデータを追加している場所です。

この部分は、追加するデータによって書き換えてください。

イベントを追加

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

「SfCalendarウェジェット」の「dataSource引数」に、用意したデータソースを指定します。

これでイベントが追加されます。

monthViewSettings: MonthViewSettings(
        showAgenda: true,
)