Javascript-форум - Нужен календарь

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Нужен календарь (https://javascript.ru/forum/misc/76357-nuzhen-kalendar.html)

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

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

<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

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

Цитата:

Сообщение от m~r.Nemo

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

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

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

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

Цитата:

Сообщение от Rise (Сообщение 501822)

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

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

Цитата:

Как заново написать.

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

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

Цитата:

Сообщение от Rise (Сообщение 501834)

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

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

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

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

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

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