ホーム > タグ > calendar

calendar

Google Calendar の土日に色をつけるExtentsion、まだ使えます

今日、Google Calendarを見ると、デザインがアップデートされたとメッセージが表示されました。
これで、土日の色が公式に対応されたかっ!と思ったのですが、残念ながら対応されていませんでした。

以前作成したChrome用のExtensionですが、確認したところまだ有効でしたので、よければご利用ください。

Google Calendar の土日に色をつける方法

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

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

ホーム > タグ > calendar

Tag cloud
Amazon
いろいろ

ページの上部に戻る