Come fare un calendario

<div class="mydiv">
<div class="month">
 <ul>
 <li class="prev">&#10094;</li>
 <li class="next">&#10095;</li>
 <li>Agosto<br><span style="font-size:18px">2017</span></li>
 </ul>
</div>


<ul class="weekdays">
 <li>Lu</li>
 <li>Ma</li>
 <li>Me</li>
 <li>Gi</li>
 <li>Ve</li>
 <li>Sa</li>
 <li>Do</li>
</ul>

<ul class="days">
 <li></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><span class="active">9</span></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>88</li>
 <li>29</li>
 <li>30</li>
 <li>31</li>
</ul>
</div>

ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}


/* Month header */
.month {
 padding: 70px 25px;
 width: 100%;
 background: #1abc9c;
 text-align: center;
}

/* Month list */
.month ul {
 margin: 0;
 padding: 0;
}

.month ul li {
 color: white;
 font-size: 20px;
 text-transform: uppercase;
 letter-spacing: 3px;
}

/* Previous button inside month header */
.month .prev {
 float: left;
 padding-top: 10px;
}

/* Next button */
.month .next {
 float: right;
 padding-top: 10px;
}

/* Weekdays (Mon-Sun) */
.weekdays {
 margin: 0;
 padding: 10px 0;
 background-color:#ddd;
}

.weekdays li {
 display: inline-block;
 width: 13.6%;
 color: #666;
 text-align: center;
}

/* Days (1-31) */
.days {
 padding: 10px 0;
 background: #eee;
 margin: 0;
}

.days li {
 list-style-type: none;
 display: inline-block;
 width: 13.6%;
 text-align: center;
 margin-bottom: 5px;
 font-size:12px;
 color: #777;
}

/* Highlight the "current" day */
.days li .active {
 padding: 5px;
 background: #1abc9c;
 color: white !important
}

/* impostare larghezza minima pagina web */
body {
min-width: 550px;
}