Skip to content

Instantly share code, notes, and snippets.



Created Aug 7, 2013
What would you like to do?
CSS Calendar
* CSS Calendar
.cal {
width: 14.4375rem;
border: solid black;
border-width: 0 1px 1px 0;
.cal > .days > .prev, .cal > .days > .next {
color: grey;
.cal > header {
text-align: center;
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
border-top: 0.0625rem solid;
border-left: 0.0625rem solid;
.cal > header > ul {
list-style-type: none;
padding: 0;
margin: 0;
border-top: 1px solid black;
background: grey;
.cal > header > ul > li {
display: inline-block;
width: 2rem;
.cal > header > ul > li:not(:first-child) {
border-left: .0625rem solid;
.cal > .days > ol {
list-style-type: none;
display: inline;
margin: 0;
padding: 0;
.cal > .days ol > li{
width: 2em;
display: inline-block;
} ol > li {
border-top: .0625rem solid black;
border-left:.0625rem solid black;
<!-- content to be placed inside <body>…</body> -->
<div class="cal">
--><div class="days">
<ol class="prev"><!--
--><ol class="cur"><!--
--><ol class="next"><!--
// alert('Hello world!');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment