Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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


yaslam
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away