ホーム > Google Calendar Color 拡張機能

Google Calendar Color 拡張機能

  • 2010/09/24 21:39
Check

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

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

スクリーンショット

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

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

月曜始まり版

@-moz-document url-prefix("https://calendar.google.com/") {
/* 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://calendar.google.com/") {
/* 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を利用してますので、拡張機能として実装してみました。
Google WebStoreからインストールできますので、よかったらどうぞ。

Chrome ウェブストア Google Calendar Color 月曜始まり版
Chrome ウェブストア Google Calendar Color 日曜始まり版

コメント:51

ns777 2012/08/20

URI の画像を見てください。 Labs 機能の「朝と夜を非表示」を ON にすると
土曜日の省略された場所も赤色になってしまいます。
青色にできないでしょうか?

suekichi 2012/09/04

>ns777さん
すいません。Labs機能での動作までは気づかなかったです。
ちょっと見てみますが、難しいかも・・・

kosan 2012/11/26

Chrome ウェブストアより Google Calendar Color 月曜始まり版をインストールさせて頂きました。

月表示では土日の着色表示されてますが
月表示以外では着色されません。

途中のコメント拝見させ頂きましたら、週対応版という表現があったのですが、Chrome ウェブストアよりインストールさせて頂いた
Google Calendar Color 月曜始まり版では週対応などされていないのでしょうか?
よろしくお願い申し上げます。

kosan 2012/11/26

IEでコメント入力しました。
IEでは反映されていますが、Chromeでは反映(未入力)でした。
年の為再度 Chromeより入力させて頂きます。

Chrome ウェブストアより Google Calendar Color 月曜始まり版をインストールさせて頂きました。

月表示では土日の着色表示されてますが
月表示以外では着色されません。

途中のコメント拝見させ頂きましたら、週対応版という表現があったのですが、Chrome ウェブストアよりインストールさせて頂いた
Google Calendar Color 月曜始まり版では週対応などされていないのでしょうか?
よろしくお願い申し上げます。

suekichi 2012/11/28

>kosanさん
すいません。週表示には対応していません。

現在(2012/11/28)Googleカレンダーの仕様変更により、月表示でも色がつかないようです。
検討します。

kosan 2015/09/01

2012/11/26 に週表示の対応について連絡していました。
別のアカウントでのカレンダーで土日の着色表示をしたいと
以前、Chrome ウェブストアよりインストールさせて頂いた事を失念しており、
再度検索し、既存(設定済み)のアカウントとの設定の違いを比べたりと遠回りをして
Google Calendar Color 月曜始まり版を拡張機能としてインストール出来ました。
ありがとうございました。

前置きが長かったですね…。
無意識でしたが、現在は正しく週表示の対応はできているようです。

要望として、祝日も着色できれば、
ホントのカレンダーに近い感覚で使える気が致します。

KF 2015/10/28

Chrome拡張機能でお世話になっています。
calendar.google.com に対応いただけると助かります。

hotate 2015/11/02

Firefoxで利用させていただいております、ありがとうございます。
いつの頃からか、GoogleカレンダーのURLの “www” の部分が “calendar” に変わっておりますので、1行目を以下のように変更する必要がありました。

@-moz-document url-prefix(“https://calendar.google.com/calendar/”) {

suekichi 2016/02/25

https://calendar.google.com/calendar

変更後に対応しました

コメントフォーム
入力した情報を記憶する

トラックバック:0

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

ホーム > Google Calendar Color 拡張機能

Tag cloud
Amazon
いろいろ

ページの上部に戻る