ホーム > Google Calendar Color 拡張機能

Google Calendar Color 拡張機能

2010/09/24 21:39

Check

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

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

スクリーンショット

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

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

月曜始まり版

@-moz-document url-prefix("https://www.google.com/calendar/") {
/* Google Calendar Color Monday */

  .st-dtitle:nth-last-child(2),
  .tg-weekend:nth-last-child(2),
  #weekViewAllDayBgwk .st-bg:nth-last-child(2) {

    background-color: #D8E2F2 !important;
    color: #6A6AFF !important;

  }

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

  .st-dtitle:last-child,
  .tg-weekend:last-child,
  #weekViewAllDayBgwk .st-bg:last-child {

    background-color: #F6E4E4 !important;
    color: #FF6A6B !important;

  }

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

  .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;    

  }

  .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;

  }
}

日曜始まり版

@-moz-document url-prefix("https://www.google.com/calendar/") {
/* Google Calendar Color Sunday */

  .st-dtitle:last-child,
  .tg-weekend:last-child,
  #weekViewAllDayBgwk .st-bg:last-child {

    background-color: #D8E2F2 !important;
    color: #6A6AFF !important;

  }

  .st-bg-table .st-bg:last-child,
  .tg-weekend:last-child,
  #weekViewAllDayBgwk .st-bg:last-child {
    background-color: #F0F3FC !important;
  }

  .st-dtitle:first-child,
  .tg-weekend:first-child,
  #weekViewAllDayBgwk .st-bg-next:first-child {

    background-color: #F6E4E4 !important;
    color: #FF6A6B !important;

  }

  .st-bg-table .st-bg:first-child,
  .tg-weekend,
  #weekViewAllDayBgwk .st-bg-next:first-child {
    background-color: #FFF0EE !important;
  }

  .dp-dayh:last-child,
  .dp-weekend:last-child,
  .dp-weekend-selected:last-child {

    color: #22F !important;    

  }

  .dp-weekend:last-child.dp-offmonth,
  .dp-weekend-selected:last-child.dp-offmonth {

    color: #88F !important;    

  }

  .dp-dayh:first-child,
  .dp-weekend:first-child,
  .dp-weekend-selected:first-child {

    color: #E22 !important;

  }

  .dp-weekend:first-child.dp-offmonth,
  .dp-weekend-selected:first-child.dp-offmonth {

    color: #E88 !important;

  }

}

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

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

週表示のときにも色が付いてほしい、という要望があったので作ってみました。
ですが、日表示のときに、いつも色が付いてしまう状態になってしまいました。
ちょっと簡単に回避できなさそうだったので、そのままにしました。
日表示を使っていない人はこちらでもいいかも。

月曜始まり版(週表示対応)
日曜始まり版(週表示対応)

コメント:39

まっと 2010/10/04

期待通りのツールです。
ありがとうございますっ！

じゃが 2010/10/22

chrome使ってるんで助かりました！！

picamogu 2010/10/25

Chromeの情報がなかったので助かりました。
しかも拡張機能にしてもらっているので、さらに大助かりです。

あま 2010/10/26

大変すばらしい拡張機能をありがとうございます。
日がピンク，土が水色の表示をみて感激です。
ところで，週表示対応版と非対応版の両方を入れてみましたが，非対応版しか拡張機能に追加されませんでした。
どんな操作をしたら良いのでしょうか？？
お願いします。

suekichi 2010/10/27

> あま
どちらか片方だけ追加すればOKです。
一度削除していただいて、もう一度必要なほうだけ追加してください。

あま 2010/10/27

＞suekichi
＞どちらか片方だけ追加すればOKです。
なるほど，よくわかりました
どうもありがとうございます。

本文中
＞日表示のときに、いつも色が付いてしまう状態になってしまいました。
との記載がありますが，私の場合，日表示にしても，土日以外は白い背景のまま維持されております。何がどう作用しているのかわからんですが，快適です。
（日表示の場合，土日がともにピンクになります）

じゃい 2010/11/26

頂きました。
普段Chromeをメインに使用していますので非常に助かります（・∀・）

bo_zu2000 2011/01/12

月表示のプログラム頂きました。有り難うございました。
テキストをコピペして日曜始まりに一部修正して使っています。

1つご質問ですが、ダウンロード用のファイルの文字コードはutf-8でしょうか？
emediterで開くと文字化けしてしまいました。

suekichi 2011/01/13

>bo_zu2000
ダウンロード用のファイル、とはどれのことでしょうか？
拡張子がcrxのものは、Chromeの拡張機能ですので、中身はzipです。
zipの中身のファイルは、UTF-8です。

kanda 2011/01/17

firefoxで上記のcssを「userContent.css」にコピペさせていただきました！
月表示の土日に色がつきました！ありがとうございます。

週表示にも色をつけたく、「月曜始まり版（週表示対応）」をダウンロードし、
どうにかテキストデータにして、コピペしようとしましたが、文字化けしてうまくいきません。

crxファイルを反映させて、週表示も色つきにする方法があったらお教えください。

n.o. 2011/02/18

これはいい拡張機能ですね。
使わせていただきます。

へろへろ 2011/02/21

ありがたく使用させていただきます。
ちなみに、日曜始まり版(週表示対応)のリンクにweekが抜けてますよね?

suekichi 2011/03/04

わー！ほんとだ！ありがとうございます。修正しときました。

satou 2011/03/15

週刊アスキーに紹介されていたので早速つかわせていただきました。ありがとうございます。助かります。

たなひ 2011/03/26

「今日」の色と、土曜日の色がいっしょなので、「今日」が土曜日だと、どこが「今日」なのか分からなくなってしまいますね・・。

k,a 2011/03/28

日曜始まりの週対応版を入れたのですが週表示にしても土日が色が変わりません。月表示でしたら変わります。Chrome使っているのですがどうすればいいですか？

suekichi 2011/03/31

>k,a
リロードしてもだめでしょうか・・・。こちらの環境では大丈夫なのですが・・・。

yam 2011/04/08

Google Chrome用の拡張機能　”Minimalist for Google Calendar” のオプションの　General/Custom CSS　に上で紹介されているCSS文（の2行目～44行目）を貼り付けることで使用できました。とても便利です。ありがとうございました。

ＹＭ 2011/04/09

Firefoxのプロファイル日曜始まり版のソース（？）も教えていただければ助かります
上記の@-moz-document ur・・・で始まる物を改変すればよいのでしょうが
当方勉強不足のため改変できません
勝手なお願いですが、何卒宜しくお願い致します

suekichi 2011/04/12

> YM
Firefox用の日曜始まり版のcss、追記しておきました。
よかったらどうぞ。

YM 2011/04/13

suekichi様有り難う御座います
早速日曜始まり版つかわさせていただきます
感謝感謝

meme 2011/04/28

色がついて大変使いやすくなりました
ありがとうございました
あと教えて欲しいのですが、日付が小さくて見難いので大きくする方法はないでしょうか？

y 2011/05/24

イマイチブラウザ上でのGcal、気に入ってなかったんですが、これはいいですね。
Special Thanks！

tak 2011/07/07

これはいいですね。ありがとうございました。

MTH 2011/08/19

最高ｗ

Masa 2011/09/12

cssの知識もないのであきらめていました。リンクをクリックするだけで適用できたので感激です。
ありがとうございました。

Tatsuya＠Doden 2011/09/15

検索でようやくたどり着きました。
早速入れてみたら、バッチリ表示されました。
すばらしいです！！ありがとうございました

りゅー★ 2011/10/08

カレンダーが日本人仕様ではなく非常に素っ気ないモノでしたので、簡単に土日にカラーリングができるこの拡張機能はとても素晴らしいものだと思います。　　ただ、Google Calendar Color Mondayを導入後、Google Calendar Color Sundayの存在に気づきましたが、Google Calendar Color Mondayを削除できません。「ツール」→「拡張機能」を開いてもGoogle Calendar Color Mondayが存在していません。　私は、日曜始まりでカレンダーを運用していますので、たしかに金曜日が青色、土曜日が赤色になっており、Mondayは稼動しているようなのですが…　Mondayが削除できないために、Sundayを導入すると、金土日と色づけされてしまいます。どのように対処したらよろしいかご教示くださるようお願いします。

shinahana 2011/10/11

検索でたどりつきました。
欲しかった機能そのもの！でしたので”感激”です。
ありがとうございます。

suekichi 2011/10/12

新しいタブの中に、「アプリケーション」のところがあり、その中にGoogle Claendar Color Mondayのアイコンがないでしょうか？
そのアイコンを右クリックすると、削除のメニューが出るかと思います。

ろむにー 2011/10/19

Firefoxを使っていますが、色が付きましたー
コピペするだけで簡単で感激です。
本当にありがとうございます。

T-REX 2011/11/09

誤って日曜日始まりをインストールしてしまいました。月曜日始まりをインストールしたいので、日曜日始まりを削除したいのですが、どうすればいいのでしょうか？

suekichi 2011/11/10

> T-REX
ツール＞拡張機能で、「削除」ボタンがあると思うのですが・・・

y3b5 2011/11/10

Google Chromeを使っていて、「ツール」→「拡張機能」に「Google Calendar Color (Monday|Sunday)」が無い方は、「新しいタブ」に入ってないか確認してはどうでしょうか。

自分は、2011/11/10時点の最新バージョン(15.0.874.106 m)でダウンロードさせてもらいましたが、アプリと同列に「Google Calendar Color Monday」が並んでいます。

桐原秀 2012/01/05

同じく土日表示がなくてどうにかならないかなぁ～とググってみたらここにたどり着きました！
ありがたく使わせていただきました☆
非常に助かります♪
ありがとうございました！！

まる 2012/01/23

求めていたものはこれです！
素敵すぎます。ありがとうございます！

gakunari 2012/02/26

Firefoxで使わせていただきました。
予定が見やすくなり、とても便利になりました。
ありがとうございます。

narcolepsy1204 2012/03/22

参考になりました。
ありがとうございました！

ひるあんどん 2012/04/12

有難うございました。

時代の流れで、Google カレンダーを利用することになり、色々と調べておりましたら、このページにたどり着きました。
早速、利用させていただきました。

トラックバック:5

この記事のトラックバック URL: http://www.suekichi.org/blog/google-calendar-color-extension/trackback/
トラックバックの送信元リスト: Google Calendar Color 拡張機能 - SUEKICHI.org より

pingback - Google カレンダーの土日に色をつける方法 | SUEKICHI.org より 2010/09/24: [...] 2010/09/24 追記このGoogle Calendar Color 拡張機能ですが、独立したページにしました。今後は、こっちで更新したいと思います。 [...]
pingback - グーグルカレンダーで土日に色をつける方法 - 初心者のためのGoogleサービス使いこなし法より 2011/01/28: [...] Chromeを使っている人は →Google Calendar Color 拡張機能 | SUEKICHI.org で機能拡張(エクステンション)がダウンロードできるので、こちらを使うのが手っ取り早いです。 [...]
pingback - Google Calendar Color 拡張機能にFirefox用日曜始まり版を追記しました | SUEKICHI.org より 2011/04/12: [...] IT全般、プログラムとかいろいろ。ホームGoogle Calendar Color 拡張機能 [...]
pingback - Google カレンダーのデザインが変わった!!! Google Calendar Color 拡張機能はまだ使えます | SUEKICHI.org より 2011/07/01: [...] というわけで、公開している Google Calendar Color 拡張機能ですが、まだ必要なようです。デザイン変更後も、ちゃんと使えるようです。 [...]
pingback - Google Calendarで土日のカラムを色付け | Kinopyo Blog より 2011/09/16: [...] http://www.suekichi.org/blog/google-calendar-color-extension/ [...]