DayPilot » Knowledge Base » Sample Monthly Calendar CSS Theme

A sample monthly calendar CSS theme. Uses CSS3 features (gradients). You can find this theme in the DayPilot Pro package (Demo/Themes/month_green.css).

See Also

• List of CSS classes used in CssOnly mode (Month)
• CSS Theme Designer (online tool)

Theme Source (month_green.css)

/* month full */

.month_green_main 
{
	border: 1px solid #aaa;
}

.month_green_cell 
{
	background-color: white;
}

.month_green_cell_inner 
{
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;	
}

.month_green_cell_header 
{
	text-align: right;
	padding-right: 2px;
}

.month_green_header_inner
{
	text-align: center; 
	vertical-align: middle;
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	cursor: default;
	
	color: #ffffff;
	background: #666;
	background: -moz-linear-gradient(
		top,
		#777 0%,
		#666);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#777),
		to(#666));
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#777777", endColorStr="#666666");
	text-shadow:
		0px -1px 1px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,0.3);
}

.month_green_message 
{
	padding: 10px;
	opacity: 0.9;
	filter: alpha(opacity=90);
	
	color: #ffffff;
	background: #000;
	background: -moz-linear-gradient(
		top,
		#999 0%,
		#666);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#999),
		to(#666));
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#999999", endColorStr="#666666");
	text-shadow:
		0px -1px 1px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,0.3);
}


.month_green_event_inner 
{
	position: absolute;
	top: 0px;
	bottom: 2px;
	left: 0px;
	right: 0px;
	overflow:hidden;
	padding: 2px;
	padding-left: 5px;
	font-size: 12px;
	
	color: #ffffff;
	background: #a2c200;
	background: -moz-linear-gradient(
		top,
		#a2c200 0%,
		#8aaa00);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#a2c200),
		to(#8aaa00));  
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#a2c200", endColorStr="#8aaa00");
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #7cb316;
	-moz-box-shadow:
		0px 2px 3px rgba(000,000,000,0.3),
		inset 0px 0px 2px rgba(255,255,255,0.8);
	-webkit-box-shadow:
		0px 2px 3px rgba(000,000,000,0.3),
		inset 0px 0px 2px rgba(255,255,255,0.8);
	box-shadow:
		0px 2px 3px rgba(000,000,000,0.3),
		inset 0px 0px 2px rgba(255,255,255,0.8);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,1);
}

.month_green_event_hover .month_green_event_inner 
{
	background: #a8dc18;
	background: -moz-linear-gradient(
		top,
		#a8dc18 0%,
		#8fc300);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#a8dc18),
		to(#8fc300));
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#a8dc18", endColorStr="#8fc300");
}

.month_green_shadow_inner 
{
	background-color: #666666;
	opacity: 0.5;
	filter: alpha(opacity=50);
	height: 100%;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}