0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Checker Plus for Google Calendar™のcssをいじくりまわす

Last updated at Posted at 2023-03-11

Chromeの拡張機能であるChecker Plus for Google Calender、便利ですね。
chrome ウェブストアページ
でも気に入らない点がいくつかあったのでカスタムcssで出来る範囲で改良したら思ったよりいい感じになったので共有します。

before

image.png

after

image.png

コード

[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;
}

スキンとテーマ>カスタム に直接書き込むことで編集できます。
image.png

やったこと

  • 奇数月と偶数月で背景色を変えて月の変わりをわかりやすくする。ついでに1日の左の罫線も目立たせる
  • 土日も背景色を変える
  • 日付をYYYY-MM-DD表記にして何月かわかりやすくする(可能ならMM-DDがよかったのですが、attr(data-date)を利用しているため必然的にこの形になりました。)
  • 今日を目立たせる
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?