Страница 3 из 3 < 12 3
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   помогите доработать календарь (https://javascript.ru/forum/misc/78011-pomogite-dorabotat-kalendar.html)

рони 01.08.2019 02:33
Блондинка,
попробуйте дописать refresh и сегодня самостоятельно ... все примеры у вас есть.

<!DOCTYPE HTML>
<html lang="ru">
<head>
    <meta charset="utf-8">
<title></title>
    <style type="text/css">
body { width: 960px; }
body, select, input { font: 14px serif; }
#calendar { width: 330px; display: inline-block; border: 1px solid #a9a9a9; border-radius: 6px/4px; padding: 5px; }
#navigation_panel { background-color: #c5e3ff; height: 53px; border: 1px solid #a9a9a9; border-radius: 6px/4px; padding: 5px; margin-bottom: 3px; text-align: center; vertical-align: middle; }
#navigation_panel button, #navigation_panel #calendar_year { background-color: #94cdff; color: #00f; font: 14px serif; border: 1px solid #00f; }
#calendar_month { background-color: transparent; color: #00f; font: 14px serif; border: 1px solid #00f; }
#navigation_panel button { height: 24px; vertical-align: middle; }
#background_month { background-color: #94cdff; display: inline-block; }
button.minus { border-radius: 6px 0 0 6px / 4px 0 0 4px; margin-right: -5px; }
button.plus { border-radius: 0 6px 6px 0 / 0 4px 4px 0; margin-left: -5px; }
.month_plus { margin-right: 35px; }
#presently { width: 252px; margin-top: 5px; border-radius: 6px/4px; }
#calendar_month { width: 89px; display: inline-block; }
#calendar_year { width: 54px; display: inline-block; }
select { height: 24px; }
input { height: 20px; border: 1px solid #a9a9a9; display: inline-block; text-align: center; }
#table { width: 100%; height: 222px; padding: 2px; }
#table, td { border: 1px solid #a9a9a9; border-radius: 6px/4px; }
td { margin: 1px; text-align: center; }
td.week-day { height: 33px; }
.prevMonth{
    background-color: #228B22;
}
.curMonth{
    background-color: #FF69B4;
}
.nextMonth{
    background-color: #48D1CC;
}
.curDay{
    background-color: #FFFACD;
}

</style>
</head>
<body>
<div id="calendar">
<div id="navigation_panel">
<button class="month_minus minus">‹</button>
<span id="background_month"><select id="calendar_month"></select></span>
<button class="month_plus plus">›</button>
<button class="year_minus minus">‹</button>
<input type="text" size="4" id="calendar_year">
<button class="year_plus plus">›</button><br>
<button id="presently">сегодня</button>
</div>
<table id="table">
<thead>
<tr><td class="week-day">Пн.</td><td class="week-day">Вт.</td><td class="week-day">Ср.</td><td class="week-day">Чт.</td><td class="week-day">Пт.</td><td class="week-day">Сб.</td><td class="week-day">Вс.</td></tr>
</thead>
<tbody></tbody>
</table>
</div>
    <script>
Date.prototype.reduce = function(callback, value) {
        var year = this.getFullYear();
        var month = this.getMonth();
        var step = new Date(year, month, 1);
        var last = new Date(year, month + 1, 0);
        step.setHours(24 * (0 - (step.getDay() + 6) % 7));
        last.setHours(24 * (6 - (last.getDay() + 6) % 7));
        for (var i = 0; step <= last; i++) {
                value = callback(value, new Date(+step), i, this);
                step.setHours(24);
        }
        return value;
};
var data = new Date();
var selectMonth = document.querySelector('#calendar_month');
var monthNames = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
monthNames.forEach(function(monthName, i) {
    selectMonth.options[i] = new Option(monthName, i)
})
selectMonth.addEventListener("change", function() {
        data.setMonth(this.value);
        createCalendar(data);
    });
var minusMonth = document.querySelector('.month_minus');
minusMonth.addEventListener("click", function() {
        data.setMonth(data.getMonth() - 1);
        createCalendar(data);
    });
var plusMonth = document.querySelector('.month_plus');
plusMonth.addEventListener("click", function() {
        data.setMonth(data.getMonth() + 1);
        createCalendar(data);
    });
var minusYear = document.querySelector('.year_minus');
minusYear.addEventListener("click", function() {
        data.setYear(data.getFullYear() - 1);
        createCalendar(data);
    });
var plusYear = document.querySelector('.year_plus');
plusYear.addEventListener("click", function() {
        data.setYear(data.getFullYear() + 1);
        createCalendar(data);
    });
var inputYear = document.querySelector('#calendar_year');
inputYear.addEventListener('input', function () {
        if (/^\d{4}$/.test(this.value)) {
           data.setYear(this.value);
           createCalendar(data);
        }
    });
// и т.д.
function createCalendar(data)
{
var now = (new Date()).setHours(0,0,0,0);
var year = data.getFullYear();
inputYear.value = year;
var month = data.getMonth();
selectMonth.selectedIndex = month;
var cls = ['prevMonth', 'curMonth', 'nextMonth'], indexCls = 0;
var html = data.reduce(function(value, current, index, source) {
var date = current.getDate();
if(date == 1) indexCls++;
var className = cls[indexCls];
if (+now == +current) { // если дата равна сегодня
   className += ' curDay';
   //
}
if (current.getDay() == 1) value += '<tr>';
        return value + '<td class="'+className+'">' + date;
}, '');
document.querySelector('#table tbody').innerHTML = html;
}
createCalendar(data);
// и т.д



    </script>
</body>
</html>

Блондинка 01.08.2019 14:06
рони,
сорри, но моих познаний тут явно недостаточно...

рони 01.08.2019 14:36
Блондинка,
какие знания? для начала, есть 5 одинаковых функций, строки 80 и 110, вам нужна шестая точно такая же, для текущей даты.
var ... = document.querySelector('....');
....addEventListener("click", function() {
        data = ...;
        createCalendar(data);
    });

Блондинка 01.08.2019 18:00
...
непонятно зачем подсветка сегодн числа в предыдущем месяце, и зачем выделять пред и след месяц разными цветами, и не смогу сама подсветить день недели в текущем месяце...

Блондинка 01.08.2019 18:04
... сама смогу только изменить цвет будни на выходные через :nth-child(n + 6)

рони 01.08.2019 18:16
Цитата:
Сообщение от Блондинка
непонятно зачем подсветка сегодн числа в предыдущем месяце, и зачем выделять пред и след месяц разными цветами,
так уберите если не нужно

рони 01.08.2019 19:14
Блондинка,
Date.prototype.reduce = function(callback, value) {
                var year = this.getFullYear();
                var month = this.getMonth();
                var step = new Date(year, month, 1);
                var last = new Date(year, month + 1, 0);
                step.setHours(24 * (0 - ((step.getDay() + 6) % 7)));
                last.setHours(24 * (6 - ((last.getDay() + 6) % 7)));
                for (var i = 0; step <= last; i++) {
                    value = callback(value, new Date(+step), i, this);
                    step.setHours(24);
                }
                return value;
            };
            var data = new Date();
            var selectMonth = document.querySelector('#calendar_month');
            var monthNames = [
                'Январь',
                'Февраль',
                'Март',
                'Апрель',
                'Май',
                'Июнь',
                'Июль',
                'Август',
                'Сентябрь',
                'Октябрь',
                'Ноябрь',
                'Декабрь',
            ];
            monthNames.forEach(function(monthName, i) {
                selectMonth.options[i] = new Option(monthName, i);
            });
            selectMonth.addEventListener('change', function() {
                data.setMonth(this.value);
                createCalendar(data);
            });
            var minusMonth = document.querySelector('.month_minus');
            minusMonth.addEventListener('click', function() {
                data.setMonth(data.getMonth() - 1);
                createCalendar(data);
            });
            var plusMonth = document.querySelector('.month_plus');
            plusMonth.addEventListener('click', function() {
                data.setMonth(data.getMonth() + 1);
                createCalendar(data);
            });
            var minusYear = document.querySelector('.year_minus');
            minusYear.addEventListener('click', function() {
                data.setYear(data.getFullYear() - 1);
                createCalendar(data);
            });
            var plusYear = document.querySelector('.year_plus');
            plusYear.addEventListener('click', function() {
                data.setYear(data.getFullYear() + 1);
                createCalendar(data);
            });
            var inputYear = document.querySelector('#calendar_year');
            inputYear.addEventListener('input', function() {
                if (/^\d{4}$/.test(this.value)) {
                    data.setYear(this.value);
                    createCalendar(data);
                }
            });
            var currentButton = document.querySelector('#presently');
            currentButton.addEventListener('click', function() {
                data = new Date();
                createCalendar(data);
            });

            var daysTd = document.querySelectorAll('.week-day');
            function createCalendar(data) {
                var now = new Date().setHours(0, 0, 0, 0);
                var year = data.getFullYear();
                inputYear.value = year;
                var month = data.getMonth();
                selectMonth.selectedIndex = month;
                currentButton.classList.remove('hide');
                var dayTd = document.querySelector('.week-day.curDay');
                if (dayTd) dayTd.classList.remove('curDay');

                var cls = ['prevMonth', 'curMonth', 'nextMonth'],
                    indexCls = 0;
                var html = data.reduce(function(value, current, index, source) {
                    var date = current.getDate();
                    if (date == 1) indexCls++;
                    var className = cls[indexCls];

                    if (+now == +current && indexCls == 1) {
                        className += ' curDay';
                        currentButton.classList.add('hide');
                        daysTd[index % 7].classList.add('curDay');
                    }
                    if (current.getDay() == 1) value += '<tr>';
                    return value + '<td class="' + className + '">' + date;
                }, '');
                document.querySelector('#table tbody').innerHTML = html;
            }
            createCalendar(data);
            var timer;
            function refresh() {
                window.clearTimeout(timer);
                var finish = new Date().setHours(24, 0, 0, 0);
                finish -= data;
                timer = window.setTimeout(function() {
                    createCalendar(data);
                    refresh();
                }, finish);
            }

            refresh();

рони 01.08.2019 19:15
Блондинка,
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body {
                width: 960px;
            }
            body,
            select,
            input {
                font: 14px serif;
            }
            #calendar {
                width: 330px;
                display: inline-block;
                border: 1px solid #a9a9a9;
                border-radius: 6px/4px;
                padding: 5px;
            }
            #navigation_panel {
                background-color: #c5e3ff;
                height: 53px;
                border: 1px solid #a9a9a9;
                border-radius: 6px/4px;
                padding: 5px;
                margin-bottom: 3px;
                text-align: center;
                vertical-align: middle;
            }
            #navigation_panel button,
            #navigation_panel #calendar_year {
                background-color: #94cdff;
                color: #00f;
                font: 14px serif;
                border: 1px solid #00f;
            }
            #calendar_month {
                background-color: transparent;
                color: #00f;
                font: 14px serif;
                border: 1px solid #00f;
            }
            #navigation_panel button {
                height: 24px;
                vertical-align: middle;
            }
            #background_month {
                background-color: #94cdff;
                display: inline-block;
            }
            button.minus {
                border-radius: 6px 0 0 6px / 4px 0 0 4px;
                margin-right: -5px;
            }
            button.plus {
                border-radius: 0 6px 6px 0 / 0 4px 4px 0;
                margin-left: -5px;
            }
            .month_plus {
                margin-right: 35px;
            }
            #presently {
                width: 252px;
                margin-top: 5px;
                border-radius: 6px/4px;
            }
            #calendar_month {
                width: 89px;
                display: inline-block;
            }
            #calendar_year {
                width: 54px;
                display: inline-block;
            }
            select {
                height: 24px;
            }
            input {
                height: 20px;
                border: 1px solid #a9a9a9;
                display: inline-block;
                text-align: center;
            }
            #table {
                width: 100%;
                height: 222px;
                padding: 2px;
            }
            #table,
            td {
                border: 1px solid #a9a9a9;
                border-radius: 6px/4px;
            }
            td {
                margin: 1px;
                text-align: center;
            }
            td.week-day {
                height: 33px;
            }
            .prevMonth {
                opacity: 0.4;
            }
            .curMonth {
                background-color: #ff69b4;
            }
            .nextMonth {
                opacity: 0.4;
            }
            .curDay {
                background-color: #fffacd;
            }
            #presently.hide {
                display: none;
            }
            .week-day {
                background-color: #c2d6ff;
                color: #0069ff;
            }
            .week-day.curDay {
                border: 1px solid #285fcd;
                background-color: #6b9cff;
                color: #e6f5ff;
            }
            .week-day:nth-child(n + 6) {
                background-color: #ffb4d2;
                color: #b92346;
            }
            .week-day.curDay:nth-child(n + 6) {
                background-color: #ff389c;
                color: #ffed85;
            }
            #table tbody td {
                background-color: #def1ff;
                color: #0091ff;
            }
            #table tbody td:nth-child(n + 6) {
                background-color: #ffc3d7;
                color: #dc143c;
            }
            #table tbody td.curMonth.curDay {
                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;
            }
            #table tbody td.curMonth.curDay:nth-child(n + 6) {
                background-color: #ffc3d7;
                border: 1px solid #ff69b4;
                text-shadow: 1px 1px #f00, -1px 1px #f00, 1px -1px #f00, -1px -1px #f00,
                    1px 0 #f00, 0 1px #f00, -1px 0 #f00, 0 -1px #f00;
            }
        </style>
    </head>
    <body>
        <div id="calendar">
            <div id="navigation_panel">
                <button class="month_minus minus">‹</button>
                <span id="background_month"><select id="calendar_month"></select></span>
                <button class="month_plus plus">›</button>
                <button class="year_minus minus">‹</button>
                <input type="text" size="4" id="calendar_year" />
                <button class="year_plus plus">›</button><br />
                <button id="presently">сегодня</button>
            </div>
            <table id="table">
                <thead>
                    <tr>
                        <td class="week-day">Пн.</td>
                        <td class="week-day">Вт.</td>
                        <td class="week-day">Ср.</td>
                        <td class="week-day">Чт.</td>
                        <td class="week-day">Пт.</td>
                        <td class="week-day">Сб.</td>
                        <td class="week-day">Вс.</td>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <script>
//сюда добавить скрипт из поста выше
        </script>
    </body>
</html>

Блондинка 02.08.2019 17:49
рони,
вот сейчас всё супер, всё работает как надо

Блондинка 02.08.2019 18:02
народ, возник вопрос скорее относящиеся к css, почему свойство vertical-align: middle; не срабатывает в 113 посте, строки 22-30, по идее выпадающий список и поле ввода должны по центру вертикали когда кнопка сегодня скрыта...

Malleys 02.08.2019 20:14


Цитата:
Сообщение от Блондинка
почему свойство vertical-align: middle; не срабатывает в 113 посте
Работает, просто оно делает не то, что ты думаешь!

Цитата:
Сообщение от Блондинка
выпадающий список и поле ввода должны по центру вертикали когда кнопка сегодня скрыта
И что это за пляска смерти интерфейса ?

Блондинка, хочешь пляску интерфейса, добавь...

#navigation_panel {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

#presently {
	flex: 0 0 100%;
}


На всякий случай тот же самый код, но с префиксами...
#navigation_panel {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	        align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	        justify-content: center;
	-webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
}

#presently {
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 100%;
	        flex: 0 0 100%;
}

Блондинка 02.08.2019 22:13
Цитата:
Сообщение от Malleys
Работает, просто оно делает не то, что ты думаешь!
а можно про это чуть подробнее? что именно оно делает?

думаю что не так часто будут пользоваться календарём, чтобы эта пляска бросилась в глаза, а когда просматривается основной контент страницы больше будет бросаться в глаза то что элементы управления не выравнены По вертикали и снизу много пустого места... думаю что так будет лучше смотреться чем оставить пустое пространство...

Блондинка 04.08.2019 02:10
попробую сформулировать вопрос по другому, почему когда я применила свойство vertical-align не получила ожидаемый результат? если можно ссылки, где можно найти ответ на этот вопрос...

Malleys 05.08.2019 01:36
Цитата:
Сообщение от Блондинка
а можно про это чуть подробнее? что именно оно делает?
Удивительно... поискав на русском языке, тут же получаешь массу объяснении, например, такое https://developer.mozilla.org/ru/doc...vertical-align
Также посмотрите наглядный пример, как vertical-align влияет на элемент Блондинка...
<code>
	vertical-align: <select onchange="test.style.verticalAlign = this.value;">
		<optgroup label="alignment-baseline">
			<option>baseline
			<option>text-bottom
			<option>alphabetic
			<option>ideographic
			<option>middle
			<option>central
			<option>mathematical
			<option>text-top
			<option>bottom
			<option>center
			<option>top
		</optgroup>
		<optgroup label="baseline-shift">
			<option>-20px
			<option>20px
			<option>-150%
			<option>150%
			<option>sub
			<option>super
		</optgroup>
	</select>
</code>
<p><span>А</span> <span id="test">Блондинка</span> <span>Б</span></p>

<style>
	
code, p, span {
	border: solid #ff1493;
	display: inline-block;
}
	
code {
	padding: 0.5em;
}
	
p {
	font: 400% sans-serif;
}
	
	p > span {
		display: inline-block;
		font-size: 60%;
	}
	
#test {
	border: solid #ffd700;
	font-weight: bold;
	font-size: 100%;
}

select {
	font: inherit;
}
</style>

Блондинка 05.08.2019 14:31
Malleys,
всё это понятно и знакомо, и исходя из этого по идее элементы управления должны были располагаться по середине блока

Блондинка 23.09.2019 21:21
Malleys,
скорее всего ты прав, эта „пляска интерфейса “ скорее всё портит, возникает вопрос как при текущем месяце кнопку "сегодня" заменить на див в котором вывести часы/минуты/секунды,,а при просмотре др месяцев этот див становился кнопкой с текстом "сегодня"?

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      body {
        width: 360px;
      }
      body,
      select,
      input {
        font: 14px serif;
      }
      #calendar {
        width: 330px;
        display: inline-block;
        border: 1px solid #a9a9a9;
        border-radius: 6px/4px;
        padding: 5px;
      }
      #navigation_panel {
        background-color: hsl(207, 100%, 92%);
        height: 53px;
        border: 1px solid #a9a9a9;
        border-radius: 6px/4px;
        padding: 5px;
        margin-bottom: 3px;
        text-align: center;
        vertical-align: middle;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      }
      #navigation_panel button,
      #navigation_panel #calendar_year {
        background-color: hsl(207, 100%, 85%);
        color: hsl(207, 100%, 35%);
        font: 14px serif;
        border: 1px solid hsl(207, 100%, 35%);
      }
      #calendar_month {
        background-color: transparent;
        color: hsl(207, 100%, 35%);
        font: 14px serif;
        border: 1px solid hsl(207, 100%, 35%);
      }
      #navigation_panel button {
        height: 24px;
        vertical-align: middle;
      }
      #background_month {
        background-color: hsl(207, 100%, 85%);
        display: inline-block;
      }
      button.minus {
        width: 28px;
        text-align: center;
        border-radius: 12px 0 0 12px / 10px 0 0 10px;
        margin-right: -1px;
      }
      button.plus {
        width: 28px;
        text-align: center;
        border-radius: 0 12px 12px 0 / 0 10px 10px 0;
        margin-left: -1px;
      }
      .month_plus {
        margin-right: 35px;
        margin-left: px;
      }
      #presently {
        width: 288px;
        margin-top: 5px;
        border-radius: 12px/10px;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 288px;
        flex: 0 0 288px;
      }
      #calendar_month {
        width: 89px;
        display: inline-block;
      }
      #calendar_year {
        width: 54px;
        display: inline-block;
      }
      select {
        height: 24px;
      }
      input {
        height: 20px;
        border: 1px solid #a9a9a9;
        display: inline-block;
        text-align: center;
      }
      #table {
        font: sans-serif;
        width: 100%;
        height: 222px;
        padding: 2px;
      }
      #table,
      td {
        border: 1px solid #a9a9a9;
        border-radius: 6px/4px;
      }
      td {
        margin: 1px;
        text-align: center;
      }
      td.week-day {
        height: 33px;
      }
      .prevMonth {
        opacity: 0.5;
      }
      .curMonth {
        background-color: #ff69b4;
      }
      .nextMonth {
        opacity: 0.4;
      }
      .nextMonth:nth-child(n + 6) {
      background-color: #ffebf5;
      }
      .curDay {
        background-color: #fffacd;
      }
      #presently.hide {
        display: none;
      }
      .week-day {
        background-color: #c2d6ff;
        color: #0069ff;
      }
      .week-day.curDay {
        border: 1px solid #285fcd;
        background-color: #6b9cff;
        color: #e6f5ff;
        font-weight: bold;
      }
      .week-day:nth-child(n + 6) {
        background-color: #ffcae3;
        color: #ff0075;
      }
      .week-day.curDay:nth-child(n + 6) {
        border: 1px solid #ff0075;
        background-color: #ff97c8;
        color: #fff8fc;
        text-shadow:
        1px 1px #ff0075,
        1px -1px #ff0075,
        -1px 1px #ff0075,
        -1px -1px #ff0075,
        1px 0 #ff0075,
        -1px 0 #ff0075,
        0 1px #ff0075,
        0 -1px #ff0075;
      }
      #table tbody td {
        background-color: #def1ff;
        color: #0091ff;
      }
      #table tbody td:nth-child(n + 6) {
        background-color: #ffdced;
        color: #ff0075;
      }
      #table tbody td.curMonth.curDay {
        background-color: #c2d6ff;
        border: 1px solid hsl(207, 100%, 35%);
        font-weight: bold;
        color: #fff;
        text-shadow: 1px 1px hsl(207, 100%, 35%), -1px 1px hsl(207, 100%, 35%), 1px -1px hsl(207, 100%, 35%), -1px -1px hsl(207, 100%, 35%),
          1px 0 hsl(207, 100%, 35%), 0 1px hsl(207, 100%, 35%), -1px 0 hsl(207, 100%, 35%), 0 -1px hsl(207, 100%, 35%);
      }
      #table tbody td.curMonth.curDay:nth-child(n + 6) {
        background-color: #ffbadb;
        border: 1px solid #ff0075;
        
        text-shadow:
        1px 1px #ff0075,
        1px -1px #ff0075,
        -1px 1px #ff0075,
        -1px -1px #ff0075,
        1px 0 #ff0075,
        -1px 0 #ff0075,
        0 1px #ff0075,
        0 -1px #ff0075;
      }
    </style>
  </head>
  <body>
    <div id="calendar">
      <div id="navigation_panel">
        <button class="month_minus minus">‹</button>
        <span id="background_month"><select id="calendar_month"></select></span>
        <button class="month_plus plus">›</button>
        <button class="year_minus minus">‹</button>
        <input type="text" size="4" id="calendar_year" />
        <button class="year_plus plus">›</button><br />
        <button id="presently">сегодня</button>
      </div>
      <table id="table">
        <thead>
          <tr>
            <td class="week-day">Пн.</td>
            <td class="week-day">Вт.</td>
            <td class="week-day">Ср.</td>
            <td class="week-day">Чт.</td>
            <td class="week-day">Пт.</td>
            <td class="week-day">Сб.</td>
            <td class="week-day">Вс.</td>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <script>
Date.prototype.reduce = function(callback, value) {
  var year = this.getFullYear();
  var month = this.getMonth();
  var step = new Date(year, month, 1);
  var last = new Date(year, month + 1, 0);
  step.setHours(24 * (0 - ((step.getDay() + 6) % 7)));
  last.setHours(24 * (6 - ((last.getDay() + 6) % 7)));
  for (var i = 0; step <= last; i++) {
    value = callback(value, new Date(+step), i, this);
    step.setHours(24);
  }
  return value;
};
var data = new Date();
var selectMonth = document.querySelector('#calendar_month');
var monthNames = [
  'Январь',
  'Февраль',
  'Март',
  'Апрель',
  'Май',
  'Июнь',
  'Июль',
  'Август',
  'Сентябрь',
  'Октябрь',
  'Ноябрь',
  'Декабрь',
];
monthNames.forEach(function(monthName, i) {
  selectMonth.options[i] = new Option(monthName, i);
});
selectMonth.addEventListener('change', function() {
  data.setMonth(this.value);
  createCalendar(data);
});
var minusMonth = document.querySelector('.month_minus');
minusMonth.addEventListener('click', function() {
  data.setMonth(data.getMonth() - 1);
  createCalendar(data);
});
var plusMonth = document.querySelector('.month_plus');
plusMonth.addEventListener('click', function() {
  data.setMonth(data.getMonth() + 1);
  createCalendar(data);
});
var minusYear = document.querySelector('.year_minus');
minusYear.addEventListener('click', function() {
  data.setYear(data.getFullYear() - 1);
  createCalendar(data);
});
var plusYear = document.querySelector('.year_plus');
plusYear.addEventListener('click', function() {
  data.setYear(data.getFullYear() + 1);
  createCalendar(data);
});
var inputYear = document.querySelector('#calendar_year');
inputYear.addEventListener('input', function() {
  if (/^\d{4}$/.test(this.value)) {
    data.setYear(this.value);
    createCalendar(data);
  }
});
var currentButton = document.querySelector('#presently');
currentButton.addEventListener('click', function() {
  data = new Date();
  createCalendar(data);
});

var daysTd = document.querySelectorAll('.week-day');
function createCalendar(data) {
  var now = new Date().setHours(0, 0, 0, 0);
  var year = data.getFullYear();
  inputYear.value = year;
  var month = data.getMonth();
  selectMonth.selectedIndex = month;
  currentButton.classList.remove('hide');
  var dayTd = document.querySelector('.week-day.curDay');
  if (dayTd) dayTd.classList.remove('curDay');

  var cls = ['prevMonth', 'curMonth', 'nextMonth'],
    indexCls = 0;
  var html = data.reduce(function(value, current, index, source) {
    var date = current.getDate();
    if (date == 1) indexCls++;
    var className = cls[indexCls];

    if (+now == +current && indexCls == 1) {
      className += ' curDay';
      currentButton.classList.add('hide');
      daysTd[index % 7].classList.add('curDay');
    }
    if (current.getDay() == 1) value += '<tr>';
    return value + '<td class="' + className + '">' + date;
  }, '');
  document.querySelector('#table tbody').innerHTML = html;
}
createCalendar(data);
var timer;
function refresh() {
  window.clearTimeout(timer);
  var finish = new Date().setHours(24, 0, 0, 0);
  finish -= data;
  timer = window.setTimeout(function() {
    createCalendar(data);
    refresh();
  }, finish);
}

refresh();
    </script>
  </body>
</html>


Часовой пояс GMT +3, время: 07:22.
Страница 3 из 3 < 12 3
Показывать 40 сообщений этой темы на одной странице