[Flutter]カレンダーの「セルの背景色」を変えるには?

Flutter

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

SfCalendarで表示するカレンダーのセルの背景色を変えるには、どうしたらいいのでしょうか?

スポンサーリンク

方法

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            child: SfCalendar(
      view: CalendarView.month,
      monthViewSettings: MonthViewSettings(
        monthCellStyle: MonthCellStyle(
            backgroundColor: Colors.lightGreen,
            todayBackgroundColor: Colors.blue,
            trailingDatesBackgroundColor: Colors.pink,
            leadingDatesBackgroundColor: Colors.pink),
      ),
    )));
  }

セルの背景色は、「MonthViewSettingsクラス」の「monthCellStyle」で変更できます。

具体的には、「monthCellStyle引数」に指定する「MonthCellStyleクラス」の引数で設定を行います。

「MonthCellStyleクラス」の引数で設定できる背景色は、4つあります。

  • backgroundColor : セルの背景色(今日の日付以外)
  • todayBackgroundColor : 今日のセルの背景色
  • trailingDatesBackgroundColor : 1日より前のセルの背景色
  • leadingDatesBackgroundColor : 30もしくは31日より後のセルの背景色

背景色が必要な部分の引数を使って設定します。

コメント

タイトルとURLをコピーしました