Chromeの拡張機能であるChecker Plus for Google Calender、便利ですね。
chrome ウェブストアページ
でも気に入らない点がいくつかあったのでカスタムcssで出来る範囲で改良したら思ったよりいい感じになったので共有します。
before
after
コード
[data-date*="-04-"],
[data-date*="-06-"],
[data-date*="-08-"],
[data-date*="-10-"],
[data-date*="-12-"] {
background-color: #FFE;
}
[data-date*="-01-"],
[data-date*="-03-"],
[data-date*="-05-"],
[data-date*="-07-"],
[data-date*="-09-"],
[data-date*="-11-"] {
background-color: #EFF;
}
.fc-day-sun {
background-color: #FDD !important;
}
.fc-day-sat {
background-color: #DDF !important;
}
[data-date$="-01"]{
border-left: solid #6f736f 5px!important;
}
a::before{
color: #000000ff!important;
}
td.fc-day::before{
font-weight: bold;
content: attr(data-date)
}
.fc-daygrid-day-number{
display: none;
}
td.fc-day-today{
border: solid #4183ff 5px!important;
}
.fc table{
border-collapse: unset;
}
スキンとテーマ>カスタム に直接書き込むことで編集できます。
やったこと
- 奇数月と偶数月で背景色を変えて月の変わりをわかりやすくする。ついでに1日の左の罫線も目立たせる
- 土日も背景色を変える
- 日付をYYYY-MM-DD表記にして何月かわかりやすくする(可能ならMM-DDがよかったのですが、attr(data-date)を利用しているため必然的にこの形になりました。)
- 今日を目立たせる