<head>
<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>
</head>
<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>
</div>
</body>
<body>
<div id="calendar_year">
<div id="navigation_panel">
Календарь на
<button class="year_minus">◀</button>
<input id="year_input" type="number" size="4" value=""/>
<button class="year_plus">▶</button>
год.
<button class="table_rotate">➘</button>
</div>
<table id="table">
<tr>
<td class="td_month">
<div id="January"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="February"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="March"></div>
<table class="table_month_horiz"></table>
</td>
</tr>
<tr>
<td class="td_month">
<div id="April"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="May"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="June"></div>
<table class="table_month_horiz"></table>
</td>
</tr>
<tr>
<td class="td_month">
<div id="July"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="August"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="September"></div>
<table class="table_month_horiz"></table>
</td>
</tr>
<tr>
<td class="td_month">
<div id="October"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="November"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="December"></div>
<table class="table_month_horiz"></table>
</td>
</tr>
</table>
</div>
</body>
<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_year">календарь на год</span><br>
</div>
<div id="calendar_year">
<div id="navigation_panel"">
Календарь на
<button class="year_minus">◀</button>
<input id="year_input" type="number" size="4" value=""/>
<button class="year_plus">▶</button>
год.
<button class="table_rotate">➘</button>
</div>
<table id="table">
<tr>
<td class="td_month">
<div id="January"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="February"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="March"></div>
<table class="table_month_horiz"></table>
</td>
</tr>
<tr>
<td class="td_month">
<div id="April"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="May"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="June"></div>
<table class="table_month_horiz"></table>
</td>
</tr>
<tr>
<td class="td_month">
<div id="July"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="August"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="September"></div>
<table class="table_month_horiz"></table>
</td>
</tr>
<tr>
<td class="td_month">
<div id="October"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="November"></div>
<table class="table_month_horiz"></table>
</td>
<td class="td_month">
<div id="December"></div>
<table class="table_month_horiz"></table>
</td>
</tr>
</table>
<span id="select_month"> календарь на месяц</span>
</div>
</body>