[Flutter]カレンダー(calendar)のイベント(event)を作成(create)する方法

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

カレンダーのイベントを作成するには、どうしたらいいのでしょうか？

前提

カレンダーには、「SfCalendar」を使っています。

方法
データをカレンダーに反映

方法

カレンダー, 日にち, 月, 日, 週, スケジュール, リマインダー, 主催者

カレンダーのイベントを作成するには、次の３つが必要です。

CalendarDataSourceクラスを継承したクラス
イベントのモデルクラス
イベントを追加する関数

CalendarDataSourceクラス

まず、「CalendarDataSourceクラス」を継承したイベント用のクラスを用意します。

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;
}

イベントを追加する関数

イベントを追加するための関数を用意します。

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: Container(
            child: SfCalendar(
      view: CalendarView.month,
      dataSource: EventDataSource(_getDataSource()),
      monthViewSettings: MonthViewSettings(showAgenda: true),
    )));
  }

「SfCalendar」の引数「dataSource」に、用意したクラスを指定することで、カレンダーのイベントを反映することが出来ます。