Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   как объединить три скрипта в один? (https://javascript.ru/forum/misc/82632-kak-obedinit-tri-skripta-v-odin.html)

Блондинка 03.06.2021 12:39
как объединить три скрипта в один?
 
как исправить этот скрипт?

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

как объединить эти три скрипта в один? другими словами, если в html-коде установлен класс вертикальной таблицы то на страницу вывести только вертикальную таблицу, если в html-коде установлен класс горизонтальной таблицы то вывести только горизонтальную таблицу, если в html-коде есть кнопка поворота таблицы, надо на страницу вывести таблицу вертикального календаря и при нажатии кнопки менять таблицу календаря с вертикальной на горизонтальную, и обратно при повторном нажатии на кнопку...

как это сделать? 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #navigation_panel {
            white-space: nowrap;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            padding: 5px 15px;
            margin: 0 0 5px;
        }
        
        input {
            width: 56px;
            display: inline-block;
            text-align: center;
            border: 1px solid hsl(210, 100%, 50%);
        }
        
        .table_rotate {
            border: 1px solid hsl(210, 100%, 50%);
            border-radius: 12px 12px 0 12px;
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        select {
            border: 1px solid hsl(210, 100%, 50%);
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        .table_month_horiz,
        .table_month_vert {
            width: 250px;
            height: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
        }
        
        td {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            text-align: center;
            font: 14px serif;
        }

        #num_year,
        #month_name {
            background-color: hsl(210, 100%, 95%);
            color: hsl(210, 100%, 50%);
            font: bold 18px serif;
            text-align: center;
        }

        #num_year {
            width: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }

        #month {
            display: inline-block;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 8px;
            padding: 5px;
            width: 250px;
        }

        #month_name {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }

        .table_month_vert,
        .table_month_horiz {
            table-layout: fixed;
            width: 100%;
            height: 250px;
            border-spacing: 3px;
        }

        .table_month_horiz tr td:nth-child(1) {
            width: 20%;
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(1) {
        width: 20%;
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_horiz tr td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
        
        .table_month_vert tr:nth-child(1) td.day {
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_vert tr:nth-child(n+2) td.day {
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */

    </style>
</head>

<body>
    <div id="num_year"></div>
    <div id="month">
        <div id="navigation_panel">
        <select id="select_month"></select>
        <input class="year_input" type="number" value="">
        <button class="table_rotate">➘</button>
        </div>
        <div id="month_name"></div> 
        <table class="table_month_horiz"></table>
        <table class="table_month_vert"></table> 
    </div>
    <script>
        var calendar = {
            update: function(year, month) {
                this.year = year;
                this.month = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь', ][month];
                var startDay = new Date(year, month, 1);
                var offsetDay = (startDay.getDay() || 7) - 1;
                startDay.setDate(startDay.getDate() - offsetDay);
                var lastDay = new Date(startDay);
                var days = new Date(year, month + 1, 0).getDate();
                days = Math.ceil((days + offsetDay) / 7) * 7;
                lastDay.setDate(lastDay.getDate() + days);
                this.data = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
                while (startDay < lastDay) {
                    this.data.push(startDay.getDate());
                    startDay.setHours(24);
                }
            },
            render: function(horiz) {
                var html = '';
                if (horiz) {

                    this.element.classList.add("horiz");
                    for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) {
                        if (j == 0) html += '<tr class="week">';
                        html += '<td class="day">' + this.data[i] + '</td>';
                        if (j == 6) html += '</td>';
                    }
                } else {
                    html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
                    for (var i = 0; i < this.data.length; i++) {
                        html[i % 7] += '<td class="day">' + this.data[i];
                    }
                    html = html.join('')
                }

                this.numYear.textContent = this.year;
                this.monthName.textContent = this.month;
                this.element.innerHTML = html;
            },
        };
        var today = new Date(),
            thisYear = today.getFullYear(),
            thisMonth = today.getMonth();
        calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
        calendar.numYear = document.querySelector('#num_year');
        calendar.monthName = document.querySelector('#month_name');
        calendar.element = document.querySelector('.table_month_vert');
        calendar.update(thisYear, thisMonth);
        calendar.render(true);
        calendar.element = document.querySelector('.table_month_horiz');
        calendar.render();
        
        //Запрашивается селектор по тегу select. Добавляются месяца.
        selector = document.querySelector('select');
        month_list = ['Январь', 'Февраль', 'Март', 'Апрель', ' Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
        for (var i = 0; i < month_list.length; i++){
        selector.options[i] = new Option(month_list[i], i);
        }
        selector.selectedIndex = thisMonth;
        
        //Это для того, чтобы менять календарь при изменении месяца и года
        selector.addEventListener('change', load);
        document.querySelector('.year_input').addEventListener('change', load);
        
        
        calendar.element = document.querySelector('.month');
        document.getElementById('month_rotate').addEventListener('click', function() {
        calendar.toggle();
        });
        
        //Вынесена загрузка в отдельную функцию.
        function load(){
        var year = document.getElementById('year_input').value;
        var month = selector.selectedIndex;
        calendar.update(year, month);
        calendar.render();
        }
        //при зыгрузке страницы вызывается тот же обработчик
        document.addEventListener("DOMContentLoaded", ()=>{
        document.querySelector('.year_input').value = thisYear;
        load();
        });
        
    </script>
</body>

</html>

рони 03.06.2021 13:37
Блондинка,

if(calendar.classList.contains(' класс горизонтальной таблицы') calendar.render(true);
else calendar.render();

Блондинка 03.06.2021 14:52
рони,
с час трахалась с кодом, и пустые таблицы :(

рони 03.06.2021 15:05
Блондинка,
напишите свой календарь, в котором вы будите знать, что делает каждая строка.

Блондинка 03.06.2021 15:29
Цитата:
Сообщение от рони
if(calendar.classList.contains(' класс горизонтальной таблицы') calendar.render(true);
else calendar.render();
вместо каких строк это вставить?

рони 03.06.2021 15:52
Цитата:
Сообщение от Блондинка
вместо каких строк это вставить?
вместо каждого calendar.render...
202, 204, 229 ... может где ещё
if(calendar.element.classList.contains(' класс горизонтальной таблицы')) calendar.render(true);
else calendar.render();

Блондинка 03.06.2021 16:39
:( 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #navigation_panel {
            white-space: nowrap;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            padding: 5px 15px;
            margin: 0 0 5px;
        }
        
        input {
            width: 56px;
            display: inline-block;
            text-align: center;
            border: 1px solid hsl(210, 100%, 50%);
        }
        
        .table_rotate {
            border: 1px solid hsl(210, 100%, 50%);
            border-radius: 12px 12px 0 12px;
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        select {
            border: 1px solid hsl(210, 100%, 50%);
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        .table_month_horiz,
        .table_month_vert {
            width: 250px;
            height: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
        }
        
        td {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            text-align: center;
            font: 14px serif;
        }

        #num_year,
        #month_name {
            background-color: hsl(210, 100%, 95%);
            color: hsl(210, 100%, 50%);
            font: bold 18px serif;
            text-align: center;
        }

        #num_year {
            width: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }

        #month {
            display: inline-block;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 8px;
            padding: 5px;
            width: 250px;
        }

        #month_name {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }

        .table_month_vert,
        .table_month_horiz {
            table-layout: fixed;
            width: 100%;
            height: 250px;
            border-spacing: 3px;
        }

        .table_month_horiz tr td:nth-child(1) {
            width: 20%;
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(1) {
        width: 20%;
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_horiz tr td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
        
        .table_month_vert tr:nth-child(1) td.day {
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_vert tr:nth-child(n+2) td.day {
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */

    </style>
</head>

<body>
    <div id="num_year"></div>
    <div id="month">
        <div id="navigation_panel">
        <select id="select_month"></select>
        <input class="year_input" type="number" value="">
        <button class="table_rotate">➘</button>
        </div>
        <div id="month_name"></div> 
        <table class="table_month_horiz"></table>
        <table class="table_month_vert"></table> 
    </div>
    <script>
        var calendar = {
            update: function(year, month) {
                this.year = year;
                this.month = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь', ][month];
                var startDay = new Date(year, month, 1);
                var offsetDay = (startDay.getDay() || 7) - 1;
                startDay.setDate(startDay.getDate() - offsetDay);
                var lastDay = new Date(startDay);
                var days = new Date(year, month + 1, 0).getDate();
                days = Math.ceil((days + offsetDay) / 7) * 7;
                lastDay.setDate(lastDay.getDate() + days);
                this.data = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
                while (startDay < lastDay) {
                    this.data.push(startDay.getDate());
                    startDay.setHours(24);
                }
            },
            render: function(horiz) {
                var html = '';
                if (horiz) {

                    this.element.classList.add("horiz");
                    for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) {
                        if (j == 0) html += '<tr class="week">';
                        html += '<td class="day">' + this.data[i] + '</td>';
                        if (j == 6) html += '</td>';
                    }
                } else {
                    html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
                    for (var i = 0; i < this.data.length; i++) {
                        html[i % 7] += '<td class="day">' + this.data[i];
                    }
                    html = html.join('')
                }

                this.numYear.textContent = this.year;
                this.monthName.textContent = this.month;
                this.element.innerHTML = html;
            },
        };
        var today = new Date(),
            thisYear = today.getFullYear(),
            thisMonth = today.getMonth();
        calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
        calendar.numYear = document.querySelector('#num_year');
        calendar.monthName = document.querySelector('#month_name');
        if(calendar.classList.contains('.table_month_vert') calendar.render(true);
        calendar.update(thisYear, thisMonth);
        else calendar.render();
        if(calendar.classList.contains('table_month_horiz') calendar.render(true);
        else calendar.render();
        
        //Запрашивается селектор по тегу select. Добавляются месяца.
        selector = document.querySelector('select');
        month_list = ['Январь', 'Февраль', 'Март', 'Апрель', ' Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
        for (var i = 0; i < month_list.length; i++){
        selector.options[i] = new Option(month_list[i], i);
        }
        selector.selectedIndex = thisMonth;
        
        //Это для того, чтобы менять календарь при изменении месяца и года
        selector.addEventListener('change', load);
        document.querySelector('.year_input').addEventListener('change', load);
        
        
        calendar.element = document.querySelector('.month');
        document.getElementById('month_rotate').addEventListener('click', function() {
        calendar.toggle();
        });
        
        //Вынесена загрузка в отдельную функцию.
        function load(){
        var year = document.getElementById('year_input').value;
        var month = selector.selectedIndex;
        if(calendar.update(year, month) calendar.render(true);
        else calendar.render();
        }
        //при зыгрузке страницы вызывается тот же обработчик
        document.addEventListener("DOMContentLoaded", ()=>{
        document.querySelector('.year_input').value = thisYear;
        load();
        });
        
    </script>
</body>

</html>

рони 03.06.2021 17:00
Блондинка,
не судьба ...

рони 03.06.2021 17:02
Блондинка,
if(calendar.classList.contains('.table_month_horiz') calendar.render(true);
        else calendar.render();

:-/ 
if(calendar.classList.contains('table_month_horiz')) calendar.render(true);
        else calendar.render();

Блондинка 03.06.2021 17:54
рони,
в 203 строке ведь есть точка... или лишняя, убрать?

Блондинка 03.06.2021 17:56
и с 230 строкой явно что-то не то...

рони 03.06.2021 18:05
Цитата:
Сообщение от Блондинка
в 203 строке ведь есть точка... или лишняя, убрать?
лишняя

Блондинка 03.06.2021 18:16
:( исправила 7 пост, и хрен какие изменения... :(

рони 03.06.2021 18:27
Цитата:
Сообщение от Блондинка
исправила 7 пост,
как был бред, так и остался, может для начала с простого, написать скрипт создания таблицы умножения, чур по форуму и гуглу не искать готового решения, а всё сама, и комментариями каждой строки(можно не каждой).

культ карго

Блондинка 03.06.2021 22:53
Цитата:
Сообщение от рони;537633[URL="https://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D1%80%D0%B3%D0%BE-%D0%BA%D1%83%D0%BB%D1%8C%D1%82"
культ карго[/url]
специально издеваешься?

рони 03.06.2021 23:03
Блондинка,
код лучше разбить на функции, тогда будет проще (надеюсь).
функция получает месяц и год, выдаёт диапазон от и до.
функция получает диапазон и направление, формирует массив строк c ячейками.
функция получает массив строк, выдаёт html;
функция получает html и элемент, выводит html в элемент.
как-то так

Блондинка 03.06.2021 23:21
рони,
помоги если можешь, если тебя это не затруднит...

рони 04.06.2021 00:00
Цитата:
Сообщение от Блондинка
помоги если можешь,
я пытался ))) вариантов 20 календарей уже было за два года, но всё не впрок ...

Блондинка 04.06.2021 02:10
рони,
я продумала все возможные варианты, и хочу получить универсальный для меня, или проще говоря где всё будет зависеть от html-кода, скачала и установила скрипт подсветки кода "rainbow", если возникнут вопросы, чтобы можно было зайти на отдельную страничку и посмотреть что именно надо изменить, просто один скрипт должен проверять наличие элементов и вставлять необходимое... видел я спрашивала как изменить change на otinput в календаре на год...

рони 04.06.2021 07:28
Блондинка,
:-?

Блондинка 04.06.2021 21:18
рони,
возможно заполнить такую страницу, и при нажатии кнопки сменить таблицы с горизонтальных на вертикальные и обратно? 

<div id="calendar_month">
    <div id="num_year"></div>
    <div id="month">
      <div id="navigation_panel">
        <select class="select_month"></select>
        <input class="year_input" type="number" value="">
        <button class="table_rotate">➘</button>
      </div>
      <div id="month_name"></div> 
        <table class=" table_month_horiz"></table>
      </div>
     <span id="select_year">календарь на год</span>
    </div>
  
  <div id="calendar_year">
    <div id="navigation_panel_year"">
    Календарь на <input id="year_input" type="number" size="4" value=""/>
    год.
    </div>
    <table id="table">
    <tr>
    <td class="td_month">
    <div id="January"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="February"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="March"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    <tr>
    <td class="td_month">
    <div id="April"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="May"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="June"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    <tr>
    <td class="td_month">
    <div id="July"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="August"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="September"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    <tr>
    <td class="td_month">
    <div id="October"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="November"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="December"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    </table>
    <span id="select_mont"> календарь на месяц</span>
    </div>
    
    <div id="calendar_kvartal">
      <div id="navigation_panel">
      <select class="select_kvartal"></select>
      <input class="year_input" type="number" value="">
      <button class="table_rotate">➘</button>
      </div>
    <table id="table">
    <tr>
    <td class="td_month">
    <div id="month_num_1"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="month_num_2"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="month_3"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    </table>
    <span id="select_mont"> календарь на месяц</span>
    </div>
    
    <div id="month_3">
      <div id="navigation_panel">
      <select class="select_month"></select>
      <input class="year_input" type="number" value="">
      <button class="table_rotate">➘</button>
      </div>
    <table id="table">
    <tr>
    <td class="td_month">
    <div id="prev_month"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="cur_month"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="next_month"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    </table>
    <span id="select_mont"> календарь на месяц</span>
    </div>

рони 04.06.2021 21:34
Блондинка,
можно, но некому.

Блондинка 04.06.2021 21:45
рони,
а как рендерить все 12 месяцев года?, только один квартал? только три месяца, пред текущий и будущий?

рони 04.06.2021 22:15
Цитата:
Сообщение от Блондинка
а как рендерить
Цитата:
Сообщение от рони
код лучше разбить на функции, тогда будет проще (надеюсь).
функция получает месяц и год, выдаёт диапазон от и до.
функция получает диапазон и направление, формирует массив строк c ячейками.
функция получает массив строк, выдаёт html;
функция получает html и элемент, выводит html в элемент.
как-то так
всё это есть в предыдущих примерах ... учитесь создавать таблицы
http://code.mu/ru/javascript/book/pr...eating-tables/

https://www.stijit.com/javascript/table

https://html5css.ru/jsref/dom_obj_table.php

Блондинка 05.06.2021 11:49
рони,
а как ограничивать количество строк/столбцов?, в зависимости от того сколько недель в месяце...

рони 05.06.2021 15:46
Цитата:
Сообщение от Блондинка
а как ограничивать количество строк/столбцов?, в зависимости от того сколько недель в месяце...
Цитата:
Сообщение от рони
функция получает диапазон и направление, формирует массив строк c ячейками.
:-?

Блондинка 05.06.2021 19:44
рони,
ну так помоги создать эту ... функцию :(

рони 05.06.2021 20:00
Цитата:
Сообщение от Блондинка
ну так помоги создать эту
render смотри свои сообщения или мои

Блондинка 05.06.2021 20:13
Цитата:
Сообщение от рони
if(calendar.element.classList.contains(' класс горизонтальной таблицы')) calendar.render(true);
else calendar.render();

Последний раз редактировалось рони, 03.06.2021 в 17:02. Причина: element. пропущен был
это?

и что у меня не так?

рони 05.06.2021 20:20
Цитата:
Сообщение от Блондинка
это?
это похоже на функцию?

Блондинка 05.06.2021 20:31
Цитата:
Сообщение от рони (Сообщение 537715)
render смотри свои сообщения или мои
тут про render сказал, вообще запутал меня, без бутылки явно не разобраться...

рони 05.06.2021 21:18
render тело таблицы
 
Блондинка,

функция получает диапазон и направление, выдаёт html.

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        table {
            margin: 10px auto;
        }

        td {
            border: solid 1px #000080;
        }
        td.week_day {
            background-color: #7575FF;
        }
    </style>
    <script>
        const render = function(range, horiz) {
            let html = '';
            if (horiz) {
                for (let i = 0, j = 0; i < range.length; i++) {
                    let cls = 'day';
                    if (i < 7) cls = 'week_day';
                    if (i % 7 == 0) {
                        html += '<tr>';
                    }
                    html += `<td class="${cls}">${range[i]}`;
                }
            } else {
                html = [];
                for (let i = 0; i < range.length; i++) {
                    let cls = 'day';
                    if (i < 7) {
                        cls = 'week_day'
                        html.push('<tr>')
                    }
                    html[i % 7] += `<td class="${cls}">${range[i]}`;
                }
                html = html.join('')
            }
            return html
        }
    </script>
</head>
<body>
    <table class="test"></table>
    <table class="test"></table>
    <script>
        let range = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        let tables = document.querySelectorAll('.test');
        let html = render(range);
        tables[0].innerHTML = html;
        html = render(range, true);
        tables[1].innerHTML = html;
    </script>
</body>
</html>

рони 05.06.2021 21:26
Блондинка,
тоже самое, но направление от наличия в теге таблицы класса
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        table {
            margin: 10px auto;
        }

        td {
            border: solid 1px #000080;
        }
        td.week_day {
            background-color: #7575FF;
        }
    </style>
    <script>
        const render = function(range, horiz) {
            let html = '';
            if (horiz) {
                for (let i = 0, j = 0; i < range.length; i++) {
                    let cls = 'day';
                    if (i < 7) cls = 'week_day';
                    if (i % 7 == 0) {
                        html += '<tr>';
                    }
                    html += `<td class="${cls}">${range[i]}`;
                }
            } else {
                html = [];
                for (let i = 0; i < range.length; i++) {
                    let cls = 'day';
                    if (i < 7) {
                        cls = 'week_day'
                        html.push('<tr>')
                    }
                    html[i % 7] += `<td class="${cls}">${range[i]}`;
                }
                html = html.join('')
            }
            return html
        }
    </script>
</head>
<body>
    <table class="test"></table>
    <table class="test horiz"></table>
    <script>
        let range = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        let tables = document.querySelectorAll('.test');
        tables.forEach(table => {
        let direction = table.classList.contains('horiz');
        table.innerHTML = render(range, direction);
        });
    </script>
</body>
</html>

Блондинка 11.06.2021 00:38
рони,
как тут удалить вторую таблицу, чтобы просто менялся класс таблицы? и удалить(в случае необходимости) элементы с названием месяца и года, из html-кода, чтобы скрипт сначала проверял наличие элементов и вставлял необходимое? проще говоря чтобы на странице была только одна таблица, и вне зависимости от наличия/отсутствия элементов id="month_name" и id="num_year" скрипт выводил необходимое? 
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #navigation_panel {
            white-space: nowrap;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            padding: 5px 15px;
            margin: 0 0 5px;
        }
        
        input {
            width: 56px;
            display: inline-block;
            text-align: center;
            border: 1px solid hsl(210, 100%, 50%);
        }
        
        #table_rotate {
            border: 1px solid hsl(210, 100%, 50%);
            border-radius: 12px 12px 0 12px;
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        select {
            border: 1px solid hsl(210, 100%, 50%);
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        .table_month_horiz,
        .table_month_vert {
            width: 250px;
            height: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
        }
        
        td {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            text-align: center;
            font: 14px serif;
        }

        #num_year,
        #month_name {
            background-color: hsl(210, 100%, 95%);
            color: hsl(210, 100%, 50%);
            font: bold 18px serif;
            text-align: center;
        }

        #num_year {
            width: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }

        #month {
            display: inline-block;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 8px;
            padding: 5px;
            width: 250px;
        }

        #month_name {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }

        .table_month_vert,
        .table_month_horiz {
            table-layout: fixed;
            width: 100%;
            height: 250px;
            border-spacing: 3px;
        }

        .table_month_horiz tr td:nth-child(1) {
            width: 20%;
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(1) {
        width: 20%;
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_horiz tr td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
        
        .table_month_vert tr:nth-child(1) td.day {
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_vert tr:nth-child(n+2) td.day {
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */

    </style>
</head>

<body>
    <div id="num_year"></div>
    <div id="month">
        <div id="navigation_panel">
        <select id="select_month"></select>
        <input id="year_input" type="number" value="">
        <button id="table_rotate">➘</button>
        </div>
        <div id="month_name"></div> 
        <table class="table_month_horiz"></table>
        <table class="table_month_vert"></table> 
    </div>
    <script>
        var calendar = {
            type: 'horiz',
            element: document.querySelector('.table_month_vert'),
            
            update: function(year, month) {
                this.year = year;
                this.month = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь', ][month];
                var startDay = new Date(year, month, 1);
                var offsetDay = (startDay.getDay() || 7) - 1;
                startDay.setDate(startDay.getDate() - offsetDay);
                var lastDay = new Date(startDay);
                var days = new Date(year, month + 1, 0).getDate();
                days = Math.ceil((days + offsetDay) / 7) * 7;
                lastDay.setDate(lastDay.getDate() + days);
                this.data = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
                while (startDay < lastDay) {
                    this.data.push(startDay.getDate());
                    startDay.setHours(24);
                }
            },
            
            render2: function(horiz) {
                var html = '';
                if (horiz) {

                    this.element.classList.add("horiz");
                    for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) {
                        if (j == 0) html += '<tr class="week">';
                        html += '<td class="day">' + this.data[i] + '</td>';
                        if (j == 6) html += '</td>';
                    }
                } else {
                    html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
                    for (var i = 0; i < this.data.length; i++) {
                        html[i % 7] += '<td class="day">' + this.data[i];
                    }
                    html = html.join('')
                }

                this.numYear.textContent = this.year;
                this.monthName.textContent = this.month;
                this.element.innerHTML = html;
            },
            render: function() {
                var html = '';
                if (this.type == 'vert') {
                    
                    this.element.innerHTML = '';
                    this.element = document.querySelector('.table_month_vert');
                    this.element.classList.add("horiz");
                    
                    for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) {
                        if (j == 0) html += '<tr class="week">';
                        html += '<td class="day">' + this.data[i] + '</td>';
                        if (j == 6) html += '</td>';
                    }
                } else {
                    
                    this.element.innerHTML = '';
                    this.element = document.querySelector('.table_month_horiz');
                    html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
                    for (var i = 0; i < this.data.length; i++) {
                        html[i % 7] += '<td class="day">' + this.data[i];
                    }
                    html = html.join('');
                    
                }
                this.numYear.textContent = this.year;
                this.monthName.textContent = this.month;
                this.element.innerHTML = html;
            },
            toggle: function(){
                this.type = this.type == 'vert' ? 'horiz' : 'vert';
                this.render();
            },
        };
        var today = new Date(),
            thisYear = today.getFullYear(),
            thisMonth = today.getMonth();
        calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
        calendar.numYear = document.querySelector('#num_year');
        calendar.monthName = document.querySelector('#month_name');
        calendar.update(thisYear, thisMonth);
        calendar.render();
        
        selector = document.querySelector('#select_month');
        month_list = ['Январь', 'Февраль', 'Март', 'Апрель', ' Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
        for (var i = 0; i < month_list.length; i++){
        selector.options[i] = new Option(month_list[i], i);
        }
        selector.selectedIndex = thisMonth;
        
        //Это для того, чтобы менять календарь при изменении месяца и года
        selector.addEventListener('change', load);
        document.querySelector('#year_input').addEventListener('input', load);
        
        document.getElementById('table_rotate').addEventListener('click', function() {

        calendar.toggle();
        });
        
        function load(){
        var year = document.getElementById('year_input').value;
        var month = selector.selectedIndex;
        calendar.update(year, month);
        calendar.render();
        }

        document.addEventListener("DOMContentLoaded", ()=>{
        document.querySelector('#year_input').value = thisYear;
        load();
        });
    </script>
</body>
</html>

рони 11.06.2021 11:43
Блондинка,
https://learn.javascript.ru/modifying-document

Блондинка 12.06.2021 19:06
Цитата:
Сообщение от рони (Сообщение 537890)
рони, не будь таким жестоким, лишь бы издеваться...

Блондинка 24.06.2021 00:10
есть выпадающие списки в html,

<select class="select_kvartal">
    <option value="Ⅰ">Ⅰ квартал</option>
    <option value="01" disabled>Январь</option>
    <option value="02" disabled>Февраль</option>
    <option value="03" disabled>Март</option>
    <option value="Ⅱ">Ⅱ квартал</option>
    <option value="04" disabled>Апрель</option>
    <option value="05" disabled>Май</option>
    <option value="06" disabled>Июнь</option>
    <option value="Ⅲ">Ⅲ квартал</option>
    <option value="07" disabled>Июль</option>
    <option value="08" disabled>Август</option>
    <option value="09" disabled>Сентябрь</option>
    <option value="Ⅳ">Ⅳ квартал</option>
    <option value="10" disabled>Октябрь</option>
    <option value="11" disabled>Ноябрь</option>
    <option value="12" disabled>Декабрь</option>
    </select>



<select class="select_05_year">
    <option value="Ⅰ">Ⅰ полугодие</option>
    <option value="01" disabled>Январь</option>
    <option value="02" disabled>Февраль</option>
    <option value="03" disabled>Март</option>
    <option value="04" disabled>Апрель</option>
    <option value="05" disabled>Май</option>
    <option value="06" disabled>Июнь</option>
    <option value="Ⅱ">Ⅱ полугодие</option>
    <option value="07" disabled>Июль</option>
    <option value="08" disabled>Август</option>
    <option value="09" disabled>Сентябрь</option>
    <option value="10" disabled>Октябрь</option>
    <option value="11" disabled>Ноябрь</option>
    <option value="12" disabled>Декабрь</option>
    </select>


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

рони 24.06.2021 07:52
Блондинка,
список.selectedIndex = номер месяца поделить на количество месяцев в квартале или полугодии, взять целую часть и умножить на количество месяцев в квартале или полугодии + 1

Блондинка 10.07.2021 15:50 
<head>
<style type="text/css">
div { border: 1px solid #999;
padding: 5px;
margin: 0 0 5px; }
table { border: 1px solid #00f;
padding: 5px; }
td { border: 1px solid #090;
padding: 5px; }

#navigation_panel {
white-space: nowrap;
overflow: scroll;
padding: 5px;
min-width: 400px; }

select { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: bold 14px serif;
padding: 5px; }

button { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: 14px serif;
width: 30px;
height:30px;
border-radius: 12px 12px 0 12px; }

button.month_minus,
button.year_minus,
button.kvartal_minus,
button.year_05_minus
 { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: 14px serif;
width: 30px;
height:30px;
border-radius: 28px 0 0 28px/18px 0 0 18px; }

button.month_plus,
button.year_plus,
 button.kvartal_plus,
 button.year_05_plus
 { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: 14px serif;
width: 30px;
height:30px;
border-radius: 0 28px 28px 0/0 18px 18px 0; }

input { border: 1px solid #099;
width: 60px; }
span { background-color: hsl(190, 100%, 98%);
color: hsl(190, 100%, 40%);
border: 1px solid hsl(190, 100%, 40%);
font: 14px serif;
padding: 5px;
display: inline-block;
 }
</style>
</head>
<body>
<div id="calendar_month">
    <div id="month">
      <div id="navigation_panel">
        Календарь на месяц<br>
        <button class="month_minus">◀</button>
        <select class="select_month">
        <option value="01">Январь</option>
        <option value="02">Февраль</option>
        <option value="03">Март</option>
        <option value="04">Апрель</option>
        <option value="05">Май</option>
        <option value="06">Июнь</option>
        <option value="07">Июль</option>
        <option value="08">Август</option>
        <option value="09">Сентябрь</option>
        <option value="10">Октябрь</option>
        <option value="11">Ноябрь</option>
        <option value="12">Декабрь</option>
        </select>
        <button class="month_plus">▶</button>
        <button class="year_minus">◀</button>
        <input class="year_input" type="number" value="">
        <button class="year_plus">▶</button>
        <button class="table_rotate">➘</button>
      </div>
      <div id="month_name"></div> 
        <table class=" table_month_horiz"></table>
      </div>
     </div>
    </body>
  
  <body>
  <div id="calendar_year">
    <div id="navigation_panel">
    Календарь на 
    <button class="year_minus">◀</button>
    <input id="year_input" type="number" size="4" value=""/>
    <button class="year_plus">▶</button>
    год.
    <button class="table_rotate">➘</button>
    </div>
    <table id="table">
    <tr>
    <td class="td_month">
    <div id="January"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="February"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="March"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    <tr>
    <td class="td_month">
    <div id="April"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="May"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="June"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    <tr>
    <td class="td_month">
    <div id="July"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="August"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="September"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    <tr>
    <td class="td_month">
    <div id="October"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="November"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="December"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    </table>
    </div>
    </body>
    
    <body>
    <div id="calendar_month">
    <div id="month">
    <div id="navigation_panel">
    Календарь на месяц<br>
    <button class="month_minus">◀</button>
    <select class="select_month">
    <option value="01">Январь</option>
    <option value="02">Февраль</option>
    <option value="03">Март</option>
    <option value="04">Апрель</option>
    <option value="05">Май</option>
    <option value="06">Июнь</option>
    <option value="07">Июль</option>
    <option value="08">Август</option>
    <option value="09">Сентябрь</option>
    <option value="10">Октябрь</option>
    <option value="11">Ноябрь</option>
    <option value="12">Декабрь</option>
    </select>
    <button class="month_plus">▶</button>
    <button class="year_minus">◀</button>
    <input class="year_input" type="number" value="">
    <button class="year_plus">▶</button>
    <button class="table_rotate">➘</button>
    </div>
    <div id="month_name"></div> 
    <table class=" table_month_horiz"></table>
    </div>
    <span id="select_year">календарь на год</span><br>
    </div>
    
    <div id="calendar_year">
    <div id="navigation_panel"">
    Календарь на 
    <button class="year_minus">◀</button>
    <input id="year_input" type="number" size="4" value=""/>
    <button class="year_plus">▶</button>
    год.
    <button class="table_rotate">➘</button>
    </div>
    <table id="table">
    <tr>
    <td class="td_month">
    <div id="January"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="February"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="March"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    <tr>
    <td class="td_month">
    <div id="April"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="May"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="June"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    <tr>
    <td class="td_month">
    <div id="July"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="August"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="September"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    <tr>
    <td class="td_month">
    <div id="October"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="November"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="December"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    </table>
    <span id="select_month"> календарь на месяц</span>
    </div>
    </body>

Блондинка 10.07.2021 15:57 
<style type="text/css">
div { border: 1px solid #999;
padding: 5px;
margin: 0 0 5px; }
table { border: 1px solid #00f;
padding: 5px; }
td { border: 1px solid #090;
padding: 5px; }

#navigation_panel {
white-space: nowrap;
overflow: scroll;
padding: 5px;
min-width: 400px; }

select { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: bold 14px serif;
padding: 5px; }

button { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: 14px serif;
width: 30px;
height:30px;
border-radius: 12px 12px 0 12px; }

button.month_minus,
button.year_minus,
button.kvartal_minus,
button.year_05_minus
 { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: 14px serif;
width: 30px;
height:30px;
border-radius: 28px 0 0 28px/18px 0 0 18px; }

button.month_plus,
button.year_plus,
 button.kvartal_plus,
 button.year_05_plus
 { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: 14px serif;
width: 30px;
height:30px;
border-radius: 0 28px 28px 0/0 18px 18px 0; }

input { border: 1px solid #099;
width: 60px; }
span { background-color: hsl(190, 100%, 98%);
color: hsl(190, 100%, 40%);
border: 1px solid hsl(190, 100%, 40%);
font: 14px serif;
padding: 5px;
display: inline-block;
 }
</style>
</head>
<body>
    <div id="calendar_kvartal">
      <div id="navigation_panel">
      Календарь на квартал<br>
      <button class="kvartal_minus">◀</button>
      <select class="select_kvartal">
      <option value="Ⅰ">Ⅰ квартал</option>
      <option value="01" disabled>Январь</option>
      <option value="02" disabled>Февраль</option>
      <option value="03" disabled>Март</option>
      <option value="Ⅱ">Ⅱ квартал</option>
      <option value="04" disabled>Апрель</option>
      <option value="05" disabled>Май</option>
      <option value="06" disabled>Июнь</option>
      <option value="Ⅲ">Ⅲ квартал</option>
      <option value="07" disabled>Июль</option>
      <option value="08" disabled>Август</option>
      <option value="09" disabled>Сентябрь</option>
      <option value="Ⅳ">Ⅳ квартал</option>
      <option value="10" disabled>Октябрь</option>
      <option value="11" disabled>Ноябрь</option>
      <option value="12" disabled>Декабрь</option>
      </select>
      <button class="kvartal_plus">▶</button>
      <button class="year_minus">◀</button>
      <input class="year_input" type="number" value="">
      <button class="year_plus">▶</button>
      <button class="table_rotate">➘</button>
      </div>
    <table id="table">
    <tr>
    <td class="td_month">
    <div id="month_num_1"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="month_num_2"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="month_3"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    </table>
    </div>
    </body>
    
    <body>
    <div id="calendar_month">
    <div id="month">
    <div id="navigation_panel">
    Календарь на месяц<br>
    <button class="month_minus">◀</button>
    <select class="select_month">
    <option value="01">Январь</option>
    <option value="02">Февраль</option>
    <option value="03">Март</option>
    <option value="04">Апрель</option>
    <option value="05">Май</option>
    <option value="06">Июнь</option>
    <option value="07">Июль</option>
    <option value="08">Август</option>
    <option value="09">Сентябрь</option>
    <option value="10">Октябрь</option>
    <option value="11">Ноябрь</option>
    <option value="12">Декабрь</option>
    </select>
    <button class="month_plus">▶</button>
    <button class="year_minus">◀</button>
    <input class="year_input" type="number" value="">
    <button class="year_plus">▶</button>
    <button class="table_rotate">➘</button>
    </div>
    <div id="month_name"></div> 
    <table class=" table_month_horiz"></table>
    </div>
    <span id="select_kvartal">календарь на квартал</span>
    </div>
    
    <div id="calendar_kvartal">
    <div id="navigation_panel">
    Календарь на квартал<br>
    <button class="kvartal_minus">◀</button>
    <select class="select_kvartal">
    <option value="Ⅰ">Ⅰ квартал</option>
    <option value="01" disabled>Январь</option>
    <option value="02" disabled>Февраль</option>
    <option value="03" disabled>Март</option>
    <option value="Ⅱ">Ⅱ квартал</option>
    <option value="04" disabled>Апрель</option>
    <option value="05" disabled>Май</option>
    <option value="06" disabled>Июнь</option>
    <option value="Ⅲ">Ⅲ квартал</option>
    <option value="07" disabled>Июль</option>
    <option value="08" disabled>Август</option>
    <option value="09" disabled>Сентябрь</option>
    <option value="Ⅳ">Ⅳ квартал</option>
    <option value="10" disabled>Октябрь</option>
    <option value="11" disabled>Ноябрь</option>
    <option value="12" disabled>Декабрь</option>
    </select>
    <button class="kvartal_plus">▶</button>
    <button class="year_minus">◀</button>
    <input class="year_input" type="number" value="">
    <button class="year_plus">▶</button>
    <button class="table_rotate">➘</button>
    </div>
    <table id="table">
    <tr>
    <td class="td_month">
    <div id="month_num_1"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="month_num_2"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="month_3"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    </table>
    <span id="select_month">календарь на месяц</span>
    </div>
    </body>
    
    <body>
    <div id="calendar_05_year">
    <div id="navigation_panel">
    Календарь на полугодие<br>
    <button class="year_05_minus">◀</button>
    <select class="select_05_year">
    <option value="Ⅰ">Ⅰ полугодие</option>
    <option value="01" disabled>Январь</option>
    <option value="02" disabled>Февраль</option>
    <option value="03" disabled>Март</option>
    <option value="04" disabled>Апрель</option>
    <option value="05" disabled>Май</option>
    <option value="06" disabled>Июнь</option>
    <option value="Ⅱ">Ⅱ полугодие</option>
    <option value="07" disabled>Июль</option>
    <option value="08" disabled>Август</option>
    <option value="09" disabled>Сентябрь</option>
    <option value="10" disabled>Октябрь</option>
    <option value="11" disabled>Ноябрь</option>
    <option value="12" disabled>Декабрь</option>
    </select>
    <button class="year_05_plus">▶</button>
    <button class="year_minus">◀</button>
    <input class="year_input" type="number" value="">
    <button class="year_plus">▶</button>
    <button class="table_rotate">➘</button>
    </div>
    <table id="table">
    <tr>
    <td class="td_month">
    <div id="month_num_1"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="month_num_2"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="month_3"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    <tr>
    <td class="td_month">
    <div id="month_num_4"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="month_num_5"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="month_6"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    </table>
    </div>
    </body>


Часовой пояс GMT +3, время: 21:44.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице