Форум

рони · #81 (**permalink**) 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>

Блондинка · #82 (**permalink**) 01.08.2019, 14:06

рони,
сорри, но моих познаний тут явно недостаточно...

рони · #83 (**permalink**) 01.08.2019, 14:36

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

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

Блондинка · #84 (**permalink**) 01.08.2019, 18:00

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

Блондинка · #85 (**permalink**) 01.08.2019, 18:04

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

рони · #86 (**permalink**) 01.08.2019, 18:16

Сообщение от Блондинка

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

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

рони · #87 (**permalink**) 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();

рони · #88 (**permalink**) 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>

Блондинка · #89 (**permalink**) 02.08.2019, 17:49

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

Блондинка · #90 (**permalink**) 02.08.2019, 18:02

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

Форум

Справочник

Discord чат

Курсы javascript