рони,
насколько я поняла строка 212
var table = createCalendar('wrapper', 2019, 6);
устанавливает июнь 2019 г при загрузке страницы, как исправить на текущий месяц/год? |
Цитата:
смотри строки 129 - 132 пост #53 |
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<style type="text/css">
#wrapper button:after {
content: 'prev';
}
#wrapper button:nth-of-type(2):after {
content: 'next';
}
#wrapper button:nth-of-type(3):after {
content: 'сегодня';
}
#wrapper button:nth-of-type(3){
order: 2;
}
#wrapper button:nth-of-type(2){
order: 3;
}
#wrapper button:nth-of-type(1){
order: 1;
}
#wrapper input {
width: 50px;
height: 18px;
margin-top: -3px;
text-align: center;
}
#wrapper {
width: 320px;
padding: 5px;
margin: 5px;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#wrapper table {
flex: 1 0 100%;
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;
}
.currentMonthWeek {
background-color: #def1ff;
color: #0091ff;
}
.currentMonthWeek:nth-child(n + 6) {
background-color: #ffc3d7;
color: #dc143c;
}
td.currentDay {
background-color: #c2d6ff;
border: 1px solid #00f;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px #00f, -1px 1px #00f, 1px -1px #00f, -1px -1px #00f,
1px 0 #00f, 0 1px #00f, -1px 0 #00f, 0 -1px #00f;
}
td.currentDay:nth-child(n + 6) {
background-color: #ffc3d7;
border: 1px solid #ff69b4;
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;
}
#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;
}
#wrapper th:nth-child(n + 6).currentDay {
background-color: #ff389c;
color: #ffed85;
}
#wrapper button {
flex 0;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
}
</style>
<script src="https://polyfill.io/v3/polyfill.min.js"></script>
</head>
<body>
<div id="wrapper"></div>
<script>
"use strict";
var timer;
function createCalendar(id, year, month) {
var table = document.createElement('table');
var header = document.createElement('tr');
var daysOfWeek = ['пнд', 'втр', 'срд', 'чтв', 'птн', 'сбт', 'вск'];
var monthNames = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
var currentData = new Date();
var currentDay = currentData.getDate();
var currentMonth = currentData.getMonth();
var currentFullYear = currentData.getFullYear();
if(month == void 0) month = currentMonth + 1;
if(year == void 0) year = currentFullYear;
var data = new Date(year, month, 0);
var daysInMonth = data.getDate();
var indexMonth = data.getMonth();
var yearFull = data.getFullYear();
var selectHtml = monthNames.reduce(function (html, nameMonth, i) {
return html += "<option value=".concat(i, " ").concat(indexMonth == i ? 'selected' : '', ">").concat(nameMonth);
}, "<select>");
selectHtml += "<input value=".concat(yearFull, ">");
table.insertAdjacentHTML('beforeend', "<tr><th colspan='7'>".concat(selectHtml, "</th></tr>"));
for (var _i = 0, _daysOfWeek = daysOfWeek; _i < _daysOfWeek.length; _i++) {
var _day = _daysOfWeek[_i];
header.insertAdjacentHTML('beforeend', "<th>".concat(_day, "</th>"));
}
table.append(header);
var firstDay = (new Date(yearFull, indexMonth).getDay() + 6) % 7;
var nextDayToAdd = 1 - firstDay;
while (nextDayToAdd <= daysInMonth) {
var week = document.createElement('tr');
for (var i = 0; i < 7; i++) {
var day = document.createElement('td');
var cls = 'currentMonthWeek';
if (nextDayToAdd > 0 && nextDayToAdd <= daysInMonth) {
if (currentMonth == indexMonth && currentFullYear == yearFull && nextDayToAdd == currentDay) {
cls = 'currentDay';
table.querySelectorAll('th')[i + 1].className = 'currentDay';
}
day.innerHTML = nextDayToAdd;
}
cls && day.classList.add(cls);
nextDayToAdd++;
week.append(day);
}
table.append(week);
}
var div = document.getElementById(id);
div.innerHTML = '';
div.append(table);
[-1, 1].forEach(function (n) {
var button = document.createElement('button');
button.addEventListener('click', function () {
return createCalendar(id, year, month + n);
});
div.append(button);
});
table.querySelector('select').addEventListener('change', function () {
createCalendar(id, yearFull, ++this.value);
});
table.querySelector('input').addEventListener('input', function () {
if (/^\d{4}$/.test(this.value)) createCalendar(id, +this.value, indexMonth + 1);
});
if (currentMonth != indexMonth || currentFullYear != yearFull) {
var button = document.createElement('button');
button.addEventListener('click', function () {
return createCalendar(id, currentFullYear, currentMonth + 1);
});
div.append(button);
}
function refresh() {
window.clearTimeout(timer);
var finish = new Date().setHours(24, 0, 0, 0);
finish -= currentData;
timer = window.setTimeout(function () {
createCalendar(id, yearFull, indexMonth + 1);
refresh();
}, finish);
}
refresh();
return table;
}
var table = createCalendar('wrapper'); //без параметров текущий месяц и год, createCalendar('wrapper', 2019, 6); июнь 2019
</script>
</body>
</html>
|
рони,
можно исправить ошибку в работе кнопки назад? перед январём 19г идёт декабрь 18г, но почему показывает текущий месяц, кнопка вперёд работает вроде правильно... |
Блондинка,
исправил prev, проверьте пост# 59 снова. |
Кто может сделать календарь из 59 поста самым удобным?
добавить кнопки вперёд/назад для года скомпоновать все элементы навигации в одном месте, приблизительно как тут заполнить пустые ячейки числами пред/след месяца приблизительно как в 16 посте. |
Цитата:
|
Кто может сделать календарь из 59 поста самым удобным? и сколько будет стоить
добавить кнопки вперёд/назад для года скомпоновать все элементы навигации в одном месте, приблизительно как тут заполнить пустые ячейки числами пред/след месяца приблизительно как в 16 посте. |
Rise,
спасибо, буду знать. |
Попробую подробнее пояснить, почему хотелось бы добавить вышеперечисленное
чтобы посмотреть календарь за какой нибудь давно прошедший год, например период великой отечественной неудобно листать года на 75 лет назад, удобнее ввести с клавиатуры, а чтобы посмотреть этот месяц за следующий год, удобнее кликнуть на кнопку, поэтому считаю что дублирование перемещения по годам с помощью кнопок, а не только поля будет намного удобнее пользоваться календарём. к примеру у вас на кухне стоит мойка и подведена холодная и горячая вода, не очень удобно когда холодная включается на мойке а горячая в другом углу кухни, так и с календарём, непонятно зачем размещать кнопки вперёд назад сегодня ниже таблицы, гораздо удобнее если они будут рядом с выпадающим списком и полем ввода, вариант расположения предложеный мной выглядит достаточно стильно и интуитивно понятно какая кнопка относится к месяцу а какая к году гораздо удобнее когда видно сколько дней в пред месяце, а в случае необходимости скрыть, достаточно минимальных познаний в css. |
| Часовой пояс GMT +3, время: 18:56. |