本エントリではtable_calendarパッケージを用いたカレンダーの作成方法を説明する。

table_calendarとは

Flutterアプリで月単位、2週間単位、1週間単位のカレンダーを作成するためのサードパーティパッケージ。

デフォルトは以下のようなデザイン。カスタマイズも可能。

インストール

通常のパッケージ同様pubspec.yamlにパッケージ名を記述する。

dependencies:
  table_calendar: ^3.0.7

主なプロパティ

table_calendarを使用する際に使う主なプロパティを説明する。すべてTableCalendarウィジェットのプロパティ。

focusedDay

表示するカレンダーの位置を指定するためのDateTime型プロパティ。 focusedDayが含まれる範囲のカレンダーが表示される。

例えばカレンダーのフォーマットを月単位に設定した場合を考える。現在が9月1日だとするとカレンダーはsetStateが呼ばれた際に常に9月のカレンダーになる。

firstDay

カレンダーが始まる日付を指定するDateTime型プロパティ。

lastDay

カレンダーが終わる日付を指定するDateTime型プロパティ。

calendarFormat

カレンダーのフォーマットを指定するCalendarFormat型プロパティ。フォーマットは

月単位
2週間単位
1週間単位

から選択する。

onFormatChanged

table_calendarが作成するカレンダーにはフォーマットを変更するボタンがデフォルトで表示される。

onFormatChangedはこのボタンを触った際の挙動を指定するイベントハンドラ。

引数には後述のavailableCalendarFormatsで指定したフォーマットに含まれる CalendarFormatインスタンスが渡される。

典型的なonFormatChangedの使用方法は、フォーマットを変更するボタンがタップされたら引数に渡されるフォーマットにsetStateを用いてカレンダーのフォーマットを変更すること。

availableCalendarFormats

選択可能なカレンダーのフォーマットをMap型のデータで指定する。例えば次のように実装する。

availableCalendarFormats: {
  CalendarFormat.month: "Month",
  CalendarFormat.twoWeeks: "2 weeks",
  CalendarFormat.week: "Week",
},

Mapの各バリューに指定された文字列がボタンに表示される。

onDaySelected

カレンダー上の特定の日付をタップした際の挙動を指定するイベントハンドラ。引数にはDateTime型でselectedDay, focusedDayが渡される。

典型的な使用方法は、選択された日付によってカレンダーのUIを更新するために setStateでローカルのマークを表示する日付とカレンダーが表示される日付（focusedDay）に該当する変数を更新する。

selectedDayPredicate

カレンダーをタップした際、マークを移動するために設定が必要なプロパティ。基本的には以下の公式サイトに記載されている通り実装する。本エントリでも公式サイトの記述を踏襲して以降の説明を行う。

pub.dev

パターン別カレンダー作成方法

table_calendarは、基本的にStatefulWidget内で使うことが多い。なので本章でもCalendarComponentというStatefulWidget内に記述する。

月単位のみ表示するカレンダー

見た目

ソースコード

解説

availableCalendarFormatsを月単位に対応するCalendarFormat.monthキーのみを指定することでその他のフォーマットを表示しない設定にしている。

2週間、1週間単位のみのカレンダーを作成したい場合、_formatとavailableCalendarFormatsをそれぞれ以下のように指定すれば良い。

2週間単位のみの場合

CalendarFormat _format = CalendarFormat.twoWeeks;

availableCalendarFormats: {
  CalendarFormat.twoWeeks: "2 weeks",
},

カレンダーの見た目は次のようになる。

1週間単位のみの場合

CalendarFormat _format = CalendarFormat.week;

availableCalendarFormats: {
  CalendarFormat.twoWeeks: "Week",
},