LoginSignup
8
3

More than 5 years have passed since last update.

【2019年1月版】Googleカレンダーで月表示の土日に色をつけるCSS

Last updated at Posted at 2017-12-13

**** 2019年1月時点のGoogleカレンダーに合わせ更新しました ****

Googleカレンダーの月表示ではCSSで土日に色をつけて利用しています。

独自CSSの設定はChromeではStylistという拡張機能で、FirefoxではStylishというアドオンで行っています。
適宜設定でプレフィクスや正規表現でURL(https://calendar.google.com/calendar/r) を指定してください。
※月表示にのみ対応していています。週表示などには対応していません。
※現時点のGoolgeカレンダーに合わせて作成したCSSなので、Googleカレンダー側に変更が合った場合は適宜変更してください。(色なども好きなものに変えてください)

月曜開始

/** start monday **/

/* 
 * -----------
 * main 
 * ----------- 
 */
/*** week columnheader ***/
/* Saturday */
.PhLhOd.elYzab-cXXICe-Hjleke:nth-child(7) .wy3aMe {
    color: #6A6AFF !important;
}
/* Sunday */
.PhLhOd.elYzab-cXXICe-Hjleke:last-child .wy3aMe {
    color: #FF6A6B !important;
}

/*** month presentation ***/
/* Saturday */
.t8qpF.elYzab-cXXICe-Hjleke:nth-child(6) {
    background-color: #eaf4ff !important;
}
.t8qpF.elYzab-cXXICe-Hjleke.YK7obe:nth-child(6) .yzYBvd {
    color: #6A6AFF !important;
}
/* Sunday */
.t8qpF.elYzab-cXXICe-Hjleke:last-child {
    background-color: #ffeaea !important;
}
.t8qpF.elYzab-cXXICe-Hjleke.YK7obe:last-child .yzYBvd {
    color: #FF6A6B !important;
}



/* 
 * -----------
 * side 
 * ----------- 
 */
/*** week columnheader ***/
/* Saturday */
.SoBqBf:nth-child(6) :first-child {
    color: #22F !important;
}
/* Sunday */
.SoBqBf:last-child :first-child {
    color: #E22 !important;
}

/*** month presentation ***/
/* Saturday */
.iMprOe:nth-child(6) .r4nke {
    color: #88F !important;
}
/* Sunday */
.iMprOe:last-child .r4nke {
    color: #E88 !important;
}

  
日曜開始

/** start sunday **/

/* 
 * -----------
 * main 
 * ----------- 
 */
/*** week columnheader ***/
/* Saturday */
.PhLhOd.elYzab-cXXICe-Hjleke:last-child .wy3aMe {
    color: #6A6AFF !important;
}
/* Sunday */
.PhLhOd.elYzab-cXXICe-Hjleke:nth-child(2) .wy3aMe {
    color: #FF6A6B !important;
}

/*** month presentation ***/
/* Saturday */
.t8qpF.elYzab-cXXICe-Hjleke:last-child {
    background-color: #eaf4ff !important;
}
.t8qpF.elYzab-cXXICe-Hjleke.YK7obe:last-child .yzYBvd {
    color: #6A6AFF !important;
}
/* Sunday */
.t8qpF.elYzab-cXXICe-Hjleke:first-child {
    background-color: #ffeaea !important;
}
.t8qpF.elYzab-cXXICe-Hjleke.YK7obe:first-child .yzYBvd {
    color: #FF6A6B !important;
}



/* 
 * -----------
 * side 
 * ----------- 
 */
/*** week columnheader ***/
/* Saturday */
.SoBqBf:last-child :first-child {
    color: #22F !important;
}
/* Sunday */
.SoBqBf:first-child :first-child {
    color: #E22 !important;
}

/*** month presentation ***/
/* Saturday */
.iMprOe:last-child .r4nke {
    color: #88F !important;
}
/* Sunday */
.iMprOe:first-child .r4nke {
    color: #E88 !important;
}


8
3
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
8
3