Нужен календарь
 

Нуже подобный календарь, а только более удобный и функциональный...

<style>
#calendar3 { width: 250px; font: monospace; line-height: 1.2em; font-size: 24px; text-align: center; }
#calendar3 thead tr:last-child { font-size: small; color: #555555; }
#calendar3 tbody td { color: #2c567a; }
#calendar3 tbody td { color: #2c567a; }
#calendar3 tbody td:nth-child(n+6), #calendar3 .holiday { color: #e7285c; }
#calendar3 tbody td.today { outline: 3px solid #ff0000; }
td { background: #e6e6e6; border: 1px solid #b9b9b9; }

</style>
<table id="calendar3">
  <thead>
    <tr><td colspan="4"><select>
<option value="0">Январь</option>
<option value="1">Февраль</option>
<option value="2">Март</option>
<option value="3">Апрель</option>
<option value="4">Май</option>
<option value="5">Июнь</option>
<option value="6">Июль</option>
<option value="7">Август</option>
<option value="8">Сентябрь</option>
<option value="9">Октябрь</option>
<option value="10">Ноябрь</option>
<option value="11">Декабрь</option>
</select><td colspan="3"><input type="number" value="" min="0" max="9999" size="4">
    <tr><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс
  <tbody>
</table>
<script>
function Calendar3(id, year, month) {
var Dlast = new Date(year,month+1,0).getDate(),
    D = new Date(year,month,Dlast),
    DNlast = D.getDay(),
    DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
    calendar = '<tr>',
    m = document.querySelector('#'+id+' option[value="' + D.getMonth() + '"]'),
    g = document.querySelector('#'+id+' input');
if (DNfirst != 0) {
  for(var  i = 1; i < DNfirst; i++) calendar += '<td>';
}else{
  for(var  i = 0; i < 6; i++) calendar += '<td>';
}
for(var  i = 1; i <= Dlast; i++) {
  if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) {
    calendar += '<td class="today">' + i;
  }else{
    if (  // список официальных праздников
        (i == 1 && D.getMonth() == 0 && ((D.getFullYear() > 1897 && D.getFullYear() < 1930) || D.getFullYear() > 1947)) || // Новый год
        (i == 2 && D.getMonth() == 0 && D.getFullYear() > 1992) || // Новый год
        ((i == 3 || i == 4 || i == 5 || i == 6 || i == 8) && D.getMonth() == 0 && D.getFullYear() > 2004) || // Новый год
        (i == 7 && D.getMonth() == 0 && D.getFullYear() > 1990) || // Рождество Христово
        (i == 23 && D.getMonth() == 1 && D.getFullYear() > 2001) || // День защитника Отечества
        (i == 8 && D.getMonth() == 2 && D.getFullYear() > 1965) || // Международный женский день
        (i == 1 && D.getMonth() == 4 && D.getFullYear() > 1917) || // Праздник Весны и Труда
        (i == 9 && D.getMonth() == 4 && D.getFullYear() > 1964) || // День Победы
        (i == 12 && D.getMonth() == 5 && D.getFullYear() > 1990) || // День России (декларации о государственном суверенитете Российской Федерации ознаменовала окончательный Распад СССР)
        (i == 7 && D.getMonth() == 10 && (D.getFullYear() > 1926 && D.getFullYear() < 2005)) || // Октябрьская революция 1917 года
        (i == 8 && D.getMonth() == 10 && (D.getFullYear() > 1926 && D.getFullYear() < 1992)) || // Октябрьская революция 1917 года
        (i == 4 && D.getMonth() == 10 && D.getFullYear() > 2004) // День народного единства, который заменил Октябрьскую революцию 1917 года
       ) {
      calendar += '<td class="holiday">' + i;
    }else{
      calendar += '<td>' + i;
    }
  }
  if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) {
    calendar += '<tr>';
  }
}
for(var  i = DNlast; i < 7; i++) calendar += '<td>&nbsp;';
document.querySelector('#'+id+' tbody').innerHTML = calendar;
g.value = D.getFullYear();
m.selected = true;
if (document.querySelectorAll('#'+id+' tbody tr').length < 6) {
    document.querySelector('#'+id+' tbody').innerHTML += '<tr><td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;';
}
document.querySelector('#'+id+' option[value="' + new Date().getMonth() + '"]').style.color = 'rgb(220, 0, 0)'; // в выпадающем списке выделен текущий месяц
}
Calendar3("calendar3",new Date().getFullYear(),new Date().getMonth());
document.querySelector('#calendar3').onchange = function Kalendar3() {
  Calendar3("calendar3",document.querySelector('#calendar3 input').value,parseFloat(document.querySelector('#calendar3 select').options[document.querySelector('#calendar3 select').selectedIndex].value));
}
</script>

Кто возьмётся написать? или доработать этот?

По поводу календаря, пока есть два вопроса,
возможно ли скрипт разделить на части, чтобы информация о государственных праздниках, рабочих субботах, важных событиях бралась из отдельных файлов, например txt

Насколько сложно реализовать календарь, что бы по клику менялась ориентация, с горизонтальной на вертикальную (пн вт ср расположены в колонку а не в строку) и обратно по клику...

Это не только возможно, но и нужно делать, потому, что праздничный день никуда не денется, но если он выпадает на выходной день, то добавляется день отдыха, такие же переносы производит и правительство постановлением. А в файле ли это хранить или в ином месте, это не важно, все это возлагается на сервер.

Тогда остается один вопрос, насколько сложно реализовать календарь, что бы по клику менялась ориентация, с горизонтальной на вертикальную (пн вт ср расположены в колонку а не в строку) и обратно по клику...

другими словами хочу спросить насколько больше получится кода, в процентах, на 10, 20, 50, 100%?

Просто нерабочие дни (праздничные и выходные) не пойдет?
Как заново написать.

Мне кажется что не вариант, оставить рабочие субботы выделенным красным...

Ну поскольку не нашёл во всём интернете ни одного стоящего варианта, то придётся заморочится новым идеальным во всех смыслах вариантом...

Вы не поняли, нерабочие дни определяться будут числом, а не днем недели. Например, январь 2019 нерабочие дни "1,2,3,4,5,6,7,8,12,13,19,20,26,27".

Rise,
ну как вариант сойдет, но мне бы хотелось разделить этот момент, тоесть праздники отдельно из файла, рабочие субботы отдельно из другого файла, а просто выходные по дню недели...

Какой в этом практический смысл? Итак понятно, что есть суббота и воскресенье, что если какой-то субботы в этом списке нет, то значит она рабочая.

Ок учту этот момент, а смысл в том, что бы праздники подсвечивались отдельно от выходных, другим оттенком красного, тогда будет видно что это не просто выходной, а надо отмечать праздник, и заранее к нему готовится...

Просто я смотрю базу Производственный календарь Правительства РФ, там они дают данные в таком виде, как я описал нерабочими днями, разделить ее конечно можно на две базы праздничные и выходные дни (или рабочие субботы). Просто там она уже в готовом виде, качнул, обновил, а так придется что-то сочинять еще, чтобы на две разделить или вручную 27 лет проштудировать.

Rise,
Ну я как бы живу в Белоруссии, и это должны быть моими проблемами, что именно отмечать в отдельных файлах, просто я продумываю календарь универсальный, который можно будет использовать на любом сайте любой тематики, и что бы можно было изменить его функционал изменяя только стили

Но государственные праздники не вы определяете или вы? Конечно вы можете свои придумать) Без разницы страна какая, если есть возможность данные надо брать с первоисточника, у нас праздники определяет Правительство, у него есть API на эту тему, вот я вам про него и пишу, а что у вас там я не знаю, вы же сразу белорусом не представились)) Тем более у вас в календаре День России написано, это как понимать, вы его тоже празднуете у себя?)
Стили внешний вид меняют, функционал-то здесь причем.

Rise,
Всегда бывают исключения, надо разместить скрипт на сайте предприятия где из-за непрерывного цикла смещены рабочие субботы, на сайте религиозной тематики другие праздники, и тд

Ну к примеру календарь отображает дни предыдущего и будущего месяца, зачем копаться в коде и убирать их? если можно просто изменить цвет текста, на транспорент, ргба, хсла и просто поставить цвет как фона,
на одном сайте нужно добавить селект с выбором числа, на другом сайте не нужно, есть свойство дисплей ноге, в одном случае надо чтобы скрипт выводил праздники-события, в другом случае не надо, убираем опять через дисплей ноне... с этим справиться любой новичок только познающий хтмл

Тут появился вопросик, хочу под календарем чтобы вывалилась информация о празднике/событии, и навигацией по дням, с эстетической так сказать точки зрения, как лучше эту навигацию? или добавить селект с выбором числа, или же лучше чтобы числа были ссылками, для перехода к конкретному числу?

m~r.Nemo,
То что у вас это еще называется "date picker", погуглите по картинкам, посмотрите какие бывают навигации.

Не могу найти образец, где названия дней недели меняется при клике, со строки в столбик...

Rise,
Я тут подумал, ведь в принципе возможно определить страну посетителя, так почему бы не создать отдельные файлы с праздниками разных стран (России, Украины, Белоруссии, Казахстана, и др стран СНГ) и исходя из содержимого этих файлов менять класс ячеек(подсвечивать праздники)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Calendar</title>
</head>
<body>

<style>
.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; }
</style>

<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 = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
calendar.element = document.querySelector('.month');
calendar.element.addEventListener('click', function () { calendar.toggle() });
calendar.update(thisYear, thisMonth);
calendar.render();
</script>

</body>
</html>

Значит структура данных файла должна быть универсальной для этих стран.

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>

селект с выбором числа и по умолчанию скрыты, если нужно выводить в отдельном диве события/праздники тогда вывести на экран этот селект, как то так...

Праздники и события я думаю можно вынести в отдельные файлы "html", для праздников один файл, для рабочих суббот второй, для особых событий третий, и четвертый для простых событий которые в календаре не подсвечиваются а только выводятся текстом в диве внизу,

даты в файлах заносить в виде
хх.хх.хххх-хххх г. чтобы можно было указать начало события, или конец события, ну или промежуток годов когда это событие показывается, например новый год начали отмечать в 193х или 194х году, точно не помню, надо в вики посмотреть, значит указыаем 01.01.19хх-хххх, а до этого года нг выводится как будний день,

Рождество отмечалась до революции, при союзе не отмечалось, а после распада союза опять начали отмечать, значит в файл заносим две записи, 07.01.хххх-1917 и 07.01.1991-хххх, что значит что Рождество подсвечиваться до 1917 и после 1991 года...

как то так мне представляется реализация календаря...

Вопрос такой, может правильнее заносить даты событий в формате число месяц ≤/≥год?
С знаками ≤ и ≥?
И в случае необходимости указывать года через запятую?
Например 01.07.≤1917,≥1991 Рождество

Как правильнее и универсальнее заносить даты событий/праздников в отдельные файлы?

А Рождество всегда было что-ли? А зачем Крещение Руси тогда? А до него что было? Перун и компания? Ну вот! И это только про территорию Руси - Россия, Украина и Беларусь. Вы хоть разберитесь в датах что вы хотите. Претендуете на универсальность, но не понимаете что она намного шире. Поэтому и нет одного календаря js на все случаи жизни, всегда есть какие-то ограничения необходимости. Да и сам объект Date в js не безграничен, от -271821 до 275760 года, Григорианская система исчисления, это вам на всякий случай, а вдруг.

Rise,
Ну в принципе можно добавить минимальное и максимальное значения для поля ввода, типа

<input type="number" size="4" name="year" min="1900" max="2100" value="2019">

ну для большей универсальности можно чуть больше...

<input type="number" size="4" name="year" min="1850" max="2200" value="2019">

но мне кажется это почему то лишним, ведь никто не будет вводить подобные даты чтоб посмотреть календарь за эти года, поэтому я думаю надо смотреть на вещи реально, и ограничиться датами советского периода(максимум 1900г.) ну и на 50-100 лет вперед, так что крещение Руси и более ранние периоды это уже слишком...

Для начала под словом универсальность я подразумевал максимально удобную навигацию, как два выпадающих списка для выбора числа и месяца и поля ввода для года, с добавлеными кнопками < и > плюс скрытая/появляющаяся кнопка сегодня, и кнопка для изменения ориентации календаря(с меняющимся текстом, стрелка вправо при вертикальном расположении дней и вниз при горизонтальном),

Сначала хотелось бы получить календарь см выше, с первым днем недели пн, подсвеченными днями пред/будущ мес, подсвеченными выходными, и подсвеченными сегодняшним днем недели и числом, а подсветка праздников пока только в планах...
просто я интересуюсь как лучше и правильнее это реализовать...

Поскольку календарь предназначен для вывода на страницах сайта, он по умолчанию не может быть универсальным в широком смысле этого слова, а должен быть универсальным для просмотра и навигации именно на сайте, Rise согласись, не очень удобно когда месяц и год выводятся текстом и только две кнопки вперед/назад, удобнее когда подобные кнопки есть и у месяца и у года, неудобно кнопками листать 20-30-50 месяцев или лет, гораздо удобнее когда есть выпадающий список, а ещё удобнее когда возле выпадающего списка есть кнопки вперёд/назад, так придётся делать гораздо меньше телодвижений для просмотра определённого месяца, также выпадающий список не удобен для навигации по годам если надо посмотреть календарь за +-50лет, тут гораздо удобнее поле ввода, но поле ввода не очень удобно для просмотра +-1 год, в этом случае гораздо удобнее кнопки, а когда есть и поле ввода и кнопки это намного удобнее, в одном случае можно воспользоваться кнопками, в другом полем ввода или выпадающим списком, так придётся делать на порядок меньше телодвижений, кнопка "сегодня" как бы мешает и раздражает если она есть всегда, но она намного удобнее для возврата к текущему месяцу, значит (я считаю) её нужно спрятать и показывать только тогда, когда на экране отображается нетекущий месяц, как так я пытаюсь рассуждать...

По поводу подсветки праздников, я хочу вывести всю информацию о празднике(как бы скопировать нужную часть с вики и тд) и пытаюсь разобраться как лучше заносить даты чтобы потом было удобнее, скопировать только часть текста из этих файлов для вставки в Нижний див под сеткой календаря...
как то так...

m~r.Nemo, мне кажется твой пример навигации не очень, дубли всех элементов навигации, много всяких кнопочек, всё это создает не удобство, а сложность, нужно найти какой-то баланс. Совсем не в тему select для чисел, select значит "выбирать", выбирать числа можно прямо из таблицы, в этом как-бы основной смысл их отображения. На поворот таблицы достаточно одной кнопки, работающей по принципу переключателя. Кнопка "сегодня" может быть всегда, если она работает, как указатель на текущее число, а не месяц. Выбор месяца и года бывает что конфигурируется в плагине, как например jquery ui datepicker, там может быть месяц и год текстом, а может быть и выпадающими списками, как вместе, так и по отдельности. Баланс стрелок и списков, как у них в примере, мне кажется как раз оптимальным. Интересно как там работает список лет, всегда показывает плюс минус 10 лет от активного года и этот диапазон динамически изменяется по мере выбора. Так что думаю достаточно будет две кнопки/иконки предыдущий и следующий месяц, два выпадающих списка месяц и год, две кнопки/иконки сегодня и поворот.

Все остальное что нужно, это какая-то штука, которая принимает месяц и год, а затем возвращает массив дат, по сути как в моем примере calendar.update(year, month), только более продвинутая, чтобы каждый элемент массива был не просто число, а некий объект свойств: год, месяц, число, неделя, день недели, еще что-то. Тогда станет совсем всё просто. Навигация будет обращаться к этой штуке при изменении месяца или года, та будет генерировать массив, затем останется отрисовать всё, пройдя циклом по массиву, сверяя данные дат в нем с какими-то другими данными (из объекта в файле например), проставляя нужные классы и тд. Вот здесь пример подобной штуки, как вариант.

Объект в файле - ну это может быть обычный объект js в обычном файле js, но это не точно, но для начала пойдет. Надо просто подумать как его оптимально структурировать, чтобы было удобно сверять данные.

Rise,
Позволь с тобой не согласиться по некоторым пунктам, и так
пункт первый: кнопка поворот, видимо ты не внимательно читал мои посты...
тут я согласен что нужна только одна единственная кнопка работающая как переключатель, я разместил две только для того чтобы показать как она должна меняться, другими словами я просто отобразил как должны меняться свойства border-radius и transform rotate(90deg),а названия дней недели там лишнее, уберу, достаточно одной стрелки...

Пункт второй: кнопка "сегодня" по моему мнению неважно о чём разговор о сегодняшнем числе или месяце, мне представляется что она нужна только для того, чтобы, подчёркиваю в один клик, вернуться к сегодняшнему числу или месяцу, поэтому мне не совсем понятно зачем она нужна при отображении текущего месяца или числа, поэтому я и думаю что её надо скрыть и показывать при любом отклонении от текущего момента...

Пункт третий: навигация по годам,
я пытался искать календари в сети, посмотрел не один десяток вариантов, и пришёл к выводу что навигация на 30-50 лет очень нудна при использовании кнопок, также достаточно муторно с выпадающий списком, сначала на 10 лет, потом второй третий пятый раз? также муторно пользоваться селектом если там будут указаны все года, одним словом я пришёл к выводу что навигация по годам наиболее удобна именно с полем ввода, начал искать, найдя в сети календарь который выложен в первом посте, попробовал поюзать, выяснилось что он оптимален для юзанья на большие периоды (30-50 и более лет), но неудобен при отклонении на год 2-3, из предыдущего опыта юзанья других календарей я пришёл к выводу наиболее оптимальным вариантом будет поле ввода плюс кнопки, на этом варианте и остановился...

Пункт четвёртый: навигация по месяцам, из предыдущего опыты юзанья разных календарей пришёл к выводу, что выпадающий список практически одинаков по удобству юзанья с вариантом где месяц выведен текстом с кнопками, просто раньше мне хотелось скорее из соображений эстетических чтобы был элемент формы, что то типа поля ввода или выпадающий список, но впринципе вывести месяц текстом и сьимитировать внешний вид выпадающего списка через стили элементарно, просто добавлю треугольник-стрелку... "∇"

Пункт пятый: навигация по числам - поскольку это не органайзер, не ежедневник, а именно календарь, мне тоже кажется что выбор дат из сетки будет лучше, плюс уменьшиться ширина календаря что органично повлияет на внешний вид, маленький размер текста с большими отступами смотрится не очень... тут возник вопрос, возможно ли как нибудь реализовать чтобы на разных страницах одного и того же сайта отображался календарь на одних стр с выбором числа, а на других без выбора числа?

рано или поздно прийду к подсветке праздников для разных стран, как лучше поступить если вдруг у кого-то не определило страну, и опредилило ошибочно? Может стоит добавить заранее выпадающий список с выбором страны, чтобы посетитель мог вручную выбрать страну?

m~r.Nemo,
п.2 Указатель может быть на 5-м числе, а сегодня допустим 10-е, кнопка "сегодня" передвинет указатель на сегодня. (указатель это выделение цветом при клике или еще что-то, другими словами это текущее выбранное значение). Иногда сегодня делают какой-то дефолтной датой, необязательно называть кнопку "сегодня", это может быть что-то типа "Home", т.е. календарь может стартовать не обязательно с сегодняшней даты.
п.3 Мне как то не очень ручной ввод, календарь принято листать.
п.4 Имитировать навигацию это не эстетика, а обман пользователя.
п.5 Не понимаю зачем это надо, когда есть числа в таблице.

Про выбор стран: а сайт у вас тоже переведен на все эти языки?

Rise,
п2. поскольку это календарь для сайта, то его предназначение просто показать сетку календаря за текущий месяц, плюс возможность навигации месяцам и годам, по умолчанию стоит текущие месяц и число, если кому-то надо что-то другое(не текущее число), пусть тот и заморачивается, мне же надо просто календарь с текущим числом/месяцем, как названа кнопка "сегодня", "назад", "вернуться" мне кажется не столь важным..
предназначение этой кнопки - в один клик вернуться к исходному отображении..
п.3 для листания календаря есть кнопки возле поля ввода...
п.4 у каждого свой вкус, сказал индус, натягивая ... обезьяну, не буду спорить спорить, ведь у каждого своё мнение, но мне так больше нравится...
п.5 поскольку в данном случае навигация по числам нужна исключительно для просмотра событий за этот день, то на части страниц показывать календарь с дивом под сеткой, на других страницах этот див (с событиями) лишний, и показать только сетку... В посте выше я ведь определился что селект для выбора числа лишний, и нужен выбор числа из сетки, следовательно на одних страницах с навигацией с выбором из сетки, на других стр в сетке просто текст а не кнопки/иконки... Другими словами на страницах открытых для всех выводится просто сетка, а на закрытых(регистрацией) страницах выводим календарь с дивом под сеткой и навигацией по числам...

А причём перевод? если вдруг скрипт ошибочно определил страну(впн и тд) , и русскоговорящий посетитель хочет видеть подсветку праздников своей страны, а не чужой, почему бы не дать ему возможность исправления вручную...

https://www.phpjabbers.com/free-event-calendar-script/

Скачал отсюда календарь. Установил на сайте, только вот текущий день не показывает, и еще при переходе на следующий месяц, где тоже есть события, дни этих событий не высвечиваются у меня на сайте,

Ответ нашел - в комментариях к скрипту

m~r.Nemo,
п.5 Господи, кликабельность ячеек то здесь при чем, ну это как стрелки и списки тоже текстом сделать, чем они вам помешали то? Пусть навигация в холостую работает, если нет данных по событиям. Нет данных, значит пустой див, значит его не видно, значит его как бы нет, вот и всё. Вы понимаете что у вас могут быть месяцы без всяких событий, чем вы будете тогда див наполнять, пустотой? Тем более так и непонятно незарегистрированные пользователи будут видеть выделенные цветом ячейки по событиям, или им блокируется только описание событий, или и то и другое. Как и непонятно нужен ли им тогда будет выбор страны после этого.

ответ нашел в комментариях к скрипту

Вот что придумал, вроде умно:

// events-source.js
var eventsSource = [
    [[2018], [2], [20], ['Event 1 (2018.02.20)', 'Event 2 (2018.02.20)']],
    [[2010, 2020], [7], [15], ['Event 3 (2010-2020.07.15)']],
    [[2015, 2017], [2, 4], [25], ['Event 4 (2015-2017.02-04.25)']],
    [[2006, 2008], [8, 10], [2, 6], ['Event 5 (2006-2008.08-10.02-06)']],
];
// holidays-source.js
var holidaysSource = [
    [[1990, 2000], [2], [5], ['Holiday 1 (1990-2000.02.05)']],
    [[2010, 2020], [2], [5], ['Holiday 1 (2010-2020.02.05)']],
];

а можно узнать подробнее что есть что, описание структуры?

рони, а там в скобках можно догадаться что есть что. В общем массив 4-х массивов, элементы с ? могут быть пропущены:

[[год, от год до?], [месяц, от месяц до?], [число, от число до?], [описание одного события?, описание другого события?, и тд? ]]

Rise,
ok!

рони, чтение структуры (с мемоизацией):

var src = [
    [[2018], [2], [20], ['Event 1 (2018.02.20)', 'Event 2 (2018.02.20)']],
    [[2010, 2020], [7], [15], ['Event 3 (2010-2020.07.15)']],
    [[2015, 2017], [2, 4], [25], ['Event 4 (2015-2017.02-04.25)']],
    [[2006, 2008], [8, 10], [2, 6], ['Event 5 (2006-2008.08-10.02-06)']],
    [[2000, 2001], [5, 6], [10, 11], ['Event 6 (2000-2001.05-06.10-11)']],
];
var db = {
    data: src,
    cache: {},
    read: function (y, m, d) {
        var key = y + '.' + m + '.' + d, event = this.cache[key];
        if (event !== undefined) return event;
        var event = null, data = this.data;
        top: for (var i = 0; i < data.length; i++) {
            var list = data[i];
            for (var j = 0; j <= 3; j++) {
                var item = list[j];
                var date = arguments[j];
                if (j == 3) {
                    event = item;
                    break top;
                } else if (date < item[0] || (item.length == 1 ? date > item[0] : date > item[1])) {
                    break;
                }
            }
        }
        this.cache[key] = event;
        return event;
    }
};

// true dates tests

function D(y, m, d) {
    this.y = y;
    this.m = m;
    this.d = d;
};
var dates = [
    // 2018.02.20
    new D(2018, 02, 20),
    // 2010-2020.07.15
    new D(2010, 07, 15), new D(2020, 07, 15), new D(2011, 07, 15),
    // 2015-2017.02-04.25
    new D(2015, 02, 25), new D(2017, 02, 25), new D(2016, 02, 25),
    new D(2015, 04, 25), new D(2017, 04, 25), new D(2016, 04, 25),
    new D(2015, 03, 25), new D(2017, 03, 25), new D(2016, 03, 25),
    // 2006-2008.08-10.02-06
    new D(2006, 08, 02), new D(2008, 08, 02), new D(2007, 08, 02),
    new D(2006, 10, 02), new D(2008, 10, 02), new D(2007, 10, 02),
    new D(2006, 09, 02), new D(2008, 09, 02), new D(2007, 09, 02),
    new D(2006, 08, 06), new D(2008, 08, 06), new D(2007, 08, 06),
    new D(2006, 10, 06), new D(2008, 10, 06), new D(2007, 10, 06),
    new D(2006, 09, 06), new D(2008, 09, 06), new D(2007, 09, 06),
    new D(2006, 08, 03), new D(2008, 08, 03), new D(2007, 08, 03),
    new D(2006, 10, 03), new D(2008, 10, 03), new D(2007, 10, 03),
    new D(2006, 09, 03), new D(2008, 09, 03), new D(2007, 09, 03),
    // 2000-2001.05-06.10-11
    new D(2000, 05, 10), new D(2001, 05, 10),
    new D(2000, 06, 10), new D(2001, 06, 10),
    new D(2000, 05, 11), new D(2001, 05, 11),
    new D(2000, 06, 11), new D(2001, 06, 11),
];
dates.forEach(function (date, i) {
    var event = db.read(date.y, date.m, date.d);
    console.log(i, date, event);
});
Object.keys(db.cache).forEach(function (date, i) {
    var event = db.cache[date];
    console.log(i, date, event);
});

Rise,
:thanks: