<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>тест-календарь</title>
<style>
table {
border-collapse: separate;
width: 300px;
padding: 1px;
}
table, th, td {
border: 1px solid #c0c0c0;
margin: 1px;
}
td {
text-align: center;
}
.wrapper {
margin-top: 20px;
}
.anotherMonthWeek {
background-color: #ffffff;
color: #00bfff;
}
.anotherMonthWeekEnd {
background-color: #ffffff;
color: #f08080;
}
.currentMonthWeek {
background-color: #fff0f5;
color: #0000cd;
}
.currentMonthWeekEnd {
background-color: #ffb6c1;
color: #dc143c;
}
.currentMonthWeekToday {
background-color: #0000cd;
color: #fff0f5;
}
.currentMonthWeekEndToday {
background-color: #dc143c;
color: #ffb6c1;
}
</style>
</head>
<body>
<form name="formDate">
<label for="inpDate">Укажите дату:</label>
<input type="date" id="inpDate" name="inpDate">
</form>
<div class="wrapper" id="wrapper"></div>
<script>
var wrapper = document.getElementById("wrapper");
var form = document.forms.formDate;
if(wrapper && form){
form.addEventListener('change', function(event){
var date = form.inpDate.valueAsDate;
if(date){
date.setDate(1);
date.setHours(0);
date.setSeconds(0);
date.setMilliseconds(0);
var date2 = new Date(date.getTime());
var month = date.getMonth();
while(date.getDay() != 1){ date.setDate(date.getDate()-1); }
date2.setMonth(date2.getMonth()+1);
date2.setDate(1);
date2.setHours(0);
date2.setSeconds(0);
date2.setMilliseconds(0);
var trs = Math.ceil((date2-date)/1000/3600/24/7)+1;
var table = document.createElement('table');
var i = 0;
var daysPerWeek = 7;
while(i<trs){
var tr = document.createElement('tr');
if(i == 0){
for(var j=0; j<daysPerWeek; j++){
var th = document.createElement('th');
th.innerText = getShortNameOfDay(j);
tr.appendChild(th);
}
table.appendChild(tr);
}
else{
for(var j=0; j<daysPerWeek; j++){
var td = document.createElement('td');
if(date.getMonth() == month){
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "currentMonthWeekEnd";
}
else{
td.className = "currentMonthWeek";
}
}
else {
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "anotherMonthWeekEnd";
}
else{
td.className = "anotherMonthWeek";
}
}
td.innerText = date.getDate();
date.setDate(date.getDate() + 1);
tr.appendChild(td);
table.appendChild(tr);
}
}
i++;
}
wrapper.innerHTML = "";
wrapper.appendChild(table);
}
});
form.inpDate.valueAsDate = new Date();
var event = new Event('change');
form.dispatchEvent(event);
}
function getShortNameOfDay(x){
var name = "xx";
switch(x){
case 0: name = "Пн"; break;
case 1: name = "Вт"; break;
case 2: name = "Ср"; break;
case 3: name = "Чт"; break;
case 4: name = "Пт"; break;
case 5: name = "Сб"; break;
case 6: name = "Вс";
}
return name;
}
</script>
</body>
</html>