The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */
 
body {font-family: Arial Rounded MT Bold;} 
 
* {box-sizing: border-box;}

a { text-decoration: none;}

.calendar {width: 50%; float: left; padding-right: 10px;}

.calendar ul {margin: 0; padding: 0; width: 301px; list-style: none; float: left;}

.calendar li {
  color: #ddd;
  width: 43px; height: 43px;
  float: left;
  position: relative;
}

.calendar li:before {position: absolute; top: -22px; text-align: center; width: 43px; font-size: 11px;}

.calendar li:nth-child(-n+7) {margin-top: 20px;}

.calendar li:nth-child(1):before {content: "sun";}
.calendar li:nth-child(2):before {content: "mon";}
.calendar li:nth-child(3):before {content: "tue";}
.calendar li:nth-child(4):before {content: "wed";}
.calendar li:nth-child(5):before {content: "thur";}
.calendar li:nth-child(6):before {content: "fri";}
.calendar li:nth-child(7):before {content: "sat";}

.calendar li:nth-child(odd) {background: #e6e6e6;}
.calendar li:nth-child(even) {background: #fff;}

.calendar li a, .calendar li span {
  padding-top: 12px; font-size: 14px; text-align: center;
  display: block; height: 43px;
}

.calendar li a {
  position: relative; z-index: 1;
  color: #fff;
  background-image: linear-gradient(top, #B9CC4E 0%, #9EAF3D 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 -1px 0 rgba(0,0,0,.1) inset, 2px 0 0 -1px rgba(0,0,0,.01) inset, -2px 0 0 -1px rgba(0,0,0,.05) inset;
}

.calendar li a.selected, .calendar li a:hover {
  z-index: 999;
  background-image: linear-gradient(top, #6BC9EF 0%, #5FB9DE 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 -1px 0 rgba(0,0,0,.1) inset, 2px 0 0 -1px rgba(0,0,0,.01) inset, -2px 0 0 -1px rgba(0,0,0,.05) inset, 0 1px 0px rgba(0,0,0,.3), 0 1px 5px rgba(0,0,0,.5);
}

dabblet.html

<div class="calendar">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li><a href="#" data-date="">1</a></li>
          <li><a href="#" data-date="">2</a></li>
          <li><a href="#" data-date="">3</a></li>
          <li><span>4</span></li>
          <li><a href="#" data-date="">5</a></li>
          <li><a href="#" data-date="">6</a></li>
          <li><a href="#" data-date="">7</a></li>
          <li><a href="#" data-date="">8</a></li>
          <li><a href="#" data-date="">9</a></li>
          <li><a href="#" data-date="" class="selected">10</a></li>
          <li><span>11</span></li>
          <li><a href="#" data-date="">12</a></li>
          <li><a href="#" data-date="">13</a></li>
          <li><a href="#" data-date="">14</a></li>
          <li><a href="#" data-date="">15</a></li>
          <li><a href="#" data-date="">16</a></li>
          <li><a href="#" data-date="">17</a></li>
          <li><span>18</span></li>
          <li><a href="#" data-date="">19</a></li>
          <li><a href="#" data-date="">20</a></li>
          <li><a href="#" data-date="">21</a></li>
          <li><a href="#" data-date="">22</a></li>
          <li><a href="#" data-date="">23</a></li>
          <li><a href="#" data-date="">24</a></li>
          <li><span>25</span></li>
          <li><a href="#" data-date="">26</a></li>
          <li><a href="#" data-date="">27</a></li>
          <li><a href="#" data-date="">28</a></li>
          <li><a href="#" data-date="">29</a></li>
          <li><a href="#" data-date="">30</a></li>
        </ul>
      </div>

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}