помогите доработать календарь

[рони]

Блондинка,
какие знания? для начала, есть 5 одинаковых функций, строки 80 и 110, вам нужна шестая точно такая же, для текущей даты.

var ... = document.querySelector('....');
....addEventListener("click", function() {
        data = ...;
        createCalendar(data);
    });

[Блондинка]

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

[Блондинка]

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

[рони]

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

так уберите если не нужно

[рони]

Блондинка,

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();

[рони]

Блондинка,

<!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>

[Блондинка]

рони,
вот сейчас всё супер, всё работает как надо

[Блондинка]

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

[Malleys]

почему свойство 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%;
}

[Блондинка]

Работает, просто оно делает не то, что ты думаешь!

а можно про это чуть подробнее? что именно оно делает?

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