[Flutter]２つの連動したカレンダー(calendar)を表示するには？

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

２つの連動したカレンダーを表示する方法を紹介します。

方法

方法

インポート

まず、必要なパッケージをインポートします。

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

コントローラと関数の用意

次に、カレンダーを連動させるために必要なコントローラと関数を用意します。

  CalendarController _calendarController1 = CalendarController();
  CalendarController _calendarController2 = CalendarController();

  void calendar1ViewChanged(ViewChangedDetails viewChangedDetails) {

    SchedulerBinding.instance!.addPostFrameCallback((Duration duration) {
　　　　　　
      _calendarController2.displayDate = DateTime(
          _calendarController1.displayDate!.year,
          _calendarController1.displayDate!.month + 1,
          _calendarController1.displayDate!.day);
    });
  }

  void calendar2ViewChanged(ViewChangedDetails viewChangedDetails) {
    SchedulerBinding.instance!.addPostFrameCallback((Duration duration) {
      _calendarController1.displayDate = DateTime(
          _calendarController2.displayDate!.year,
          _calendarController2.displayDate!.month - 1,
          _calendarController2.displayDate!.day);
    });
  }

コントローラは、カレンダーを操作するためのものです。

上記で用意している２つの関数は、カレンダーのスクロールを連動させるためのものです。

_calendar1ViewChanged関数は、カレンダー１の月が変更されたら、カレンダー２の月をその次の月にするというものです。

_calendar2ViewChanged関数は、カレンダー２の月が変更されたら、カレンダー２の月をその前の月にするというものです。

カレンダーを表示

最後に、カレンダーを表示します。

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          SfCalendar(
            view: CalendarView.month,
            controller: _calendarController1,
            monthViewSettings: MonthViewSettings(
              navigationDirection: MonthNavigationDirection.vertical,
            ),
            onViewChanged: calendar1ViewChanged,
          ),
          SfCalendar(
            view: CalendarView.month,
            controller: _calendarController2,
            viewHeaderHeight: 0,
            monthViewSettings: MonthViewSettings(
                navigationDirection: MonthNavigationDirection.vertical),
            onViewChanged: calendar2ViewChanged,
          ),
        ],
      ),
    );
  }

それぞれのカレンダーに、コントローラと関数を指定します。（コントローラは「controller引数」、関数は「onViewChanged引数」）

これで連動した２つのカレンダーが表示されます。

完成形

  CalendarController _calendarController1 = CalendarController();
  CalendarController _calendarController2 = CalendarController();

  void calendar1ViewChanged(ViewChangedDetails viewChangedDetails) {
    SchedulerBinding.instance!.addPostFrameCallback((Duration duration) {
      _calendarController2.displayDate = DateTime(
          _calendarController1.displayDate!.year,
          _calendarController1.displayDate!.month + 1,
          _calendarController1.displayDate!.day);
    });
  }

  void calendar2ViewChanged(ViewChangedDetails viewChangedDetails) {
    SchedulerBinding.instance!.addPostFrameCallback((Duration duration) {
      _calendarController1.displayDate = DateTime(
          _calendarController2.displayDate!.year,
          _calendarController2.displayDate!.month - 1,
          _calendarController2.displayDate!.day);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          SfCalendar(
            view: CalendarView.month,
            controller: _calendarController1,
            monthViewSettings: MonthViewSettings(
              navigationDirection: MonthNavigationDirection.vertical,
            ),
            onViewChanged: calendar1ViewChanged,
          ),
          SfCalendar(
            view: CalendarView.month,
            controller: _calendarController2,
            viewHeaderHeight: 0,
            monthViewSettings: MonthViewSettings(
                navigationDirection: MonthNavigationDirection.vertical),
            onViewChanged: calendar2ViewChanged,
          ),
        ],
      ),
    );
  }