CSS unordered list calendar

July 2009
  • S
  • M
  • T
  • W
  • T
  • F
  • S
  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  

  • CSS only calendar using an unorderd list.
  • See source code for implementation
  • See my blog entry for more info

the css

.clear{	clear:both;}
.cal_month{
	/* month div*/
	width:180px;
	border:1px solid #006699;
	background:#33ccff;
	color:#FFF;
	line-height:21px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	padding-bottom:6px;
	}
.cal_month .cal_title{
	border-bottom: 1px solid #CCC;
	background:#006699;
	padding:2px;
	text-align:center;
	}	
.cal_month ul{
	clear:both;
	list-style:none;
	margin:0px;
	padding:4px;
	margin:auto;
	width:168px;
	}
.cal_month ul li{
	float:left;
	width:21px;
	height:21px;
	border:1px solid #6c6c6c;
	margin-right:1px;
	margin-bottom:1px;
	text-align:center;
	background:#FFF;
	color:#333;
	font-size:90%;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	}
.cal_month ul li.cal_weekday{
	color:#111;
	background:#DDD;
	}
.cal_month ul li.cal_empty{
	background:#39accf;
	border:1px solid #39accf;
	}
.cal_month ul li.today{
	border:1px solid #000;
	background:#DDD;
	}