memo.xight.org

日々のメモ

userContent.css で Google Calendar で土日の背景色を変更する

Summary (月曜始まり)

@-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;
	}
}


Obsolete

@-moz-document url-prefix("http://www.google.com/calendar/"), 
               url-prefix("https://www.google.com/calendar/") {
    #dh5,#dh12,#dh19,#dh26,#dh33,#dh40,#dh47,#dh54 {
        color: #00F;
        background-color: #CCF;
        display: block;
        padding: 0 0.4em 2px 0;
        margin-bottom: -2em;
    }
    .dayNotInMonth > #dh5, .dayNotInMonth > #dh12,
    .dayNotInMonth > #dh19, .dayNotInMonth > #dh26,
    .dayNotInMonth > #dh33, .dayNotInMonth > #dh40,
    .dayNotInMonth > #dh47, .dayNotInMonth > #dh54 {
        color: #88F;
        background-color: #DDF;
    }
    #dh6,#dh13,#dh20,#dh27,#dh34,#dh41,#dh48,#dh55 {
        color: #F00;
        background-color: #FCC;
        display: block;
        padding: 0 0.4em 2px 0;
        margin-bottom: -2em;
    }
    .dayNotInMonth > #dh6, .dayNotInMonth > #dh13,
    .dayNotInMonth > #dh20, .dayNotInMonth > #dh27,
    .dayNotInMonth > #dh34, .dayNotInMonth > #dh41,
    .dayNotInMonth > #dh48, .dayNotInMonth > #dh55 {
        color: #F88;
        background-color: #FDD;
    }

}


マス目とIDの関係

#dh0 #dh1 #dh2 #dh3 #dh4 #dh5 #dh6
#dh7 #dh8 #dh9 #dh10 #dh11 #dh12 #dh13
#dh14 #dh15 #dh16 #dh17 #dh18 #dh19 #dh20
#dh21 #dh22 #dh23 #dh24 #dh25 #dh26 #dh27
#dh28 #dh29 #dh30 #dh31 #dh32 #dh33 #dh34
#dh35 #dh36 #dh37 #dh38 #dh39 #dh40 #dh41

Reference

userstyles.org - Google Calendar - colorize Sat/Sun (start on Mon)
http://userstyles.org/style/show/1101

Marginal Leaves - 2006-10-05 - Googleカレンダーの土・日の日付の背景色を変更してみました
http://d.hatena.ne.jp/margin/20061005/1160031325

Marginal Leaves - 2006-10-06 - Googleカレンダーの土日の色 その2
http://d.hatena.ne.jp/margin/20061006/1160136096

鷹の島 - 2006-10-05 - Googleカレンダーの土・日の文字色を変更しました
http://espion.just-size.jp/archives/06/278124742.html

鷹の島 - 2006-10-06 - Google カレンダーの土日の背景色を変更するワザ - パート2
http://espion.just-size.jp/archives/06/279163958.html

風待ち日記 - Googleカレンダーの土・日の文字色を変更する方法
http://d.hatena.ne.jp/saito-kazuo/20061004/p1

日曜始まり版

Going My Way: Google Calendarの土日の色を変更して見やすくする方法
http://kengo.preston-net.com/archives/002841.shtml

qptaroのメモ - Googleカレンダーの土・日の日付の背景色を変更
http://d.hatena.ne.jp/qptaro/20061005/1160056944

[2012-02-20] 追記

Google カレンダー の土日に色をつける方法 | SUEKICHI.org
http://www.suekichi.org/blog/2010/04/google-calendar-color/