<header>  
    <div id="backmonth"></div>
    <h1 id="month">January</h1>
    <div id="forwardmonth"></div>
</header>
  
  <div id="container">
    <ul>
      <li class="dayofweek" id="monday" href="#">Mon</li>
      <li class="dayofweek" id="tuesday" href="#">Tues</li>
      <li class="dayofweek" id="wednesday" href="#">Wed</li>
      <li class="dayofweek" id="thursday" href="#">Thur</li>
      <li class="dayofweek" id="friday" href="#">Fri</li>
      <li class="dayofweek" id="saturday" href="#">Sat</li>
      <li class="dayofweek" id="sunday" href="#">Sun</li>
      <li class="block" id="blockone" href="#">1</li>
      <li class="block" id="blocktwo" href="#">2</li>
      <li class="block" id="blockthree" href="#">3</li>
      <li class="block" id="blockfour" href="#">4</li>
      <li class="block" id="blockfive" href="#">5</li>
      <li class="weekend" id="blocksix" href="#">6</li>
      <li class="weekend" id="blockseven" href="#">7</li>
      <li class="block" id="blockeight" href="#">8</li>
      <li class="block" id="blocknine" href="#">9</li>
      <li class="block" id="blockten" href="#">10</li>
      <li class="block" id="blockeleven" href="#">11</li>
      <li class="block" id="blocktwelve" href="#">12</li>
      <li class="weekend" id="blockthirteen" href="#">13</li>
      <li class="weekend" id="blockfourteen" href="#">14</li>
      <li class="block" id="blockfifteen" href="#">15</li>
      <li class="block" id="blocksixteen" href="#">16</li>
      <li class="block" id="blockseventeen" href="#">17</li>
      <li class="block" id="blockeighteen" href="#">18</li>
      <li class="block" id="blocknineteen" href="#">19</li>
      <li class="weekend" id="blocktwenty" href="#">20</li>
      <li class="weekend" id="blocktwentyone" href="#">21</li>
      <li class="block" id="blocktwentytwo" href="#">22</li>
      <li class="block" id="blocktwentythree" href="#">23</li>
      <li class="block" id="blocktwentyfour" href="#">24</li>
      <li class="block" id="blocktwentyfive" href="#">25</li>
      <li class="block" id="blocktwentysix" href="#">26</li>
      <li class="weekend" id="blocktwentyseven" href="#">27</li>
      <li class="weekend" id="blocktwentyeight" href="#">28</li>
      <li class="block" id="blocktwentynine" href="#">29</li>
      <li class="block" id="blockthirty" href="#">30</li>
      <li class="block" id="blockthirtyone" href="#">31</li>
      <li class="block" id="blockthirtytwo" href="#">1</li>
      <li class="block" id="blockthirtythree" href="#">2</li>
      <li class="weekend" id="blockthirtyfour" href="#">3</li>
      <li class="weekend" id="blockthirtyfive" href="#">4</li>
    </ul>
  </div>
@import "compass/css3";

$primary: #83befc;
$secondary: #fff;
$tertiary: #9cceff;
$quaternary: #b0dbff;
$quinary: #4ba2fa;
$inactive: #bfbfbf;

* {user-select: none;}

header {
  text-align: center;
  color: $primary;
  font: 30px Calibri Light, sans-serif;
  cursor: default;
  margin-left: auto;
  margin-right: auto;
  animation:fade 1s ease both;
}

#month {
  width: 500px;
  display: inline-block;
  transition: 0.3s;}
#month:hover {color: $quinary;}
#month:active {color: $secondary;}

#backmonth {
  color: $quaternary;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 20px solid;
  display: inline-block;
  cursor: pointer;
  transition: 0.3s;}
#backmonth:hover {color: $quinary;}
#backmonth:active {color: $secondary;}

#forwardmonth {
  color: $quaternary;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid;
  display: inline-block;
  cursor: pointer;
  transition: 0.3s;}
#forwardmonth:hover {color: $quinary;}
#forwardmonth:active {color: $secondary;}

.dayofweek {
  float: left;
  font: 35px Calibri Light, sans-serif;
  line-height: 88px;
  cursor: default;
}

#container {
  width: 630px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  animation:fade 1s 0.5s ease both;
}

li {
  background: $primary;
  color: $secondary;
  float: left;
  border: 1px solid;
  width: 88px;
  height: 88px;
  font: 25px Calibri Light, sans-serif;
  text-align: center;
  line-height: 88px;
  cursor: pointer;}
li:hover {background: $quaternary;}

.selected {background: $quinary}

.weekend {background: $tertiary;}

#blockthirtytwo {background: $inactive; cursor: default;}
#blockthirtythree {background: $inactive; cursor: default;}
#blockthirtyfour {background: $inactive; cursor: default;}
#blockthirtyfive {background: $inactive; cursor: default;}

#monday{background: $quinary;}
#tuesday{background: $quinary;}
#wednesday{background: $quinary;}
#thursday{background: $quinary;}
#friday{background: $quinary;}
#saturday{background: $quinary;}
#sunday{background: $quinary;}

@keyframes fade {0% {opacity: 0; transform: translateY(-20px);}}
View Compiled
$(document).ready(function () {
  $('#forwardmonth').click(function () {
    var month = $('header').find('h1').text();
    if (month == ('January')){$('#month').html('February');}
    else if (month == ('February')){$('#month').html('March');}
    else if (month == ('March')){$('#month').html('April');}
    else if (month == ('April')){$('#month').html('May');}
    else if (month == ('May')){$('#month').html('June');}
    else if (month == ('June')){$('#month').html('July');}
    else if (month == ('July')){$('#month').html('August');}
    else if (month == ('August')){$('#month').html('September');}
    else if (month == ('September')){$('#month').html('October');}
    else if (month == ('October')){$('#month').html('November');}
    else if (month == ('November')){$('#month').html('December');}
  });
  
    $('#backmonth').click(function () {
    var month = $('header').find('h1').text();
    if (month == ('December')){$('#month').html('November');}
    else if (month == ('November')){$('#month').html('October');}
    else if (month == ('October')){$('#month').html('September');}
    else if (month == ('September')){$('#month').html('August');}
    else if (month == ('August')){$('#month').html('July');}
    else if (month == ('July')){$('#month').html('June');}
    else if (month == ('June')){$('#month').html('May');}
    else if (month == ('May')){$('#month').html('April');}
    else if (month == ('April')){$('#month').html('March');}
    else if (month == ('March')){$('#month').html('February');}
    else if (month == ('February')){$('#month').html('January');}
  });
});



      //Change caldendar dates accordingly
      
      //var firstday = 1;
      //var lastday = 31;
      //var countdown = 1;
      
      //if (month == ('January')){firstday = 1; lastday = 31;}
      
        //if (firstday == 1) {
      //$( "li" ).each(function()
            //{
    //if (countdown == 1){$(this).toggleClass("inactive");}
            //});
        //}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js