MENU
SwiftUI/Flutter/Vue等でアプリ開発
  1. ホーム
  2. dev
  3. Flutter
  4. [Flutter] Syncfusion Flutter Calendar の使い方

[Flutter] Syncfusion Flutter Calendar の使い方

Flutter

Syncfusion Flutter Calendarは、Flutterアプリにカレンダー機能を簡単に追加できるライブラリです。カレンダーには様々なオプションがあり、カレンダーの外観や機能をカスタマイズすることができます。

まずは、Syncfusion Flutter Calendarを導入する方法から説明していきます。

目次

Syncfusion Flutter Calendarの導入

Syncfusion Flutter Calendarを使用するには、プロジェクトにパッケージを追加する必要があります。

pubspec.yamlファイルに以下のように追加します。

dependencies:
  syncfusion_flutter_calendar: ^19.1.63

パッケージを追加したら、以下のようにSyncfusion Flutter Calendarをインポートしてください。

import 'package:syncfusion_flutter_calendar/calendar.dart';

これで、Syncfusion Flutter Calendarを使用する準備が整いました。

Syncfusion Flutter Calendarの基本的な使い方

Syncfusion Flutter Calendarの基本的な使い方は簡単です。以下のように、カレンダーを作成して、ウィジェットツリーに追加するだけです。

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Syncfusion Flutter Calendar',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return SfCalendar(
      view: CalendarView.month,
    );
  }
}

これにより、以下のように月表示のカレンダーが表示されます。

以降の説明でソースコードを表示する際には、今回の記事に関連のある部分を抜粋して記載します。

カレンダーの表示形式の変更

Syncfusion Flutter Calendarでは、カレンダーの表示形式を変更することができます。

以下のように、viewプロパティに表示形式を指定することができます。

SfCalendar(
  view: CalendarView.day,
),

表示形式には、day、week、workweek、month、timelineDay、timelineWeek、timelineWorkweek、timelineMonthがあります。いくつかピックアップして表示イメージを載せます。

CalendarView.day

CalendarView.week

CalendarView.timelineDay

CalendarView.timelineMonth

イベントの表示

Syncfusion Flutter Calendarには、イベントを表示する機能があります。

以下のように、dataSourceプロパティにカレンダーに表示するイベントのリストを指定することができます。

class _MyHomePageState extends State<MyHomePage> {
  _AppointmentDataSource _getAppointments() {
    List<Appointment> appointments = <Appointment>[];
    appointments.add(Appointment(
      startTime: DateTime.now(),
      endTime: DateTime.now().add(Duration(hours: 1)),
      subject: 'Meeting',
      color: Colors.blue,
    ));
    return _AppointmentDataSource(appointments);
  }

  @override
  Widget build(BuildContext context) {
    return SfCalendar(
      view: CalendarView.day,
      dataSource: _getAppointments(),
    );
  }
}

class _AppointmentDataSource extends CalendarDataSource {
  _AppointmentDataSource(List<Appointment> source) {
    appointments = source;
  }
}

これにより、以下のような1つの”Meeting”イベントが表示されます。

イベントの編集

Syncfusion Flutter Calendarでは、イベントを編集することができます。

以下のように、onTapプロパティにイベントをタップしたときの動作を指定することができます。

void _onTap(AppointmentTapDetails details) {
  // TODO: Implement the code to edit the event.
}

@override
Widget build(BuildContext context) {
  return SfCalendar(
    view: CalendarView.month,
    dataSource: _getAppointments(),
    onTap: _onTap,
  );
}

イベントをタップしたときに呼び出される関数を実装することで、イベントの編集を行うことができます。

イベントの追加

Syncfusion Flutter Calendarでは、イベントを追加することができます。

以下のように、onLongPressプロパティに長押ししたときの動作を指定することができます。

void _onTap(AppointmentTapDetails details) {
  // TODO: Implement the code to edit the event.
}

void _onLongPress(CalendarLongPressDetails details) {
  // TODO: Implement the code to add a new event.
}

@override
Widget build(BuildContext context) {
  return SfCalendar(
    view: CalendarView.month,
    dataSource: _getAppointments(),
    onTap: _onTap,
    onLongPress: _onLongPress,
  );
}

長押ししたときに呼び出される関数を実装することで、新しいイベントの追加を行うことができます。

カスタマイズ

Syncfusion Flutter Calendarでは、カレンダーの外観や機能をカスタマイズすることができます。

以下のように、カレンダーの外観を変更することができます。

SfCalendar(
  view: CalendarView.month,
  monthViewSettings: MonthViewSettings(
    showTrailingAndLeadingDates: false,
    appointmentDisplayMode: MonthAppointmentDisplayMode.indicator,
  ),
  cellBorderColor: Colors.grey[200],
  todayHighlightColor: Colors.green,
  selectionDecoration: BoxDecoration(
    color: Colors.transparent,
    border: Border.all(color: Colors.green, width: 2),
    borderRadius: const BorderRadius.all(Radius.circular(4)),
    shape: BoxShape.rectangle,
  ),
  headerStyle: CalendarHeaderStyle(
    textStyle: TextStyle(fontSize: 16),
    textAlign: TextAlign.center,
  ),
);

これにより、トレーリングとリーディングの日付を非表示にし、月の日程をインジケーターで表示するように設定しています。また、セルの境界線の色を変更し、今日の日付の強調色を緑に設定し、選択した日付の背景を変更することができます。また、ヘッダーのスタイルを変更することもできます。

(参考) 月・週・日をボタンで切り替えられるカレンダー

上記までは StatelessWidget を利用した説明でしたが、実際に利用する場合は表示するカレンダーの切り替え、予定の追加・削除等を行います。その場合、StatelessWidgetではなく、StatefulWidgetを利用します。参考として、StatefulWidgetを利用したカレンダー切り替えのサンプルコードを載せます。

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() => runApp(CalendarApp());

class CalendarApp extends StatefulWidget {
  @override
  _CalendarAppState createState() => _CalendarAppState();
}

class _CalendarAppState extends State<CalendarApp> {
  CalendarView _calendarView = CalendarView.month;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Calendar'),
        ),
        body: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                TextButton(
                  child: Text('Month'),
                  onPressed: () {
                    setState(() {
                      _calendarView = CalendarView.month;
                    });
                  },
                ),
                TextButton(
                  child: Text('Week'),
                  onPressed: () {
                    setState(() {
                      _calendarView = CalendarView.week;
                    });
                  },
                ),
                TextButton(
                  child: Text('Day'),
                  onPressed: () {
                    setState(() {
                      _calendarView = CalendarView.day;
                    });
                  },
                ),
              ],
            ),
            Expanded(
              child: SfCalendar(
                key: ValueKey(_calendarView),
                view: _calendarView,
                dataSource: _getCalendarDataSource(),
                onTap: (CalendarTapDetails details) {
                  print(details.date);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  _DataSource _getCalendarDataSource() {
    List<Appointment> appointments = <Appointment>[];
    appointments.add(Appointment(
      startTime: DateTime.now(),
      endTime: DateTime.now().add(Duration(hours: 1)),
      subject: 'Meeting',
      color: Colors.blue,
    ));
    return _DataSource(appointments);
  }
}

class _DataSource extends CalendarDataSource {
  _DataSource(List<Appointment> source) {
    appointments = source;
  }
}

このコードでは、CalendarAppクラスがStatefulWidgetに変更され、_calendarView変数を導入しました。_calendarView変数は、現在のカレンダーの表示方法（月、週、日）を保持します。

また、カレンダーを表示するために、SfCalendarウィジェットをExpandedウィジェットでラップし、カレンダーの表示方法を変更するためのTextButtonウィジェットがRowウィジェットに追加しています。

月、週、日のボタンが押されると、setState()メソッドが呼び出されて、_calendarView変数が更新されます。_calendarView変数の値に基づいて、SfCalendarウィジェットの表示方法が変更されます。

ボタンを追加しただけでは、カレンダーはうまく切り替わりません。これはSfCalendarウィジェットが再構築されないためです。Flutterは、ウィジェットの状態が変更されたときに自動的に再構築するわけではありません。再構築するためには、SfCalendarウィジェットにkeyプロパティが追加します。これにより、_calendarViewが変更されたときに、SfCalendarウィジェットが再構築されるようになります。

以上が、Syncfusion Flutter Calendarの基本的な使い方とカスタマイズ方法についての説明です。このライブラリを使うことで、Flutterアプリにカレンダー機能を簡単に追加することができます。

Flutter
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次