Better WordPress Calendar Widget Sass/CSS Styles

The WordPress calendar widget comes pre-packaged with WordPress core. For anyone posting time-sensitive content, a calendar is a great way to alert your users to new content. In this tutorial, I’ll show you how to apply some simple, yet beautiful, styles to the calendar widget.

I’ve included both Sass and CSS versions.

There have been previous attempts at customizing the calendar widget, but in my opinion, they fall short. This one, for example, has too small of a font-size, not enough contrast, and fairly messy CSS code. This one is much better, but still not available in Sass, is lacking contrast on the links, and has a small clickable area for the days that contain posts. And both use pixels for font-size and spacing.

↓ Jump to code explanation

Features of My WordPress Calendar Widget Styles

• 100% Responsive
• Available in Sass (as well as CSS)
• Uses a max-width so the calendar never becomes too big
• Uses relative units (rem) instead of pixels
• Large, clickable area for days that contains posts
• Visual indicator for the current day
• Automatically center-aligned, based on parent element

P.S. – If you use an events calendar plugin & would like some base styles for it, please let me know in the comments.

Calendar Styles – Sass

NOTE: I’m using variables for colors. Be sure to define them in your own code, or replace with hex values. Search for $ to find variables.

#wp-calendar {
	width: 100%;
	max-width: 37.5rem;
	background: $lightgrey;
	margin-left: auto;
	margin-right: auto;

	caption {
		background: $secondary-color;
		color: $white;
		padding: 0.25rem;
		text-align: center;
	}

	thead {
		
		tr {
			border-right: 1px solid $lightgrey;
		}

		th {
			font-size: 90%;
			font-weight: bold;
			padding: 0.25rem;
			background: $lightgrey;
			text-transform: uppercase;
			text-align: center;
		}
	} // thead

	tbody td {
		position: relative;
		padding: 0.125rem;
		text-align: center;
		border: 1px solid $lightgrey;
		background: $white;

		&.pad {
			opacity: 0.7;
		}

		&#today {
			font-weight: bold;

			&#today:after {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				width: 0;
				height: 0;
				border-top: 10px solid $text-color;
				border-left: 10px solid transparent;
			}
		}

		a {
			display: block;
			background: rgba( $link-color, 0.2 );

			&:hover {
				background: $link-color;
				color: $white;
			}
		}
	} // tbody td

	tfoot tr {
		background: rgba( $white, 0.7 );
		border: 1px solid $lightgrey;

		td {
			border: 0;
			padding: 0;
		}

		a {
			display: block;
			padding: 0.25rem 0.75rem;

			&:hover {
				background: $white;
			}
		}

		#prev {
			text-align: left;
		}
		#next {
			text-align: right;
		}
	} // tfoot tr
} // #wp-calendar

Calendar Styles – CSS

Feel free to replace the hex color values with anything you’d like.

#wp-calendar {
	width: 100%;
	max-width: 37.5rem;
	background: #ccc;
	margin-left: auto;
	margin-right: auto;
}

#wp-calendar caption {
	background: #3299bb;
	color: #fff;
	padding: 0.25rem;
	text-align: center;
}

#wp-calendar thead tr {
	border-right: 1px solid #ccc;
}

#wp-calendar thead th {
	font-size: 90%;
	font-weight: bold;
	padding: 0.25rem;
	background: #ccc;
	text-transform: uppercase;
	text-align: center;
}

#wp-calendar tbody td {
	position: relative;
	padding: 0.125rem;
	text-align: center;
	border: 1px solid #ccc;
	background: #fff;
}

#wp-calendar tbody td.pad {
	opacity: 0.7;
}

#wp-calendar tbody td#today {
	font-weight: bold;
}

#wp-calendar tbody td#today:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-top: 10px solid #999;
	border-left: 10px solid transparent;
}

#wp-calendar tbody td a {
	display: block;
	background: rgba(50, 153, 187, 0.2);
}

#wp-calendar tbody td a:hover {
	background: #3299bb;
	color: #fff;
}

#wp-calendar tfoot tr {
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid #ccc;
}

#wp-calendar tfoot tr td {
	border: 0;
	padding: 0;
}

#wp-calendar tfoot tr a {
	display: block;
	padding: 0.25rem 0.75rem;
}

#wp-calendar tfoot tr a:hover {
	background: #fff;
}

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

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

WordPress Calendar Widget Styles Explained

Here’s a rundown of what’s happening with the code:

• #wp-calendar is the ID of the calendar’s <table>
  • It’ll have a width of 100%, until it hits 37.5rem (max-width)
  • The margin-left and margin-right of auto will center it
• The <caption> element is what displays the month & year at the top
  • We give that some basic color styles, a little padding, and center it
• The <thead> is where the days of the week are located
  • To make the font stand out here, we drop the size to 90%, bold it, make all letters uppercase, and give it a different background color
• All the <td> elements inside of <tbody> are for the days of the week.
  • The <td> with a class of .pad is for the extra spaces before the first of the month, and after the last day of the month, when no days are represented in those table cells. We drop the opacity on those so they aren’t as noticeable.
  • The <td> with an ID of #today represents the current day. We use an :after pseudo-element to add a small triangle in the top-right corner.
• All the <a> tags inside of <td>s mean that a post occurred on that day.
  • We use display: block; so that the entire inside of the table cell is clickable, and apply some basic background & color styles.
• The <tfoot> is where the next & previous month links reside.
  • Some basic styles are applied, and we align the #prev month to the left, and the #next month to the right.

Other Applications

Although these styles were developed specifically for WordPress’ calendar widget, they could be applied to any calendar. You would want to check the markup of your calendar to see if it matches the output of WordPress’ calendar.

For instance, your calendar might use a standard <tr> and <td> for the “November 2015” header, instead of a <caption> element. Hopefully that row, or cell, has a class applied, so you could swap out <caption> with your whatever your class is. Likewise, the #today, #prev, and #next IDs might be different, or removed all together.

Requests for Calendar Plugins?

If you use an events calendar plugin, or any other plugin that utilizes a calendar, and would like some base styles for it, please let me know in the comments. I’d be happy to try to create something for you.