Записи

<table class="colorborder" width="550">
<tr><td>

<input type="button" id="ver2textfieldYear1" onclick="ver2ClickYeardo()" value="2000" />
<input type="text" id="ver2textfieldYear2" value="2001" size="5" />
<input type="button" id="ver2textfieldYear3" onclick="ver2ClickYearposle()" value="2002" />

</td></tr><tr><td>

<input type="button" onclick="ver2ClickDay()" value="сегодня" /> 
отпуск<input type="text" id="ver2textfieldholyday1" value="14" size="5" />дней 
<input type="button" onclick="ver2ClickHolyDay()" value="результат" />

</td></tr><tr><td>

<table style="text-align: center;" align="center"><tr><td style="border: 1px solid #66aaee;">
 <table align="center"><tr><td><div id="calendarL"></div></td></tr></table>
 <input type="text" id="ver2textfieldholyday2" value="" size="24"/><br>
 месяц: <input type="range" id="ver2monch" max="12" min="1" value="1"
 oninput="{document.getElementById('ver2spanmonch').innerHTML = document.getElementById('ver2monch').value;
 ver2ClickMon(document.getElementById('ver2monch').value-1);}" />
 <span id="ver2spanmonch">1</span>
</td><td style="border: 1px solid #66aaee; text-align: center;"> 
 <table align="center"><tr><td><div id="calendarR"></div></td></tr></table>
 <input type="text" id="ver2textfieldholyday3" value="" size="24"/><br>
 число: <input type="range" id="ver2number" max="31" min="1" value="1"
 oninput="{document.getElementById('ver2spannumber').innerHTML = document.getElementById('ver2number').value;
 ver2ClickNum(document.getElementById('ver2number').value);}" />
 <span id="ver2spannumber">1</span>
</td></tr></table>

</td></tr>
</table>

<script type="text/javascript">
var ver2segodn1 = new Date();
var ver2segodn2 = new Date(ver2segodn1.getFullYear(), ver2segodn1.getMonth(), ver2segodn1.getDate());
var ver2segodn3 = new Date(ver2segodn1.getFullYear(), ver2segodn1.getMonth(), ver2segodn1.getDate());
var ver2tempMon = 0;
var ver2tempNum = 1;
window.onload = function(e){
ver2ClickDay();
}
function ver2ClickYeardo() {
document.getElementById('ver2textfieldYear1').value = eval(document.getElementById('ver2textfieldYear1').value*1 - 1);
document.getElementById('ver2textfieldYear2').value = eval(document.getElementById('ver2textfieldYear2').value*1 - 1);
document.getElementById('ver2textfieldYear3').value = eval(document.getElementById('ver2textfieldYear3').value*1 - 1);
ver2segodn2.setFullYear(document.getElementById('ver2textfieldYear2').value);
createCalendar(calendarL, eval(ver2segodn2.getFullYear()), eval(ver2segodn2.getMonth()+1), eval(ver2segodn2.getDate()));
ver2ClickHolyDay();
}
function ver2ClickYearposle() {
document.getElementById('ver2textfieldYear1').value = eval(document.getElementById('ver2textfieldYear1').value*1 + 1);
document.getElementById('ver2textfieldYear2').value = eval(document.getElementById('ver2textfieldYear2').value*1 + 1);
document.getElementById('ver2textfieldYear3').value = eval(document.getElementById('ver2textfieldYear3').value*1 + 1);
ver2segodn2.setFullYear(document.getElementById('ver2textfieldYear2').value);
createCalendar(calendarL, eval(ver2segodn2.getFullYear()), eval(ver2segodn2.getMonth()+1), eval(ver2segodn2.getDate()));
ver2ClickHolyDay();
}
function ver2ClickMon(ver2fileMon) {
ver2tempMon = ver2fileMon;
ver2segodn2.setMonth(ver2tempMon);
ver2segodn2.setDate(ver2tempNum);
document.getElementById('ver2textfieldholyday2').value =
 ver2segodn2.toLocaleString('ru', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' });
createCalendar(calendarL, eval(ver2segodn2.getFullYear()), eval(ver2segodn2.getMonth()+1), eval(ver2segodn2.getDate()));
ver2ClickHolyDay();
}
function ver2ClickNum(ver2fileNum) {
ver2tempNum = ver2fileNum;
ver2segodn2.setMonth(ver2tempMon);
ver2segodn2.setDate(ver2tempNum);
document.getElementById('ver2textfieldholyday2').value =
 ver2segodn2.toLocaleString('ru', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' });
createCalendar(calendarL, eval(ver2segodn2.getFullYear()), eval(ver2segodn2.getMonth()+1), eval(ver2segodn2.getDate()));
ver2ClickHolyDay();
}
function ver2ClickDay() {
ver2segodn1 = new Date();
document.getElementById('ver2textfieldYear1').value = eval(ver2segodn1.getFullYear()*1-1);
document.getElementById('ver2textfieldYear2').value = ver2segodn1.getFullYear();
document.getElementById('ver2textfieldYear3').value = eval(ver2segodn1.getFullYear()*1+1);
document.getElementById('ver2number').value = ver2segodn1.getDate();
document.getElementById('ver2monch').value = ver2segodn1.getMonth()+1;
document.getElementById('ver2spannumber').innerHTML = ver2segodn1.getDate();
document.getElementById('ver2spanmonch').innerHTML = ver2segodn1.getMonth()+1;
ver2tempMon = eval(ver2segodn1.getMonth());
ver2tempNum = eval(ver2segodn1.getDate());
document.getElementById('ver2textfieldholyday2').value =
 ver2segodn1.toLocaleString('ru', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' });
createCalendar(calendarL, eval(ver2segodn1.getFullYear()), eval(ver2segodn1.getMonth()+1), eval(ver2segodn1.getDate()));
ver2segodn2.setFullYear(ver2segodn1.getFullYear());
ver2segodn2.setMonth(ver2segodn1.getMonth());
ver2segodn2.setDate(ver2segodn1.getDate());
ver2ClickHolyDay();
}
function ver2ClickHolyDay() {
document.getElementById('ver2textfieldholyday2').value =
 ver2segodn2.toLocaleString('ru', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' });
ver2segodn3 = new Date(ver2segodn2.getFullYear(), ver2segodn2.getMonth(), ver2segodn2.getDate()+
eval(document.getElementById('ver2textfieldholyday1').value));
if (ver2segodn3.getDay() === 6) {ver2segodn3.setDate(ver2segodn3.getDate()+2);}; 
if (ver2segodn3.getDay() === 0) {ver2segodn3.setDate(ver2segodn3.getDate()+1);};
if (ver2segodn3.getDate() === 8) {if (ver2segodn3.getMonth() === 2) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 9) {if (ver2segodn3.getMonth() === 4) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 1) {if (ver2segodn3.getMonth() === 4) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 23) {if (ver2segodn3.getMonth() === 1) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 1) {if (ver2segodn3.getMonth() === 0) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 2) {if (ver2segodn3.getMonth() === 0) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 3) {if (ver2segodn3.getMonth() === 0) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 4) {if (ver2segodn3.getMonth() === 0) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 5) {if (ver2segodn3.getMonth() === 0) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 7) {if (ver2segodn3.getMonth() === 0) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 4) {if (ver2segodn3.getMonth() === 10) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 7) {if (ver2segodn3.getMonth() === 10) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 12) {if (ver2segodn3.getMonth() === 5) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 12) {if (ver2segodn3.getMonth() === 11) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDay() === 6) {ver2segodn3.setDate(ver2segodn3.getDate()+2);}; 
if (ver2segodn3.getDay() === 0) {ver2segodn3.setDate(ver2segodn3.getDate()+1);};
if (ver2segodn3.getDate() === 8) {if (ver2segodn3.getMonth() === 2) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 9) {if (ver2segodn3.getMonth() === 4) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 1) {if (ver2segodn3.getMonth() === 4) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 23) {if (ver2segodn3.getMonth() === 1) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 1) {if (ver2segodn3.getMonth() === 0) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 2) {if (ver2segodn3.getMonth() === 0) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 3) {if (ver2segodn3.getMonth() === 0) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 4) {if (ver2segodn3.getMonth() === 0) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 5) {if (ver2segodn3.getMonth() === 0) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 7) {if (ver2segodn3.getMonth() === 0) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 4) {if (ver2segodn3.getMonth() === 10) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 7) {if (ver2segodn3.getMonth() === 10) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 12) {if (ver2segodn3.getMonth() === 5) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDate() === 12) {if (ver2segodn3.getMonth() === 11) {ver2segodn3.setDate(ver2segodn3.getDate()+1);}};
if (ver2segodn3.getDay() === 6) {ver2segodn3.setDate(ver2segodn3.getDate()+2);}; 
if (ver2segodn3.getDay() === 0) {ver2segodn3.setDate(ver2segodn3.getDate()+1);};

document.getElementById('ver2textfieldholyday3').value =
 ver2segodn3.toLocaleString('ru', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' });
createCalendar(calendarR, eval(ver2segodn3.getFullYear()), eval(ver2segodn3.getMonth()+1), eval(ver2segodn3.getDate()));
}
</script> 
<script>
 function createCalendar(ver1elem, ver1year, ver1month, ver1day) {
 let ver1mon = ver1month - 1; // месяцы в JS идут от 0 до 11, а не от 1 до 12
 let ver1data = new Date(ver1year, ver1mon);
 let ver1table = '<table height = "230"><tr><td style="text-align: center;" colspan="7">'+ver1data.toLocaleString('ru', {month: 'long'})+'</td></tr><tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr><tr>';
 // пробелы для первого ряда
 // с понедельника до первого дня месяца
 // * * * 1 2 3 4
 for (let i = 0; i < getDay(ver1data); i++) {
 ver1table += '<td></td>';
 }
 // <td> ячейки календаря с датами
 while (ver1data.getMonth() == ver1mon) {
 ver1table += '<td';
 if (ver1data.getDate() == ver1day) ver1table += ' style="background-color: rgb(51, 204, 255);"';
 if (getDay(ver1data) % 7 == 5) ver1table += ' style="background-color: rgb(255, 204, 204);"';
 if (getDay(ver1data) % 7 == 6) ver1table += ' style="background-color: rgb(255, 204, 204);"';
 
if (ver1data.getDate() === 8) {if (ver1data.getMonth() === 2) { ver1table += ' style="background-color: rgb(255, 204, 204);"';}};
if (ver1data.getDate() === 9) {if (ver1data.getMonth() === 4) { ver1table += ' style="background-color: rgb(255, 204, 204);"';}};
if (ver1data.getDate() === 1) {if (ver1data.getMonth() === 4) { ver1table += ' style="background-color: rgb(255, 204, 204);"';}};
if (ver1data.getDate() === 23) {if (ver1data.getMonth() === 1) { ver1table += ' style="background-color: rgb(255, 204, 204);"';}};
if (ver1data.getDate() === 1) {if (ver1data.getMonth() === 0) { ver1table += ' style="background-color: rgb(255, 204, 204);"';}};
if (ver1data.getDate() === 2) {if (ver1data.getMonth() === 0) { ver1table += ' style="background-color: rgb(255, 204, 204);"';}};
if (ver1data.getDate() === 3) {if (ver1data.getMonth() === 0) { ver1table += ' style="background-color: rgb(255, 204, 204);"';}};
if (ver1data.getDate() === 4) {if (ver1data.getMonth() === 0) { ver1table += ' style="background-color: rgb(255, 204, 204);"';}};
if (ver1data.getDate() === 5) {if (ver1data.getMonth() === 0) { ver1table += ' style="background-color: rgb(255, 204, 204);"';}};
if (ver1data.getDate() === 7) {if (ver1data.getMonth() === 0) { ver1table += ' style="background-color: rgb(255, 204, 204);"';}};
if (ver1data.getDate() === 4) {if (ver1data.getMonth() === 10) { ver1table += ' style="background-color: rgb(255, 204, 204);"';}};
if (ver1data.getDate() === 7) {if (ver1data.getMonth() === 10) { ver1table += ' style="background-color: rgb(255, 204, 204);"';}};
if (ver1data.getDate() === 12) {if (ver1data.getMonth() === 5) { ver1table += ' style="background-color: rgb(255, 204, 204);"';}};
if (ver1data.getDate() === 12) {if (ver1data.getMonth() === 11) { ver1table += ' style="background-color: rgb(255, 204, 204);"';}}; 
 
 ver1table += '>';
 ver1table += ver1data.getDate();
 ver1table += '</td>';
 if (getDay(ver1data) % 7 == 6) { // вс, последний день - перевод строки
 ver1table += '</tr><tr>';
 }
 ver1data.setDate(ver1data.getDate() + 1);
 }
 // добить таблицу пустыми ячейками, если нужно
 // 29 30 31 * * * *
 if (getDay(ver1data) != 0) {
 for (let i = getDay(ver1data); i < 7; i++) {
 ver1table += '<td></td>';
 }
 }
 // закрыть таблицу
 ver1table += '</tr></table>';
 ver1elem.innerHTML = ver1table;
 }

 function getDay(date) { // получить номер дня недели, от 0 (пн) до 6 (вс)
 let day = date.getDay();
 if (day == 0) day = 7; // сделать воскресенье (0) последним днем
 return day - 1;
 }
 createCalendar(calendarL, 2022, 9, 15);
 createCalendar(calendarR, 2022, 10, 16);
 </script>