【flutter】SfCalendarでカレンダーを作りたい...!

こんにちは！
今年もQiita投稿をきっかけに、学んだことや実際に作業してみたことをアウトプットしていきたいと思います！
今年もよろしくお願いいたします！

では、今回は実際にSfCalendarを使ってみた内容をいくつか紹介します！
最後まで、読んでいただけたら嬉しいです！

SfCalendarとは？

・日付の表示: カレンダーウィジェットは、月ごと、週ごと、日ごとに日付を表示できます。

・予定の管理: カレンダーに予定やイベントを表示し、それらを管理できます。予定の詳細情報や時間の表示などがサポートされています。

・日付の選択: ユーザーが特定の日付を選択できるようにするためのインタラクティブな機能が備わっています。

・カスタマイズ可能性: SfCalendarは外観や挙動のカスタマイズが可能であり、アプリケーションのデザインや要件に合わせて調整できます。

使用するには、まずFlutterパッケージをプロジェクトに追加し、その後、SfCalendarウィジェットを利用してカレンダーを実装します。

実際に使ってみたSfCalendar機能(月表示)

・当日表示の色を変える

 SfCalendar(
            todayHighlightColor: Colors.orange,
            view: CalendarView.month,
          )

・アジェンダ ビューを表示

MonthViewSettingsのshowAgendaをtrueにする。

SfCalendar(
         todayHighlightColor: Colors.orange,
         view: CalendarView.month,
         monthViewSettings: const MonthViewSettings(
           showAgenda: true,
           agendaItemHeight: 70),
         showNavigationArrow: true,
         dataSource: MeetingDataSource(_getDataSource()),
       )

カレンダーの月表示の前月と翌月の日付を非表示にする

MonthViewSettingsのshowTrailingAndLeadingDatesをfalseにする,

SfCalendar(
         todayHighlightColor: Colors.orange,
         view: CalendarView.month,
         monthViewSettings: const MonthViewSettings(
           showTrailingAndLeadingDates: false,
           showAgenda: true,
           agendaItemHeight: 70),
         showNavigationArrow: true,
         dataSource: MeetingDataSource(_getDataSource()),
       )

・予定の追加

予定がある日にちのリストを作って、dataSourceで MeetingDataSource(_getDataSource())として今回は表示。

SfCalendar(
          todayHighlightColor: Colors.orange,
          view: CalendarView.month,
          monthViewSettings: const MonthViewSettings(
            showTrailingAndLeadingDates: false,
            showAgenda: true,
            agendaItemHeight: 70,
          ),
          showNavigationArrow: true,
          dataSource: MeetingDataSource(_getDataSource()),
        )

リスト

List<Meeting> _getDataSource() {
  final List<Meeting> meetings = <Meeting>[];
  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));
  meetings
      .add(Meeting('MTG', startTime, endTime, const Color(0xFF0F8644), false));

  final DateTime today1 = DateTime(2024, 01, 18);
  final DateTime startTime1 =
      DateTime(today1.year, today1.month, today1.day, 9, 0, 0);
  final DateTime endTime1 = startTime1.add(const Duration(hours: 3));
  meetings.add(Meeting('MTG', startTime1, endTime1, Colors.blue, false));

  final DateTime today2 = DateTime(2024, 01, 24);
  final DateTime startTime2 =
      DateTime(today2.year, today2.month, today2.day, 9, 0, 0);
  final DateTime endTime2 = startTime2.add(const Duration(hours: 3));
  meetings.add(Meeting('MTG', startTime2, endTime2, Colors.red, false));

  final DateTime today3 = DateTime(2024, 01, 26);
  final DateTime startTime3 =
      DateTime(today3.year, today3.month, today3.day, 9, 0, 0);
  final DateTime endTime3 = startTime3.add(const Duration(hours: 3));
  meetings.add(Meeting('MTG', startTime3, endTime3, Colors.yellow, false));

  return meetings;
}

class MeetingDataSource extends CalendarDataSource {
  MeetingDataSource(List<Meeting> source) {
    appointments = source;
  }

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

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

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

最後に

以上で、今回の記事についての紹介を終わります！
今回も最後まで読んでいただき、ありがとうございました！
では、また次の記事で〜！