Rise,
Я пересмотрел весь инет, но именно этого функционала не смог найти ни в одном календаре, это именно то, что я очень долго искал...
Если бы неделя начиналась с понедельника, были выделены дни предыдущего/будущего месяца, выходные(сб,вс) и рабочие дни через класс, было бы отлично, а если бы подсвечивались сегодняшнее число и день недели было бы вообще супер...
Навигация мне представляется через селект с выбором месяца и инпут для ввода года, для большего удобства думаю добавить и к селекту и к инпуту кнопки вперёд/назад, и скрытую кнопку "сегодня" которая появляется при навигации, а по умолчанию скрыта...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calendar</title>
<style>
body { margin: 5px; font: 14px; color: #008000; }
#calendar { width: 400px; background: #e6e6e6; }
table.panel { width: 500px; border-left: 1px solid #008000; border-top: 1px solid #008000; border-right: 1px solid #008000; }
td.top-panel { border: 1px solid #008000; height: 12px; line-height: 0px; }
select.select-panel { background: #d7ffd7; color: #008000; font-size: 14px; height: 22px; border: 1px solid #d7ffd7; margin-top: -5px; margin-bottom: -5px; }
input.unput-panel { width: 36px; height: 18px; background: #d7ffd7; color: #008000; font-size: 14px; border: 1px solid #d7ffd7; margin: 0px; }
option { background: #ddeeff; color: #008000; }
td.left { background: #d7ffd7; width: 26px; height: 12px; text-align: center; border: 1px solid #008000; border-top-left-radius: 18px 12px; border-bottom-left-radius: 18px 12px; } td.right { background: #d7ffd7; width: 26px; height: 12px; text-align: center; border: 1px solid #008000; border-top-right-radius: 18px 12px; border-bottom-right-radius: 18px 12px;}
a.left { color: #008000; display: block; vertical-align: middle; }
a.right { color: #008000; display: block; vertical-align: middle; }
td.display_none { height: 24px; background: #d7ffd7; border: 1px solid #008000; border-radius: 18px/12px; }
a.presently { color: #008000; display: block; text-align: center; vertical-align: middle; }
td.td_day_right { height: 20px; border: 1px solid #008000; border-top-left-radius: 5px; border-top-right-radius: 18px 12px; border-bottom-left-radius: 5px; border-bottom-right-radius: 18px 12px; vertical-align: top; }
span.day_norotate { line-height: 0.2; }
span.day_right, span.day_bottom { display: inline-block; font-size: 5px; }
span.text_bottom { -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); display: inline-block; vertical-align: text-top; }
td.td_day_bottom { height: 20px; border: 1px solid #008000; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 12px 18px; border-bottom-right-radius: 12px 18px; }
table.calendar_menu { width: 360px; border: 1px solid #008000; }
td.name_day { border: 1px solid #909090; color: #0000aa; padding: 5px; } /* название дня недели Пн Вт Ср Чт Пт */
td.name_day_today { border: 1px solid #909090; color: #000066; padding: 5px; } /* выделяем сегодняшний день недели */
td.name_day_output { border: 1px solid #909090; color: #c70000; padding: 5px; } /* название дня недели Сб Вс */
td.name_day_output_today { border: 1px solid #909090; color: #a30000; padding: 5px; } /* выделяем сегодняшний день недели Сб Вс */
td.other_month { border: 1px solid #909090; color: #ffa900; padding: 5px; } /* выделяем дни предыдущего и будущего месяца */
td.workday { border: 1px solid #909090; color: #2179ba; padding: 5px; } /* отмечаем будние дни (и рабочие субботы) */
td.workday_today { border: 1px solid #909090; color: #175685; padding: 5px; } /* выделяем сегодняшнее число */
td.event { border: 1px solid #909090; color: #5abe5a; padding: 5px; } /* выделяем событие, день рождения бабушки папы мамы дочки сына и т.д. */
td.event_today { border: 1px solid #909090; color: #428c42; padding: 5px; } /* выделяем сегодняшнее число с событием */
td.event_output { border: 1px solid #909090; color: #e14384; padding: 5px; } /* выделяем событие выпадающее на выходной */
td.output { border: 1px solid #909090; color: #e65151; padding: 5px; } /* выделяем выходные */
td.output_today { border: 1px solid #909090; color: #dc6529; padding: 5px; } /* выделяем сегодняшнее число выходного */
td.holiday { border: 1px solid #909090; color: #ff6562; padding: 5px; } /* выделяем праздники */
td.holiday_today { border: 1px solid #909090; color: #de5451; padding: 5px; } /* выделяем сегодняшнее число праздника */
.month, .month.vert .week, .day { display:inline-block; }
.month.vert .day { display:block; }
.day { border: 1px solid #ccc; width: 30px; line-height: 30px; text-align: center; margin: 1px; }
</style>
</head>
<body>
<div id="calendar">
<table class="panel" cellspacing="3"><tr><td class="left"><a class="left">◁</a></td>
<td class="top-panel"><select class="select-panel"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select></td>
<td class="right"><a class="right">▷</a></td>
<td class="left"><a class="left">◁</a></td><td class="top-panel"><select class="select-panel"><option value="января">января</option><option value="февраля">февраля</option><option value="марта">марта</option><option value="апреля">апреля</option><option value="мая">мая</option><option value="июня">июня</option><option value="июля">июля</option><option value="августа">августа</option><option value="сентября">сентября</option><option value="октября">октября</option><option value="ноября">ноября</option><option value="декабря">декабря</option></select><td class="right"><a class="right">▷</a></td>
<td class="left"><a class="left">◁</a></td><td class="top-panel"><input type="number" step="1" size="4" maxlength="4" name="year" class="unput-panel"/></td><td class="right"><a class="right">▷</a></td>
<td class="td_day_right"><span class="day_norotate">➙</span><span class="day_right"><br/>Пн Вт Ср</span></td><td class="td_day_bottom"><span class="text_bottom">➙</span><span class="day_bottom">Пн<br/>Вт<br/>Ср</span></td></tr>
<tr><td colspan="10" class="display_none"><a class="presently">Сегодня</a></td></tr></table>
<div class="month"></div>
<script>
var calendar = {
update: function (year, month) {
this.days.length = 7;
var stepDay = new Date(year, month, 1);
stepDay.setDate(1 - stepDay.getDay());
var lastDay = new Date(year, month + 1, 0);
lastDay.setDate(lastDay.getDate() + 6 - lastDay.getDay());
while (stepDay <= lastDay) {
this.days.push(stepDay.getDate());
stepDay.setHours(24);
}
},
render: function () {
var html = '';
for (var i = 0, j = 0; i < this.days.length; j = ++i % 7) {
if (j == 0) html += '<div class="week">';
html += '<div class="day">' + this.days[i] + '</div>';
if (j == 6) html += '</div>';
}
this.element.innerHTML = html;
},
toggle: function () {
this.element.classList.toggle('vert');
}
};
var today = new Date, thisYear = today.getFullYear(), thisMonth = today.getMonth();
calendar.days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
calendar.element = document.querySelector('.month');
calendar.element.addEventListener('click', function () { calendar.toggle() });
calendar.update(thisYear, thisMonth);
calendar.render();
</script>
</div>
</body></head>
селект с выбором числа и по умолчанию скрыты, если нужно выводить в отдельном диве события/праздники тогда вывести на экран этот селект, как то так...