<div id='fullDiv' >
  <ul>
    <li>SUN</li>
    <li>MON</li>
    <li>TUE</li>
    <li>WED</li>
    <li>THUR</li>
    <li>FRI</li>
    <li>SAT</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font: 18px Helvetica;
}

#fullDiv {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden; 
}

ul {
  margin: 0;
  padding: 0;
}

li {
  float: left;
  display: block;
  width: 14.2857%;
  text-align: center;
  list-style-type: none;
}

li:nth-child(n+1):nth-child(-n+7) {
  font-weight: 900;
  color: #e67e22;
}

li:nth-child(n+39), li:nth-child(n+8):nth-child(-n+16) {
  font-weight: 900;
  color: rgba(0,0,0,.3);
}

li:hover:nth-child(n+8):nth-child(-n+38), li:nth-child(17){
  border-radius: 5px;
  background-color: #1abc9c;
  color: #ecf0f1;
}

var winHeight = $(window).height();
var height = ( winHeight * 16.6666 ) / 100;
var lineHeight = height + "px";

$("li").css("line-height", lineHeight);
$("li").css("height", height);