拡張機能

普段、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 拡張機能ですが、独立したページにしました。今後は、こっちで更新したいと思います。