ホーム > プログラム > Google カレンダーの土日に色をつける方法

Google カレンダーの土日に色をつける方法

2010/04/19 23:44
プログラム
calendar | extension | google | カレンダー | 拡張機能

Check

普段、Google Calendarを使っているのですが、土日のカラムに色がついていないのがとても気になっていました。
土日も平日も関係なく、がんがん仕事してる人や、そもそも土日が休みじゃない人には逆に良い仕様なのかもしれませんけど。

Google Calendarの土日に色を付ける方法は、ぐぐるとたくさん出てくるんですが、
結構古い情報で、最新(2010/03/15現在)では動作しなかったり、動作環境がちがったりと、なかなかいいのがなかったので、自作してみました。

スクリーンショット

実現方法としては、Google Calendarに独自のCSSが適用できればOKです。

Firefoxでは、プロファイルディレクトリ内にあるchromeディレクトリにuserContent.cssを編集もしくは追加します。

@-moz-document url-prefix("https://www.google.com/calendar/") {
/*** Saturday on main calendar ***/
.st-dtitle:nth-last-child(2):not(.st-dtitle-nonmonth) {
background-color: #D8E2F2 !important;
color: #6A6AFF !important;
}

.st-bg-table .st-bg:nth-last-child(2) {
background-color: #F0F3FC !important;
}

/*** Sunday on main calendar ***/
.st-dtitle:last-child:not(.st-dtitle-nonmonth) {
background-color: #F6E4E4 !important;
color: #FF6A6B !important;
}

.st-bg-table .st-bg:last-child {
background-color: #FFF0EE !important;
}


/*** Saturday on mini calendar ***/
.dp-dayh:nth-last-child(2),
.dp-weekend:nth-last-child(2),
.dp-weekend-selected:nth-last-child(2) {
color: #22F !important; 
}

.dp-weekend:nth-last-child(2).dp-offmonth,
.dp-weekend-selected:nth-last-child(2).dp-offmonth {
color: #88F !important; 
}

/*** Sunday on mini calendar ***/
.dp-dayh:last-child,
.dp-weekend:last-child,
.dp-weekend-selected:last-child {
color: #E22 !important;
}

.dp-weekend:last-child.dp-offmonth,
.dp-weekend-selected:last-child.dp-offmonth {
color: #E88 !important;
}

}

私は普段Chromeを利用してますので、拡張機能として実装してみました。
下記にダウンロードできるように置いておきましたので、欲しい人はどうぞ。

月曜始まり版
 日曜始まり版

簡単なものですが、Google Chrome Extensionの作り方や、HTML5(CSS3)等、
興味深いネタが入ってますので、また書きたいと思います。

2010/05/04 追記
この設定だと、日付の部分だけでなく、予定欄のところも色がつきます。

2010/05/21 追記
Google Calendar のデザインがアップデートされたようですが、土日にはまだ色がついてません。まだ使えます。
Google Calendar の土日に色をつけるExtentsion、まだ使えます

2010/09/24 追記
このGoogle Calendar Color 拡張機能ですが、独立したページにしました。今後は、こっちで更新したいと思います。

コメント:24

keiji 2010/04/29

私もChrome愛用しててカレンダーを利用しているのですが
作成頂いたcssで非常に便利になりました！
ありがとうございます！

しかしなぜGoogleが公式に対応しないのか謎ですよね。
これからも頑張ってください！

suekichi 2010/04/30

> keiji
ありがとうございます！
使ってもらえてウレシイです！
また何か便利なものができればと思います。

sho 2010/05/27

私もクロームを使っているので、非常に助かりました。
ありがとうございます。素晴らしい！
ところで、当月以外の日曜、土曜の日付部分が色づけされていないのは仕様ですか？
予定欄のところは色づけされているので、
どちらかに統一された方が美しいかと思いました。
ｃｓｓはよくわからないので、的外れな意見だったら申し訳ないですが・・・。
ちなみに日曜始まり版を使わせていただいております。

suekichi 2010/05/27

ご利用ありがとうございます。
当月以外の土日の色、確かに変ですね。
検討してみます。

suekichi 2010/05/28

取り急ぎ、当月以外の土日の色も同じいろになるように修正しました。(記事内のCSSはまだ未修正)
良ければ使ってください。

sho 2010/05/28

早速の対応ありがとうございます。
ありがたく使わせていただきますね。

gailee 2010/07/13

Chrome拡張日曜始まり版ダウンロードいただきました。
ありがとうございます。

小さな違いですが頻繁に利用するものなのでとても助かります。

世間知らず 2010/07/19

suekich様
月曜始まりのcss使わせて頂いております
非常に便利になりました
ありがとうございます！
　
　m(_ _)m

imoko 2010/09/06

ありがとうございます！
以前はFirefoxとかじゃないとできなかったのがついに愛用のChromeで色分けできるようになって感無量です！

stryh 2010/09/07

早速Chromeに入れました。
わずかな違いではありますが、非常にみやすくなりました。
それと要望なのですが、月表示時は色が変わるのですが、週表示の場合色が変わらないみたいです。
これは対応していないのでしょうか？
それとも何か設定が必要なのでしょうか？

Masa 2010/09/08

欲しかった機能です｡
早速､使わせてもらいました｡ありがとうございます｡

hk1226 2010/09/09

非常に助かりました、ありがとうございました！

suekichi 2010/09/16

>stryh
現状、週表示は対応していませんです。
検討してみますね。

SHIBA 2010/09/22

IE7や8では、土日の色分けは無理なのでしょうか？
色々と調べているのですが、なかなか方法が見つかりません。
もし、ご存知でしたら、ご教授お願いします。

suekichi 2010/09/24

>SHIBAさん
IEには、拡張機能といった概念がありません。
できないこともないことはないんですが、FirefoxやChromeと比べて、ちょっと複雑で難易度が高いです。お力になれず、申し訳ないです。

SHIBA 2010/09/29

suekichi さんへ

回答ありがとうございます。

やはり、難しいんですね。

残念ですが、諦めます。

お忙しい中、ありがとうございました。

kou_kei_mama 2010/10/21

chromeの色を変える方法を探していました。
設定も簡単で、とても見やすくなりました。
感謝です！

marny7 2011/01/04

Extensionsで簡単に週末の色付けが出来ました。
有難うございます。

サイトのデザインもとても見やすく格好良いですね。

suekichi 2011/01/13

>marny7
ありがとうございます!

Takeshi 2011/03/16

検索してこちらにたどり着きました。
ご自作のChrome拡張機能、使わせていただいてます。
Googleカレンダーがとても見やすくなり重宝しています。
ありがとうございました。

ところで…
「月」のビューでは色分けされているのですが、「週」のビューでは土日も背景が白いです。
何か設定が必要なのか、それとも対応しているのは「月」だけで「週」は対象外なのか…

「週」でも色分けできる方法があればご教示いただきたく、よろしくお願いいたします。

suekichi 2011/03/22

> Takeshi
http://www.suekichi.org/blog/google-calendar-color-extension/ で公開している、
週表示対応版をご利用いただければ、大丈夫かと思います。

hkishida 2011/12/07

土日カラーの拡張機能、使わせていただいてます。ありがとうございました。どこかにトピックがないかと思って検索してみたのですが、無料でこんなに理想的な解決策に出会えるとは。カレンダーも見違えるほど使いやすくなりました。感謝します！(土曜・青、日曜・赤という落ち着きパターンは日本だけの定型なのでしょうか？海外でもニーズがあるように思えますが。)

うどん 2012/01/31

SUEKICHIさま

google先生に尋ねるとここにたどり着き、
FirefoxのCSSを早速、使わせていただきました。
たいへん助かります！

元々、サイボウズLive使いだったのですが、
スマホ導入によりGoogleカレンダーを使う必要が生じ、
（スマホのジョルテと連動させたい&スマホのサイボウズLiveアプリがダメダメ）
せめて土日に色をつけたいと思っていたところでした。

通りすがり 2012/02/07

拡張入れさせていただきました。
非常に見やすくなってとても助かっています。

ありがとうございました。

トラックバック:1

この記事のトラックバック URL: http://www.suekichi.org/blog/2010/04/google-calendar-color/trackback/
トラックバックの送信元リスト: Google カレンダーの土日に色をつける方法 - SUEKICHI.org より