WordPress calendar widget CSS you can copy-paste in your theme development.

Updated:

While developing a WordPress theme a lot of time you forget to style WordPress calendar widget. You can find many premium themes which do not care about WordPress calendar widget and i know i have also done a lot in past.

Although it’s a lesser used functionality but it is unwise to ignore if you are developing a premium WordPress theme. So i have created and decided to share some standard css which i use to customize any theme i work on.

Some pre styled WordPress calendar widget CSS

Style 0

#wp-calendar {
width:100%;
font-size:12px;
font-weight:300;
border-collapse:separate;
border-spacing:8px;
margin-left:-2px;
}

#wp-calendar
caption {
display:none;
}

#wp-calendar tbody
td {
margin-bottom:10px;
text-align:center;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
border:1px solid #f4f4f4;
padding:6px;
}

#wp-calendar tbody td:hover {
border-color:#e2e2e2;
}

#wp-calendar tbody
td.pad {
border:0;
}

#wp-calendar tbody
td#today {
color:#47C2DC;
border-color:#47C2DC;
}

#wp-calendar tfoot td#prev a,#wp-calendar tfoot td#next
a {
color:#888;
font-size:12px;
font-weight:400;
position:relative;
text-transform:uppercase;
bottom:-9px;
margin-bottom:1px;
}

#wp-calendar tfoot
td#prev {
text-align:left;
}

#wp-calendar tfoot
td#next {
text-align:right;
}

#wp-calendar thead
th {
font-size:13px;
font-weight:400;
color:#888;
text-align:center;
padding-bottom:10px;
}

#wp-calendar tbody td
a,#wp-calendar tfoot td#prev a:hover,#wp-calendar tfoot td#next a:hover {
color:#47C2DC;
}

Style 1
wordpress-calendar1

.widget_calendar {float: left;}
#wp-calendar {width: 100%; }
#wp-calendar caption { text-align: right; color: #333; font-size: 12px; margin-top: 10px; margin-bottom: 15px; }
#wp-calendar thead { font-size: 10px; }
#wp-calendar thead th { padding-bottom: 10px; }
#wp-calendar tbody { color: #aaa; }
#wp-calendar tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding:8px;}
#wp-calendar tbody td:hover { background: #fff; }
#wp-calendar tbody .pad { background: none; }
#wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; }
#wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }

—————

Style 2
SmallEnvelop calendar-widget

#wp-calendar, #wp-calendar th, #wp-calendar td {
text-align: center;
background: none;
border: none;
}
#wp-calendar {
background: none;
empty-cells: hide;
width: 260px;
font: normal 11px / 200% Verdana, Arial, Helvetica, sans-serif;
}
#wp-calendar th {
font-style: normal;
font-weight: bold;
text-transform: capitalize;
border-bottom: 1px solid #666;
}
#wp-calendar td {
text-align: center;
background: transparent url(images/entry-meta.png) repeat-x top left;
padding: 0px;
border-bottom: 1px solid #ccc;
}
#wp-calendar td:hover {
background-color: red;
}
#wp-calendar a {
text-decoration: none;
display: block;
color: #fff;
}
#wp-calendar a:hover {
background: #c5d1d9;
color: #666;
}
#wp-calendar caption {
font-weight: bold;
text-align: center;
}
#wp-calendar #today {
rgba(255, 255, 255, 0.27);
}
#wp-calendar caption {
text-align: center;
width: 100%;
}
#wp-calendar .pad {
background-color: #fff;
}
#wp-calendar #next a {
padding-right: 10px;
text-align: right;
background: #f0f3f5;
color: #666;
}
#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
rgba(196, 196, 196, 0.67);
color: #666;
}
#wp-calendar #prev a:hover, #wp-calendar #next a:hover {
color: #fff;
}
#wp-calendar .pad, #wp-calendar .pad:hover {
background: rgba(255, 255, 255, 0);
}

———–

style 3

#wp-calendar { width: 100%; font-size: 11px; }
#wp-calendar thead th { background: #f5f5f5; border: 1px solid #ddd; border-top: none; font-size: 11px; }
#wp-calendar tbody td { text-align: center; border: 1px solid #ddd; line-height: 2.5em; transition: background 0.15s ease; -webkit-transition: background 0.15s ease; -o-transition: background 0.15s ease; -moz-transition: background 0.15s ease; }
#wp-calendar tbody td:hover { background: #f1f1f1; color: #333; }
#wp-calendar tbody td a { display: block; text-decoration: none; background: #f1f1f1; color: #333; }
#wp-calendar tbody td:hover a { background: #4d4d4d; color: #fff; }
#wp-calendar tfoot td { padding-top: 1px; padding: 4px; }
#wp-calendar caption { cursor: pointer; font-size: 13px; text-transform: uppercase; margin: 0; padding: 12px; outline: 0 none !important; background: #3b86b0; color: #fff; }
#wp-calendar tbody a { display: block; text-decoration: underline; }
#wp-calendar th { text-align: center; border: 1px solid transparent; border-top: none; padding: 7px 0; color: #a7a7a7; }
#footer #wp-calendar thead th { background: #222 }
#footer #wp-calendar tbody td { border-color: #222 }

———

Style 4

#calendar_wrap {
	border: 1px solid #DDD;
	border-radius: 4px;
	}

.widget_calendar #wp-calendar {
	width: 100%;
	}

.widget_calendar caption {
	font-size: 18px;
	font-style: italic;
	color: #777;
	background: #F4F4F4;
	padding: 5px 0 8px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #DDD;
	}

.widget_calendar th,
.widget_calendar td {
	text-align: center;
	}

.widget_calendar #today {
	background: #F4F4F4;
	border-radius: 4px;
	}

.widget_calendar #prev,
.widget_calendar #next {
	padding: 5px 0;
	}

—

Style 5

#wp-calendar { border-collapse: collapse; border:1px solid #ddd; width:100%; border-top:none; }
#wp-calendar td, #wp-calendar th { text-align:center; }
#wp-calendar caption { color: #fff; padding: 0; line-height: 39px; }
#wp-calendar thead, #wp-calendar tfoot { line-height:33px; background:#eee; }
#wp-calendar tbody { line-height:33px; }
#wp-calendar #prev, #wp-calendar #next { padding:0 10px; background:#eee; }
#wp-calendar #prev { text-align:left; }
#wp-calendar #next { text-align:right; }

 

Style 6

#wp-calendar {
width:100%;
}

#wp-calendar caption {
color:#eee;
font-size:13px;
margin-top:0;
background:#111;
text-transform:uppercase;
padding:8px 0;
}

#wp-calendar thead {
font-size:10px;
background:#333;
color:#fff;
}

#wp-calendar thead th {
padding:4px 10px;
}

#wp-calendar tbody {
color:#aaa;
}

#wp-calendar tbody td {
background:#222;
color:#ccc;
text-align:center;
font-size:13px;
padding:2.5%;
}

#wp-calendar tbody td a {
color:#ccc;
text-decoration:underline!important;
}

#wp-calendar tbody td.pad {
background:#111;
}

#wp-calendar tbody .pad {
background:none;
}

#wp-calendar #today {
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,.3);
background:0;
}

#wp-calendar tfoot #next {
font-size:10px;
text-transform:uppercase;
text-align:right;
}

#wp-calendar tfoot #prev {
font-size:10px;
text-transform:uppercase;
padding-top:5px;
}

 

---

A WordPress calendar comes with core wordpress classes which is pretty simple to customize. You can find a set of WordPress calendar widget CSS core classes to customize it by your own.

.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}