Вот пример calendar.html:
Код:
<!DOCTYPE html>
<html>
<head>
<style>
.calendar { border:1px solid #eee; border-radius:5px; background-color:#fff; width:155px; height:176px; box-shadow:0px 0px 15px #eee; padding:2px 2px; }
.calendar .monthname { color:#000; width:100%; text-align:center; font-size:14px; margin:2px 2px; }
.calendar .weekheader { border:1px solid #eee; background-color:#aaa; color:#000; float:left; width:20px; height:20px; text-align:center; font-size:14px; }
.calendar .weekendheader { border:1px solid #eee; background-color:#f00; color:#000; float:left; width:20px; height:20px; text-align:center; font-size:14px; }
.calendar .day { border:1px solid #eee; color:#000; width:20px; height:20px; text-align:center; font-size:14px; float:left; }
.calendar .selday { border:1px solid #ddd; font-weight:bold; background-color:#ddd; color:#f00; width:20px; height:20px; text-align:center; font-size:14px; float:left; text-shadow:0px 0px 2px #f00; }
.calendar .clearfix::after { content:""; clear:both; display:table; }
</style>
</head>
<body>
<br>
<div class="calendar">
<div class="monthname">
Январь
</div>
<div class="clearfix">
<div class="weekheader">Пн</div>
<div class="weekheader">Вт</div>
<div class="weekheader">Ср</div>
<div class="weekheader">Чт</div>
<div class="weekheader">Пт</div>
<div class="weekendheader">Сб</div>
<div class="weekendheader">Вс</div>
</div>
<div class="clearfix">
<div class="day"> </div>
<div class="day"> </div>
<div class="day"> </div>
<div class="day"> </div>
<div class="day"> </div>
<div class="day">1</div>
<div class="day">2</div>
</div>
<div class="clearfix">
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
</div>
<div class="clearfix">
<div class="day">10</div>
<div class="day">11</div>
<div class="day">12</div>
<div class="day">13</div>
<div class="day">14</div>
<div class="day">15</div>
<div class="day">16</div>
</div>
<div class="clearfix">
<div class="day">17</div>
<div class="day">18</div>
<div class="day">19</div>
<div class="day">20</div>
<div class="day">21</div>
<div class="selday">22</div>
<div class="day">23</div>
</div>
<div class="clearfix">
<div class="day">24</div>
<div class="day">25</div>
<div class="day">26</div>
<div class="day">27</div>
<div class="day">28</div>
<div class="day">29</div>
<div class="day">30</div>
</div>
<div class="clearfix">
<div class="day">31</div>
<div class="day"> </div>
<div class="day"> </div>
<div class="day"> </div>
<div class="day"> </div>
<div class="day"> </div>
<div class="day">
</div>
</div>
</div>
</body>
</html>Результат: