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

8927 ワード

google calendar firefox CSS Chrome CSS テキストリンク

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

Author And Source

この問題について(【2019年1月版】Googleカレンダーで月表示の土日に色をつけるCSS), 我々は、より多くの情報をここで見つけました https://qiita.com/yaslam/items/23ccf499a9c4049842bc

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .

GC詳細の印刷