<div class="datepicker">
	<div class="datepicker-wrapper">
		<div class="datepicker-header">
			<h1>September 2016</h1>
		</div>
		<div class="datepicker-days">
			<div class="datepicker-days-weekday">Sun</div>
			<div class="datepicker-days-weekday">Mon</div>
			<div class="datepicker-days-weekday">Tues</div>
			<div class="datepicker-days-weekday">Wed</div>
			<div class="datepicker-days-weekday">Thurs</div>
			<div class="datepicker-days-weekday">Fri</div>
			<div class="datepicker-days-weekday">Sat</div>
			<div class="datepicker-days-single">1</div>
			<div class="datepicker-days-single">2</div>
			<div class="datepicker-days-single">3</div>
			<div class="datepicker-days-single">4</div>
			<div class="datepicker-days-single">5</div>
			<div class="datepicker-days-single">6</div>
			<div class="datepicker-days-single">7</div>
			<div class="datepicker-days-single">1</div>
			<div class="datepicker-days-single current">2</div>
			<div class="datepicker-days-single">3</div>
			<div class="datepicker-days-single visit">4</div>
			<div class="datepicker-days-single">5</div>
			<div class="datepicker-days-single">6</div>
			<div class="datepicker-days-single saturday">7</div>
			<div class="datepicker-days-single">1</div>
			<div class="datepicker-days-single">2</div>
			<div class="datepicker-days-single discover">3</div>
			<div class="datepicker-days-single">4</div>
			<div class="datepicker-days-single">5</div>
			<div class="datepicker-days-single">6</div>
			<div class="datepicker-days-single">7</div>
			<div class="datepicker-days-single">1</div>
			<div class="datepicker-days-single">2</div>
			<div class="datepicker-days-single">3</div>
			<div class="datepicker-days-single">4</div>
			<div class="datepicker-days-single">5</div>
			<div class="datepicker-days-single">6</div>
			<div class="datepicker-days-single">7</div>

		</div>
		<div class="datepicker-events">
			<ul>
				<li><a href="#">10:00am - Enthusiastically Engineering</a><span>Here are all the juicy details. How exciting!</span></li>
				<li><a href="#">12:30pm - This is longer title for an event, going across 2 lines</a><span>Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Curabitur blandit mollis lacus. Vivamus in erat ut urna cursus vestibulum. Ut varius tincidunt libero. Vivamus elementum semper nisi.</span></li>
				<li><a href="#">5:00pm - Last event of the day</a><span>Objectively scale technically sound web services after user-centric e-services. Progressively target market-driven technology rather than cross functional partnerships.</span></li>
		</div>
	</div>
</div>
// Brand fonts, icons, and colors
@import 'https://fonts.googleapis.com/css?family=Lato';
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
// blues
$navy:#00205c;
$light-blue:#7D8DAC;
// reds
$red:#B30000;
// golds
$gold:#FFCC00;
$orange-gold:#FFB81D;
$light-gold:#FBF0D2;
$mute-gold:#C29E57;
// grays
$medium-gray:#DFD9D5;
$warm-gray:#847870;
// greens
$dark-green:#15514F;
$teal:#248F8B;
$aqua:#0099A9;
$mute-green:#4A7877;
body {
	font-family:Lato, sans-serif;
	background:#666;
}
.datepicker {
	background:#666;
	padding:2em;
	.datepicker-wrapper {
		margin:0 auto;
		max-width:500px;
		-webkit-box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.4);
		-moz-box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.4);
		box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.4);
		.datepicker-header {
			background:$aqua;
			color:#fff;
			font-size:2em;
			text-align:center;
			padding:1em 0;
			border-top-right-radius:3px;
			border-top-left-radius:3px;
		}
		.datepicker-days {
			min-height:300px;
			background:$aqua;
			color:#fff;
			display:flex;
			flex-wrap:wrap;
			justify-content:space-around;
			.datepicker-days-weekday {
				width:100%;
				text-align:center;
				width:14.28571428571429%;
			}
			.datepicker-days-single {
				height:100%;
				width:100%;
				line-height:75px;
				text-align:center;
				align-self:center;
				width:14.28571428571429%;
				&.current {
					font-size:2em;
					font-weight:bold;
					background:$aqua;
					-webkit-filter:brightness(1.15);
					-moz-filter:brightness(1.15);
					filter:brightness(1.15);
				}
				&.visit {
					background:$red;
				}
				&.saturday {
					background:$orange-gold;
				}
				&.discover {
					background:$navy;
				}
			}
		}
		.datepicker-events {
			background:#fff;
			padding:2em;
			min-height:200px;
			border-bottom-right-radius:3px;
			border-bottom-left-radius:3px;
			ul {
				li {
					margin-bottom:1.5em;
					line-height:1.5em;
					a {
						font-size:1.5em;
						text-decoration:none;
						color:#333;
						display:block;
						border-bottom:3px double #ddd;
						padding-bottom:.25em;
						margin-bottom:.25em;
					}
					span {
						display:block;
						font-size:.85em;
					}
				}
			}
		}
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.