【Flutter】syncfusion_flutter_calendarパッケージを使ってカレンダーを作成

モバイルアプリではカレンダーを使用することは多々あるかと思います。

予定入力、スケジュール管理、ダイエットアプリなどの時系列変化を管理などなど・・・・。そんな時にめちゃくちゃ役立ってくれるのがsyncfusion_flutter_calendarパッケージです。本記事ではsyncfusion_flutter_calendarの実装方法をご紹介します。

syncfusion_flutter_calendarパッケージ

パッケージの導入

公式のリンク先は以下の通りです。

syncfusion_flutter_calendar | Flutter package

The Flutter Calendar widget has nine built-in configurable views that provide basic functionalities for scheduling and representing appointments/events efficiently.

パッケージの導入とインポートを実施します。

使用方法

基本のプロパティ

カレンダーウィジェットの表示

 SfCalendar()だけで表示できちゃいます。プロパティに何も設定しないとデフォルトでは以下のように日単位の画面が表示されます。

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: Container(
        child: SfCalendar(),
      ));
}

日ごと、週ごと、月ごとにカレンダーを表示したい場合はviewプロパティを設定します。

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfCalendar(
    view: CalendarView.month,
  ));
}

また、表示する時間帯を限定することもできます。以下では９時から16時に設定しています。

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfCalendar(
    view: CalendarView.workWeek,
    timeSlotViewSettings: TimeSlotViewSettings(
        startHour: 9,
        endHour: 16,
    ),
  ));
}

アジェンダビュープロパティを設定するとカレンダーの下に選択した日の予定・イベントを表示できます。

Scaffold(
    body: SfCalendar(
      view: CalendarView.month,
      monthViewSettings: MonthViewSettings(showAgenda: true),
    ));

実践 〜予定を入れてみる〜

実践ということで実際にカレンダーに予定を入れて見ましょう。

手順は以下の通りです。

①viewプロパティーで月・週・日などのビューモードを設定

②datasourceプロパティに「予定の情報」を渡す。ここでList型の予定データをMeetingクラスで作成しdatasourceに渡します。

③ここでは予定の内容（説明文）が表示されるように設定

ユーザーインターフェース

ソースコード

class CalendarHomePage extends StatefulWidget {
  const CalendarHomePage({Key? key}) : super(key: key);

  @override
  _CalendarHomePageState createState() => _CalendarHomePageState();
}

class _CalendarHomePageState extends State<CalendarHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SfCalendar(
          view: CalendarView.month,
          dataSource: MeetingDataSource(_getDataSource()),
          monthViewSettings: MonthViewSettings(
              appointmentDisplayMode: MonthAppointmentDisplayMode.appointment,
              showAgenda: true
          ),

        ));
  }

  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('Conference', startTime, endTime, const Color(0xFF0F8644), false),
    );
    meetings.add(
      Meeting('Conference2', DateTime.utc(2022,3,10), DateTime.utc(2022,3,12), Colors.red, false),
    );
    meetings.add(
      Meeting('Conference3', DateTime.utc(2022,3,20), DateTime.utc(2022,3,25), Colors.greenAccent, 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;
}