05.06.2021, 20:31
|
 |
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Сообщение от рони
|
|
render смотри свои сообщения или мои
|
тут про render сказал, вообще запутал меня, без бутылки явно не разобраться... |
|
05.06.2021, 21:18
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
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
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Блондинка,
тоже самое, но направление от наличия в теге таблицы класса
<!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
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
рони,
как тут удалить вторую таблицу, чтобы просто менялся класс таблицы? и удалить(в случае необходимости) элементы с названием месяца и года, из 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 в 00:44.
|
|
11.06.2021, 11:43
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
|
|
12.06.2021, 19:06
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
рони, не будь таким жестоким, лишь бы издеваться...
|
|
24.06.2021, 00:10
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
есть выпадающие списки в 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
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Блондинка,
список.selectedIndex = номер месяца поделить на количество месяцев в квартале или полугодии, взять целую часть и умножить на количество месяцев в квартале или полугодии + 1
|
|
10.07.2021, 15:50
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
<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
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
<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>
Последний раз редактировалось Блондинка, 10.07.2021 в 16:58.
|
|
|
|
