<style type="text/css">
div { border: 1px solid #999;
padding: 5px;
margin: 0 0 5px; }
table { border: 1px solid #00f;
padding: 5px; }
td { border: 1px solid #090;
padding: 5px; }
#navigation_panel {
white-space: nowrap;
overflow: scroll;
padding: 5px;
min-width: 400px; }
select { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: bold 14px serif;
padding: 5px; }
button { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: 14px serif;
width: 30px;
height:30px;
border-radius: 12px 12px 0 12px; }
button.month_minus,
button.year_minus,
button.kvartal_minus,
button.year_05_minus
{ background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: 14px serif;
width: 30px;
height:30px;
border-radius: 28px 0 0 28px/18px 0 0 18px; }
button.month_plus,
button.year_plus,
button.kvartal_plus,
button.year_05_plus
{ background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: 14px serif;
width: 30px;
height:30px;
border-radius: 0 28px 28px 0/0 18px 18px 0; }
input { border: 1px solid #099;
width: 60px; }
span { background-color: hsl(190, 100%, 98%);
color: hsl(190, 100%, 40%);
border: 1px solid hsl(190, 100%, 40%);
font: 14px serif;
padding: 5px;
display: inline-block;
}
</style>
<body>
<div id="calendar_month">
<div id="month">
<div id="navigation_panel">
Календарь на месяц<br>
<button class="month_minus">◀</button>
<select class="select_month">
<option value="01">Январь</option>
<option value="02">Февраль</option>
<option value="03">Март</option>
<option value="04">Апрель</option>
<option value="05">Май</option>
<option value="06">Июнь</option>
<option value="07">Июль</option>
<option value="08">Август</option>
<option value="09">Сентябрь</option>
<option value="10">Октябрь</option>
<option value="11">Ноябрь</option>
<option value="12">Декабрь</option>
</select>
<button class="month_plus">▶</button>
<button class="year_minus">◀</button>
<input class="year_input" type="number" value="">
<button class="year_plus">▶</button>
<button class="table_rotate">➘</button>
</div>
<div id="month_name"></div>
<table class=" table_month_horiz"></table>
</div>
<span id="select_05_year">календарь на полугодие</span>
</div>
<div id="calendar_05_year">
<div id="navigation_panel">
Календарь на полугодие<br>
<button class="year_05_minus">◀</button>
<select class="select_05_year">
<option value="Ⅰ">Ⅰ полугодие</option>
<option value="01" disabled>Январь</option>
<option value="02" disabled>Февраль</option>
<option value="03" disabled>Март</option>
<option value="04" disabled>Апрель</option>
<option value="05" disabled>Май</option>
<option value="06" disabled>Июнь</option>
<option value="Ⅱ">Ⅱ полугодие</option>
<option value="07" disabled>Июль</option>
<option value="08" disabled>Август</option>
<option value="09" disabled>Сентябрь</option>
<option value="10" disabled>Октябрь</option>
<option value="11" disabled>Ноябрь</option>
<option value="12" disabled>Декабрь</option>
</select>
<button class="year_05_plus">▶</button>
<button class="year_minus">◀</button>
<input class="year_input" type="number" value="">
<button class="year_plus">▶</button>
<button class="table_rotate">➘</button>
</div>
<table id="table">
<tr>
<td class="td_month">
<div id="month_num_1"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="month_num_2"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="month_3"></div>
<table class="table_month_horiz"></table>
</td>
</tr>
<tr>
<td class="td_month">
<div id="month_num_4"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="month_num_5"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="month_6"></div>
<table class="table_month_horiz"></table>
</td>
</tr>
</table>
<span id="select_month"> календарь на месяц</span>
</div>
</body>