Fossa Advent Calendar 15日目

アドベントカレンダー

FullCalendar 5 & 6

使用環境①

Name	Version
@fullcalendar/core	5.11.3
@fullcalendar/daygrid	5.11.3
@fullcalendar/vue3	5.11.3

使用環境②

Name	Version
@fullcalendar/core	6.0.1
@fullcalendar/daygrid	6.0.1
@fullcalendar/vue3	6.0.1

土日の背景色を変える

土曜日と日曜日は、背景色を変えたいと思って、試してみました。

th.fc-day-sat {
  background-color: #eaf4ff;
}
th.fc-day-sun {
  background-color: #ffeaea;
}
td.fc-day-sat {
  background-color: #eaf4ff;
}
td.fc-day-sun {
  background-color: #ffeaea;
}

修正前のFirefox

すると、下図のように、Firefoxだと、ボーダーが表示されません。

Firefoxの場合

設定を追加

Firefoxでも、表示されるように、設定を追加します。

th.fc-col-header-cell.fc-day-sat {
  background-color: #eaf4ff;
  position: static;
}
th.fc-col-header-cell.fc-day-sun {
  background-color: #ffeaea;
  position: static;
}
td.fc-day-sat {
  background-color: #eaf4ff;
  z-index: -1;
}
td.fc-day-sun {
  background-color: #ffeaea;
  z-index: -1;
}

修正後のFirefox

設定追加後のFirefox