Возникла одна проблема, вчера отложила телефон, экран естественно погас, сегодня включаю тел и в календаре подсвечены вчерашние число и день недели...
Второй момент, если на страницу зайти без малого полночь, пока читаешь текст страницы наступают новые сутки а подсвечены остаются день и число вчерашних суток...
Возможно ли как-то отследить что экран включился, а также наступление 00:00 часов и обновить отдельный блок?
Вот немного поправила стили и html...
<!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>
body {
width: 350px;
}
#calendar {
width: 320px;
padding: 5px;
margin: 5px;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
}
input[type=month] {
width: 100%;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
text-align: center;
}
table {
border-collapse: separate;
width: 100%;
padding: 1px;
}
table, th, td {
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
margin: 1px;
}
th, td {
text-align: center;
}
.wrapper {
margin-top: 5px;
}
.anotherMonthWeek {
background-color: #e6f5ff;
color: #9ed9ff;
border: 1px solid #dcdcdc;
} /* дата будние дни другой месяц */
.anotherMonthWeekEnd {
background-color: #fff5fa;
color: #ffb8db;
border: 1px solid #dcdcdc;
} /* дата выходные дни другой месяц */
.currentMonthWeek {
background-color: #def1ff;
color: #0091ff;
}
.currentMonthWeekEnd {
background-color: #ffc3d7;
color: #dc143c;
} /* дата выходные дни */
.currentDay{
background-color: #c2d6ff;
border: 1px solid #0000ff;
font-weight: bold;
color: #ffffff;
text-shadow: 1px 1px #0000ff, -1px 1px #0000ff, 1px -1px #0000ff, -1px -1px #0000ff, 1px 0px #0000ff, 0px 1px #0000ff, -1px 0px #0000ff, 0px -1px #0000ff;
}
#wrapper th {
background-color: #c2d6ff;
color: #0069ff;
}
#wrapper th:nth-child(n+6){
background-color: #ffb4d2;
color: #b92346;
} /* дни недели выходные дни */
#wrapper th.currentDay {
border: 1px solid #285fcd;
background-color: #6b9cff;
color: #E6f5ff;
text-shadow: 1px 1px #285fcd, -1px 1px #285fcd, 1px -1px #285fcd, -1px -1px #285fcd, 1px 0px #285fcd, 0px 1px #285fcd, -1px 0px #285fcd, 0px -1px #285fcd;
}
#wrapper th:nth-child(n+6).currentDay{
border: 1px solid #b92346;
background-color: #ff73a0;
color: #ffafc8;
text-shadow: 1px 1px #b92346, -1px 1px #b92346, 1px -1px #b92346, -1px -1px #b92346, 1px 0px #b92346, 0px 1px #b92346, -1px 0px #b92346, 0px -1px #b92346;
}
#wrapper td:nth-child(n+6).currentDay{
background-color: #ff85ad;
border: 1px solid #ff0000;
font-weight: bold;
color: #ffffff;
text-shadow: 1px 1px #ff0000, -1px 1px #ff0000, 1px -1px #ff0000, -1px -1px #ff0000, 1px 0px #ff0000, 0px 1px #ff0000, -1px 0px #ff0000, 0px -1px #ff0000;
}
button.current.hide {
display: none;
}
button {
width: 100%;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
}
</style>
</head>
<body>
<div id="calendar">
<form name="formDate">
<input type="month" id="inpDate" name="inpDate">
<button type="button" class="current hide">сегодня</button>
</form>
<div class="wrapper" id="wrapper"></div>
<script>
var wrapper = document.getElementById("wrapper");
var form = document.forms.formDate;
var button = document.querySelector("button.current");
function createTable(event){
var date = form.inpDate.valueAsDate;
if(button) button.classList.remove("hide");
if(date){
var current = new Date();
current.setHours(0,0,0,0);
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";
}
}
if(date.getTime() == current.getTime()) {
td.className = "currentDay";
table.querySelectorAll("th")[j].className = "currentDay";
if(button) button.classList.add("hide");
}
td.innerText = date.getDate();
date.setDate(date.getDate() + 1);
tr.appendChild(td);
table.appendChild(tr);
}
}
i++;
}
wrapper.innerHTML = "";
wrapper.appendChild(table);
}
};
function setToday()
{
form.inpDate.valueAsDate = new Date();
var event = new Event('change');
form.dispatchEvent(event);
}
if(wrapper && form){
form.addEventListener('change', createTable);
button && button.addEventListener("click", setToday);
setToday()
}
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>
</div>
</body>
</html>
