Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Форум программистов и сисадминов Киберфорум > Форум web-программистов > JavaScript > JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
1 из 2 1 2 »
 
Рейтинг 4.88/34: Рейтинг темы: голосов - 34, средняя оценка - 4.88
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279

Как сделать календарь на год?

18.05.2021, 11:13. Показов 6652. Ответов 37
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
есть такой вертикальный календарь,

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Baumans&display=swap');
body { width: 1100px; }
body, select, input { font: 14px serif; }
#calendar { width: 330px; height: 375px; display: inline-block; border: 1px solid hsl(0,0%,66%); border-radius: 6px/4px; padding: 5px; }
#navigation_panel { background-color: hsl(210, 100%, 92%); min-height: 34px; max-height: 78px; border: 1px solid hsl(0,0%,66%); border-radius: 6px/4px; padding: 10px; margin-bottom: 6px; text-align: center; vertical-align: middle;  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
#navigation_panel button, #navigation_panel #calendar_year { background-color: hsl(210, 100%, 85%); color: hsl(210, 100%, 45%); font: 14px serif; border: 1px solid hsl(210, 100%, 45%); }
#calendar_month { background-color: transparent; color: hsl(210,100%,45%); font: 14px serif; border: 1px solid hsl(210, 100%, 45%); }
#navigation_panel button { height: 34px; vertical-align: middle; }
#background_month { background-color: hsl(210, 100%, 85%); display: inline-block; }
button.minus { width: 28px; text-align: center; border-radius: 12px 0 0 12px / 10px 0 0 10px; margin-right: -1px; }
button.plus { width: 28px; text-align: center; border-radius: 0 12px 12px 0 / 0 10px 10px 0; margin-left: -1px; }
.month_plus { margin-right: 35px; }
#presently { width: 234px; margin-top: 10px; border-radius: 12px/10px;}
#calendar_month { width: 89px; display: inline-block; }
#calendar_year { width: 54px; display: inline-block; }
select { height: 34px; }
input { height: 30px; border: 1px solid hsl(0,0%,66%); display: inline-block; text-align: center; }
#table { font-family: 'Baumans', cursive; table-layout: fixed; width: 100%; height: 413px; padding: 2px; }
#table, td { border: 1px solid hsl(0,0%,66%); border-radius: 6px/4px; }
td { margin: 1px; text-align: center; }
#table tbody td.prevMonth { background-color: hsl(210,100%,95%); color: hsl(210,100%,80%); border: 1px solid hsl(0,0%,80%); }
#table tbody tr:nth-child(n + 6) td.prevMonth { background-color: hsl(348,100%,95%); color: hsl(348,100%,80%); border: 1px solid hsl(0,0%,80%); }
.curMonth { background-color: ; }
#table tbody td.nextMonth { background-color: hsl(210,100%,95%); color: hsl(210,100%,80%); border: 1px solid hsl(0,0%,80%); }
#table tbody tr:nth-child(n + 6) td.nextMonth { background-color: hsl(348,100%,95%); color: hsl(348,100%,80%); border: 1px solid hsl(0,0%,80%); }
#presently.hide { display: none; }
#table tbody tr td.week-day { background-color: hsl(210,100%,85%); color: hsl(210,100%,50%); border: 1px solid hsl(0,0%,60%); width: 20%; } /* день недели */
#table tbody tr:nth-child(n + 6) td.week-day { background-color: hsl(348,100%,85%); color: hsl(348,100%,50%); border: 1px solid hsl(0,0%,60%); } /* день недели выходной*/
#table tbody tr td.week-day.curDay { border: 1px solid hsl(210,100%,50%); background-color: hsl(210,100%,75%); color: hsl(210,100%,98%); font-weight: bold; text-shadow: 1px 1px hsl(210,100%,50%), -1px 1px hsl(210,100%,50%), 1px -1px hsl(210,100%,50%), -1px -1px hsl(210,100%,50%), 1px 0 hsl(210,100%,50%), 0 1px hsl(210,100%,50%), -1px 0 hsl(210,100%,50%), 0 -1px hsl(210,100%,50%); letter-spacing: 2px; } /* сегодн день недели */
#table tbody tr:nth-child(n + 6) td.week-day.curDay { border: 1px solid hsl(348,100%,50%); background-color: hsl(348,100%,75%); color: hsl(348,100%,98%); font-weight: bold; text-shadow: 1px 1px hsl(348,100%,50%), 1px -1px hsl(348,100%,50%), -1px 1px hsl(348,100%,50%), -1px -1px hsl(348,100%,50%), 1px 0 hsl(348,100%,50%), -1px 0 hsl(348,100%,50%), 0 1px hsl(348,100%,50%), 0 -1px hsl(348,100%,50%); letter-spacing: 2px; } /* сегодн день недели выходной */
#table tbody td { background-color: hsl(210,100%,90%); color: hsl(210,100%,50%); } /* будние дни текущего месяца */
#table tbody tr:nth-child(n + 6) td{ background-color: hsl(348,100%,90%); color: hsl(348,100%,50%); } /* выходные дни текущего месяца */
#table tbody tr td.curMonth.curDay { background-color: hsl(210,100%,80%); border: 1px solid hsl(210, 100%, 50%); font-weight: bold; color: hsl(210,100%,100%); text-shadow: 1px 1px hsl(210,100%,50%), -1px 1px hsl(210,100%,50%), 1px -1px hsl(210,100%,50%), -1px -1px hsl(210,100%,50%), 1px 0 hsl(210,100%,50%), 0 1px hsl(210,100%,50%), -1px 0 hsl(210,100%,50%), 0 -1px hsl(210,100%,50%); letter-spacing: 3px; } /* сегодня будний */
#table tbody tr:nth-child(n + 6) td.curMonth.curDay { background-color: hsl(348,100%,80%); border: 1px solid hsl(348,100%,50%); color: hsl(348,100%,100%); text-shadow: 1px 1px hsl(348,100%,50%), 1px -1px hsl(348,100%,50%), -1px 1px hsl(348,100%,50%), -1px -1px hsl(348,100%,50%), 1px 0 hsl(348,100%,50%), -1px 0 hsl(348,100%,50%), 0 1px hsl(348,100%,50%), 0 -1px hsl(348,100%,50%); letter-spacing: 3px; } /* сегодня выходной */
 
#calendar { display: flex; flex-direction: column; }
.content_month { flex: 1; }
#table { height:100%; }
 
button, select, input { outline: none; }
 
</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="number" size="4" id="calendar_year" />
<button class="year_plus plus">❯</button><br />
<button id="presently">сегодня</button>
</div>
<div class="content_month">
<table id="table">
<tbody></tbody>
</table></div>
</div>
 <script>
Date.prototype.reduce = function(callback, value) {
 var year = this.getFullYear();
 var month = this.getMonth();
 var step = new Date(year, month, 1);
 var last = new Date(year, month + 1, 0);
 step.setHours(24 * (0 - ((step.getDay() + 6) % 7)));
 last.setHours(24 * (6 - ((last.getDay() + 6) % 7)));
 for (var i = 0; step <= last; i++) {
 value = callback(value, new Date(+step), i, this);
 step.setHours(24);
 }
 return value;
};
var data = new Date();
var selectMonth = document.querySelector('#calendar_month');
var monthNames = [
 'Январь',
 'Февраль',
 'Март',
 'Апрель',
 'Май',
 'Июнь',
 'Июль',
 'Август',
 'Сентябрь',
 'Октябрь',
 'Ноябрь',
 'Декабрь',
];
monthNames.forEach(function(monthName, i) {
 selectMonth.options[i] = new Option(monthName, i);
});
selectMonth.addEventListener('change', function() {
 data.setMonth(this.value);
 createCalendar(data);
});
var minusMonth = document.querySelector('.month_minus');
minusMonth.addEventListener('click', function() {
 data.setMonth(data.getMonth() - 1);
 createCalendar(data);
});
var plusMonth = document.querySelector('.month_plus');
plusMonth.addEventListener('click', function() {
 data.setMonth(data.getMonth() + 1);
 createCalendar(data);
});
var minusYear = document.querySelector('.year_minus');
minusYear.addEventListener('click', function() {
 data.setYear(data.getFullYear() - 1);
 createCalendar(data);
});
var plusYear = document.querySelector('.year_plus');
plusYear.addEventListener('click', function() {
 data.setYear(data.getFullYear() + 1);
 createCalendar(data);
});
var inputYear = document.querySelector('#calendar_year');
inputYear.addEventListener('input', function() {
 if (/^d{4}$/.test(this.value)) {
 data.setYear(this.value);
 createCalendar(data);
 }
});
var currentButton = document.querySelector('#presently');
currentButton.addEventListener('click', function() {
 data = new Date();
 createCalendar(data);
});
 
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 indexcurDay;
 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');
 indexcurDay = index % 7;
 }
 value[index % 7] += '<td class="' + className + '">' + date;
 return value
 }, ['<tr><td class="week-day">Пн.',
             '<tr><td class="week-day">Вт.',
             '<tr><td class="week-day">Ср.',
             '<tr><td class="week-day">Чт.',
             '<tr><td class="week-day">Пт.',
             '<tr><td class="week-day">Сб.',
             '<tr><td class="week-day">Вс.']);
 document.querySelector('#table tbody').innerHTML = html.join('');
 var daysTd = document.querySelectorAll('.week-day');
 if(indexcurDay !== void 0) daysTd[indexcurDay].classList.add('curDay');
}
createCalendar(data);
var timer;
function refresh() {
 window.clearTimeout(timer);
 var finish = new Date().setHours(24, 0, 0, 0);
 finish -= data;
 timer = window.setTimeout(function() {
 createCalendar(data);
 refresh();
 }, finish);
}
refresh();
 </script>
 </body>
</html>
возможно ли в него добавить ссылку, при клике на которую, html-код страницы станет таким

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<style type="text/css">
 #calendar_Year { width: 996px; padding: 5px; border: 1px solid hsl(0,0%,66%); }
 #navigation_panel_year { width: 954px; border: 1px solid hsl(0,0%,66%); white-space: nowrap; padding: 10px 20px; margin: 0 0 3px 0; }
 #table_year { width: 1020px; border: none; margin: 0 0 0 -2px;; padding: 0; }
 .td_month { width: 330px; height: 375px; border: 1px solid hsl(0,0%,66%); border-radius: 0px/0px; padding: 5px; margin-left: -2px; }
 div.month_name { border: 1px solid hsl(0,0%,66%); padding: 10px 0;}
 button.year_minus { background-color: hsl(210, 100%, 85%); width: 28px; height: 34px; text-align: center; border-radius: 12px 0 0 12px / 10px 0 0 10px; margin-right: -6px; }
 button.year_plus { background-color: hsl(210, 100%, 85%); width: 28px; height: 34px; text-align: center; border-radius: 0 12px 12px 0 / 0 10px 10px 0; margin-left: -6px; }
 .month_plus { margin-right: 35px; }
 #presently { width: 234px; margin-top: 10px; border-radius: 12px/10px;}
 #calendar_month { width: 89px; display: inline-block; }
 #calendar_year { width: 54px; display: inline-block; }
 select { height: 34px; }
 #calendar_year { height: 30px; display: inline-block; text-align: center;  }
 button.year_minus, button.year_plus, #calendar_year { background-color: hsl(210,100%,85%); color: hsl(210,100%,45%); font: 14px serif; border: 1px solid hsl(210,100%,45%); }
 </style>
 <div id="calendar_Year">
 <div id="navigation_panel_year">
 Календарь на <button class="year_minus">–</button>
 <input type="number" size="4" id="calendar_year"/>
 <button class="year_plus">+</button> год. <br/>
 <button id="presently_year" style="display: none;">сегодня</button>
 </div>
 <div class="content_year">
 <table id="table_year">
 <tr><td class="td_month"><div class="month_name"></div></td><td class="td_month"><div class="month_name"></div></td><td class="td_month"><div class="month_name"></div></td></tr>
 <tr><td class="td_month"><div class="month_name"></div></td><td class="td_month"><div class="month_name"></div></td><td class="td_month"><div class="month_name"></div></td></tr>
 <tr><td class="td_month"><div class="month_name"></div></td><td class="td_month"><div class="month_name"></div></td><td class="td_month"><div class="month_name"></div></td></tr>
 <tr><td class="td_month"><div class="month_name"></div></td><td class="td_month"><div class="month_name"></div></td><td class="td_month"><div class="month_name"></div></td></tr>
 </table></div>
<a>календарь на месяц</a>
и отобразится календарь на год, а при клике на ссылку "календарь на месяц опять вернулся к отображению месяца?

другими словами, при клике на ссылку "календарь на год" пропадёт выпадающий список для выбора месяца, с кнопками - и + месяц, а вместо списка появится текст "календарь на <button>-</button><input/><button>+</button> год."
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
 18.05.2021, 11:13
Ответы с готовыми решениями:

Библиотека GGI. Программа рисует календарь на указанный год (год задаётся параметром командной строки)
Реализовать программу с использованием библиотеки GGI. Программа рисует календарь на указанный год (год задаётся параметром командной...

Как вывести календарь на год в Oracle SQL?
Результат должен быть таким: пн вт ср чт пт сб вс Январь 2013 __ 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21...

Как вывести календарь на год в Oracle SQL?
Оформление должно быть таким: пн вт ср чт пт сб вс Январь 2013 __ 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 ...

37
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
18.05.2021, 19:22  [ТС]
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Baumans&display=swap');
body { width: 1023px; }
body, select, input { font: 14px serif; }
#calendar { width: 330px; height: 375px; display: inline-block; border: 1px solid hsl(0,0%,66%); border-radius: 6px/4px; padding: 5px; margin: 0 0 5px 0; }
#navigation_panel { background-color: hsl(210, 100%, 92%); min-height: 34px; max-height: 78px; border: 1px solid hsl(0,0%,66%); border-radius: 6px/4px; padding: 10px; margin-bottom: 6px; text-align: center; vertical-align: middle;  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
#navigation_panel button, #navigation_panel #calendar_year { background-color: hsl(210, 100%, 85%); color: hsl(210, 100%, 45%); font: 14px serif; border: 1px solid hsl(210, 100%, 45%); }
#calendar_month { background-color: transparent; color: hsl(210,100%,45%); font: 14px serif; border: 1px solid hsl(210, 100%, 45%); }
#navigation_panel button { height: 34px; vertical-align: middle; }
#background_month { background-color: hsl(210, 100%, 85%); display: inline-block; }
button.minus { width: 28px; text-align: center; border-radius: 12px 0 0 12px / 10px 0 0 10px; margin-right: -1px; }
button.plus { width: 28px; text-align: center; border-radius: 0 12px 12px 0 / 0 10px 10px 0; margin-left: -1px; }
.month_plus { margin-right: 35px; }
#presently { width: 234px; margin-top: 10px; border-radius: 12px/10px;}
#calendar_month { width: 89px; display: inline-block; }
#calendar_year { width: 54px; display: inline-block; }
select { height: 34px; }
input { height: 30px; border: 1px solid hsl(0,0%,66%); display: inline-block; text-align: center; }
#table { font-family: 'Baumans', cursive; table-layout: fixed; width: 100%; height: 413px; padding: 2px; }
#table, td { border: 1px solid hsl(0,0%,66%); border-radius: 6px/4px; }
td { margin: 1px; text-align: center; }
#table tbody td.prevMonth { background-color: hsl(210,100%,95%); color: hsl(210,100%,80%); border: 1px solid hsl(0,0%,80%); }
#table tbody tr:nth-child(n + 6) td.prevMonth { background-color: hsl(348,100%,95%); color: hsl(348,100%,80%); border: 1px solid hsl(0,0%,80%); }
.curMonth { background-color: ; }
#table tbody td.nextMonth { background-color: hsl(210,100%,95%); color: hsl(210,100%,80%); border: 1px solid hsl(0,0%,80%); }
#table tbody tr:nth-child(n + 6) td.nextMonth { background-color: hsl(348,100%,95%); color: hsl(348,100%,80%); border: 1px solid hsl(0,0%,80%); }
#presently.hide { display: none; }
#table tbody tr td.week-day { background-color: hsl(210,100%,85%); color: hsl(210,100%,50%); border: 1px solid hsl(0,0%,60%); width: 20%; } /* день недели */
#table tbody tr:nth-child(n + 6) td.week-day { background-color: hsl(348,100%,85%); color: hsl(348,100%,50%); border: 1px solid hsl(0,0%,60%); } /* день недели выходной*/
#table tbody tr td.week-day.curDay { border: 1px solid hsl(210,100%,50%); background-color: hsl(210,100%,75%); color: hsl(210,100%,98%); font-weight: bold; text-shadow: 1px 1px hsl(210,100%,50%), -1px 1px hsl(210,100%,50%), 1px -1px hsl(210,100%,50%), -1px -1px hsl(210,100%,50%), 1px 0 hsl(210,100%,50%), 0 1px hsl(210,100%,50%), -1px 0 hsl(210,100%,50%), 0 -1px hsl(210,100%,50%); letter-spacing: 2px; } /* сегодн день недели */
#table tbody tr:nth-child(n + 6) td.week-day.curDay { border: 1px solid hsl(348,100%,50%); background-color: hsl(348,100%,75%); color: hsl(348,100%,98%); font-weight: bold; text-shadow: 1px 1px hsl(348,100%,50%), 1px -1px hsl(348,100%,50%), -1px 1px hsl(348,100%,50%), -1px -1px hsl(348,100%,50%), 1px 0 hsl(348,100%,50%), -1px 0 hsl(348,100%,50%), 0 1px hsl(348,100%,50%), 0 -1px hsl(348,100%,50%); letter-spacing: 2px; } /* сегодн день недели выходной */
#table tbody td { background-color: hsl(210,100%,90%); color: hsl(210,100%,50%); } /* будние дни текущего месяца */
#table tbody tr:nth-child(n + 6) td{ background-color: hsl(348,100%,90%); color: hsl(348,100%,50%); } /* выходные дни текущего месяца */
#table tbody tr td.curMonth.curDay { background-color: hsl(210,100%,80%); border: 1px solid hsl(210, 100%, 50%); font-weight: bold; color: hsl(210,100%,100%); text-shadow: 1px 1px hsl(210,100%,50%), -1px 1px hsl(210,100%,50%), 1px -1px hsl(210,100%,50%), -1px -1px hsl(210,100%,50%), 1px 0 hsl(210,100%,50%), 0 1px hsl(210,100%,50%), -1px 0 hsl(210,100%,50%), 0 -1px hsl(210,100%,50%); letter-spacing: 3px; } /* сегодня будний */
#table tbody tr:nth-child(n + 6) td.curMonth.curDay { background-color: hsl(348,100%,80%); border: 1px solid hsl(348,100%,50%); color: hsl(348,100%,100%); text-shadow: 1px 1px hsl(348,100%,50%), 1px -1px hsl(348,100%,50%), -1px 1px hsl(348,100%,50%), -1px -1px hsl(348,100%,50%), 1px 0 hsl(348,100%,50%), -1px 0 hsl(348,100%,50%), 0 1px hsl(348,100%,50%), 0 -1px hsl(348,100%,50%); letter-spacing: 3px; } /* сегодня выходной */
 
#calendar { display: flex; flex-direction: column; }
.content_month { flex: 1; }
#table { height:100%; }
 
button, select, input { outline: none; }
 
#calendar_Year { width: 1015px; height: 1726px; padding: 5px; border: 1px solid hsl(0,0%,66%); }
 #navigation_panel_year { width: 973px; border: 1px solid hsl(0,0%,66%); white-space: nowrap; padding: 10px 20px; margin: 0; }
 #table_year { width: 1025px; border: none; margin: 0 0 0 -5px;; padding: 0; border-spacing: 5px; }
 .td_month { width: 330px; height: 375px; border: 1px solid hsl(0,0%,66%); border-radius: 0px/0px; padding: 5px; margin-left: 10px; }
 div.month_name { border: 1px solid hsl(0,0%,66%); padding: 10px 0; margin: 0 0 5px 0; }
 .table_month { border: 1px solid hsl(0,0%,66%); height: 350px; }
 button.year_minus { background-color: hsl(210, 100%, 85%); width: 28px; height: 34px; text-align: center; border-radius: 12px 0 0 12px / 10px 0 0 10px; margin-right: -6px; }
 button.year_plus { background-color: hsl(210, 100%, 85%); width: 28px; height: 34px; text-align: center; border-radius: 0 12px 12px 0 / 0 10px 10px 0; margin-left: -6px; }
 .month_plus { margin-right: 35px; }
 #presently { width: 234px; margin-top: 10px; border-radius: 12px/10px;}
 #calendar_month { width: 89px; display: inline-block; }
 #calendar_year { width: 54px; display: inline-block; }
 select { height: 34px; }
 #calendar_year { height: 30px; display: inline-block; text-align: center;  }
 button.year_minus, button.year_plus, #calendar_year { background-color: hsl(210,100%,85%); color: hsl(210,100%,45%); font: 14px serif; border: 1px solid hsl(210,100%,45%); }
 
 </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="number" size="4" id="calendar_year" />
<button class="year_plus plus">❯</button><br />
<button id="presently">сегодня</button>
</div>
<div class="content_month">
<table id="table">
<tbody></tbody>
</table></div>
</div>
 
<div id="calendar_Year">
 <div id="navigation_panel_year">
 Календарь на 
 <button class="year_minus"><</button>
 <input type="number" size="4" id="calendar_year"/>
 <button class="year_plus">></button> год.<br/>
 <button id="presently_year" style="display: none;">сегодня</button>
 </div>
 <div class="content_year">
 <table id="table_year">
 <tr>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 </tr>
 <tr>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div><div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 </tr>
 <tr>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div></td><td class="td_month"><div class="month_name"></div><div class="table_month"></div></td><td class="td_month"><div class="month_name"></div><div class="table_month"></div></td></tr>
 <tr>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 </tr>
 </table></div>
 </div>
 
 <script>
Date.prototype.reduce = function(callback, value) {
 var year = this.getFullYear();
 var month = this.getMonth();
 var step = new Date(year, month, 1);
 var last = new Date(year, month + 1, 0);
 step.setHours(24 * (0 - ((step.getDay() + 6) % 7)));
 last.setHours(24 * (6 - ((last.getDay() + 6) % 7)));
 for (var i = 0; step <= last; i++) {
 value = callback(value, new Date(+step), i, this);
 step.setHours(24);
 }
 return value;
};
var data = new Date();
var selectMonth = document.querySelector('#calendar_month');
var monthNames = [
 'Январь',
 'Февраль',
 'Март',
 'Апрель',
 'Май',
 'Июнь',
 'Июль',
 'Август',
 'Сентябрь',
 'Октябрь',
 'Ноябрь',
 'Декабрь',
];
monthNames.forEach(function(monthName, i) {
 selectMonth.options[i] = new Option(monthName, i);
});
selectMonth.addEventListener('change', function() {
 data.setMonth(this.value);
 createCalendar(data);
});
var minusMonth = document.querySelector('.month_minus');
minusMonth.addEventListener('click', function() {
 data.setMonth(data.getMonth() - 1);
 createCalendar(data);
});
var plusMonth = document.querySelector('.month_plus');
plusMonth.addEventListener('click', function() {
 data.setMonth(data.getMonth() + 1);
 createCalendar(data);
});
var minusYear = document.querySelector('.year_minus');
minusYear.addEventListener('click', function() {
 data.setYear(data.getFullYear() - 1);
 createCalendar(data);
});
var plusYear = document.querySelector('.year_plus');
plusYear.addEventListener('click', function() {
 data.setYear(data.getFullYear() + 1);
 createCalendar(data);
});
var inputYear = document.querySelector('#calendar_year');
inputYear.addEventListener('input', function() {
 if (/^d{4}$/.test(this.value)) {
 data.setYear(this.value);
 createCalendar(data);
 }
});
var currentButton = document.querySelector('#presently');
currentButton.addEventListener('click', function() {
 data = new Date();
 createCalendar(data);
});
 
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 indexcurDay;
 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');
 indexcurDay = index % 7;
 }
 value[index % 7] += '<td class="' + className + '">' + date;
 return value
 }, ['<tr><td class="week-day">Пн.',
             '<tr><td class="week-day">Вт.',
             '<tr><td class="week-day">Ср.',
             '<tr><td class="week-day">Чт.',
             '<tr><td class="week-day">Пт.',
             '<tr><td class="week-day">Сб.',
             '<tr><td class="week-day">Вс.']);
 document.querySelector('#table tbody').innerHTML = html.join('');
 var daysTd = document.querySelectorAll('.week-day');
 if(indexcurDay !== void 0) daysTd[indexcurDay].classList.add('curDay');
}
createCalendar(data);
var timer;
function refresh() {
 window.clearTimeout(timer);
 var finish = new Date().setHours(24, 0, 0, 0);
 finish -= data;
 timer = window.setTimeout(function() {
 createCalendar(data);
 refresh();
 }, finish);
}
refresh();
 </script>
 <style type="text/css">
 </style>
 </body>
</html>
как вставить в строки 83-159 календарь на год?


народ подскажите, как исправить этот скрипт, чтобы в диве id="calendar_Year" в поле ввода появился текущий год, а в ячейках таблицы вывести названия месяцев и календарь на все месяца этого года ???
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
19.05.2021, 08:21  [ТС]
в скрипте есть массив названий месяцев, строки 177-190, как эти названия вставить в блоки с классом "month_name",

которые находятся в div id="calendar_Year" > div class="content_year" > table id="table_year" > tr > td class="td_month" > div class="month_name"

а в блоки с классом "table_month" вставить календарь на все месяца года, которые находятся в div id="calendar_Year" > div class="content_year" > table id="table_year" > tr > td class="td_month" > div class="month_name" > div class="table_month"
0
19.05.2021, 08:47
 Комментарий модератора 
Блондинка йа,
Цитата Сообщение от Правила форума
4.5 Не стоит ожидать, что на ваш вопрос ответят моментально. Ответ может быть дан как сразу, так и через некоторое время.
Прекращайте каждый час поднимать свою тему и использовать избыточное оформление. Последнее предупреждение.
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
19.05.2021, 12:29  [ТС]
вот пример календаря на год, я просто не знаю js, кто может вывести в скрипте из второго поста календарь на год?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body {
            width: 850px;
        }
        .content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .content h3 {
            width: 100%;
            text-align: left;
            padding-left: 150px;
        }
        .day {
            border: 1px solid #999;
            line-height: 20%;
            text-align: center;
            margin: 1px;
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        .month {
            width: 270px;
            height: 350px;
            margin: 5px;
            border: 1px solid #999;
            border-radius: 4px;
        }
        .month tr:nth-child(n + 7) td.day {
            background-color: hsl(348, 100%, 90%);
            color: hsl(348, 100%, 50%);
        }
        .month tr:nth-child(1) th {
            text-align: center;
        }
        table {
        table-layout fixed;
        width: 100%;
        }
        #minus { position: relative; left: 120px; top: 50px; }
        #plus { position: relative; left: 180px; top: 50px; }
    </style>
</head>
<body>
    <button class="btn year" id="minus" data-up='-1'><</button>
    <button class="btn year" id="plus" data-up='1'>></button><br>
    <div class="content"></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() {
                var html = ['<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
                for (var i = 0; i < this.data.length; i++) {
                    html[i % 7] += '<td class="day">' + this.data[i];
                }
                var title = '<tr><th colspan=7>' + this.month;
                this.element.innerHTML = title + html.join('');
            }
        };
        function createYearCalendar(year, parent) {
            parent.innerHTML = `<h3>${year}</h3>`;
            for (var i = 0; i < 12; i++) {
                var table = document.createElement('table');
                table.className = 'month';
                calendar.element = table;
                calendar.update(thisYear, i);
                calendar.render();
                parent.append(table)
            }
        }
        var thisYear = 2021;
        var parent = document.querySelector('.content')
        createYearCalendar(thisYear, parent);
        document.addEventListener('click', function(event) {
            var target = event.target;
            if (target = target.closest('.btn.year')) {
                event.preventDefault();
                thisYear += +target.dataset.up;
                createYearCalendar(thisYear, parent);
            }
        });
    </script>
</body>
</html>
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
19.05.2021, 23:56  [ТС]
разве нереально на одной странице вывести календарь на месяц и на год? никто не знает как это реализовать?

помогите хотя-бы с календарём на год, (придётся видимо сделать две отдельные страницы), возможно ли в календаре на год вывести таблицы месяцев в такую html-страницу

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<div id="calendar_Year">
 <div id="navigation_panel_year">
 Календарь на 
 <button class="year_minus"><</button>
 <input type="number" size="4" class="calendar_year" id="calendar-Year"/>
 <button class="year_plus">></button> год.<br/>
 <button id="presently_year" style="display: none;">сегодня</button>
 </div>
 <div class="content_year">
 <table id="table_year">
 <tr>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 </tr>
 <tr>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div><div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 </tr>
 <tr>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div></td><td class="td_month"><div class="month_name"></div><div class="table_month"></div></td><td class="td_month"><div class="month_name"></div><div class="table_month"></div></td></tr>
 <tr>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 </tr>
 </table></div>
 </div>
чтобы можно было выровнять ширину таблиц с месяцами, и чтобы было поле ввода для года и кнопки + и -
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
20.05.2021, 12:29  [ТС]
SOS

как сделать чтобы названия месяцев были в дивах class="month_name", а таблица календаря на месяц в дивах class="table_month" ?

а не просто в диве class="content" ?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body {
            width: 850px;
        }
        .content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .content h3 {
            width: 100%;
            text-align: left;
            padding-left: 150px;
        }
        .day {
            border: 1px solid #999;
            line-height: 20%;
            text-align: center;
            margin: 1px;
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        .month {
            width: 270px;
            height: 350px;
            margin: 5px;
            border: 1px solid #999;
            border-radius: 4px;
        }
        .month tr:nth-child(n + 7) td.day {
            background-color: hsl(348, 100%, 90%);
            color: hsl(348, 100%, 50%);
        }
        .month tr:nth-child(1) th {
            text-align: center;
        }
        table {
        table-layout fixed;
        width: 100%;
        }
        #minus { position: relative; left: 120px; top: 50px; }
        #plus { position: relative; left: 180px; top: 50px; }
        
        #calendar_Year { width: 1015px; height: 1726px; padding: 5px; border: 1px solid hsl(0,0%,66%); }
        #navigation_panel_year { width: 973px; border: 1px solid hsl(0,0%,66%); white-space: nowrap; padding: 10px 20px; margin: 0; }
        #table_year { width: 1025px; border: none; margin: 0 0 0 -5px;; padding: 0; border-spacing: 5px; }
        .td_month { width: 330px; height: 375px; border: 1px solid hsl(0,0%,66%); border-radius: 0px/0px; padding: 5px; margin-left: 10px; }
        div.month_name { border: 1px solid hsl(0,0%,66%); padding: 10px 0; margin: 0 0 5px 0; }
        .table_month { border: 1px solid hsl(0,0%,66%); height: 350px; }
        button.year_minus { background-color: hsl(210, 100%, 85%); width: 28px; height: 34px; text-align: center; border-radius: 12px 0 0 12px / 10px 0 0 10px; margin-right: -6px; }
        button.year_plus { background-color: hsl(210, 100%, 85%); width: 28px; height: 34px; text-align: center; border-radius: 0 12px 12px 0 / 0 10px 10px 0; margin-left: -6px; }
        .month_plus { margin-right: 35px; }
        #presently { width: 234px; margin-top: 10px; border-radius: 12px/10px;}
        #calendar_month { width: 89px; display: inline-block; }
        #calendar_year, .calendar_year { width: 54px; display: inline-block; }
        select { height: 34px; }
        #calendar_year, .calendar_year { height: 30px; display: inline-block; text-align: center; }
        button.year_minus, button.year_plus, #calendar_year, .calendar_year { background-color: hsl(210,100%,85%); color: hsl(210,100%,45%); font: 14px serif; border: 1px solid hsl(210,100%,45%); }
        
    </style>
</head>
<body>
    <div id="calendar_Year">
    <div id="navigation_panel_year">
    Календарь на 
    <button class="year_minus"><</button>
    <input type="number" size="4" class="calendar_year" id="calendar-Year"/>
    <button class="year_plus">></button> год.<br/>
    <button id="presently_year" style="display: none;">сегодня</button>
    </div>
    <div class="content_year">
    <table id="table_year">
    <tr>
    <td class="td_month">
    <div class="month_name">
    </div>
    <div class="table_month">
    </div>
    </td>
    <td class="td_month">
    <div class="month_name">
    </div>
    <div class="table_month">
    </div>
    </td>
    <td class="td_month">
    <div class="month_name">
    </div>
    <div class="table_month">
    </div>
    </td>
    </tr>
    <tr>
    <td class="td_month">
    <div class="month_name">
    </div>
    <div class="table_month">
    </div>
    </td>
    <td class="td_month">
    <div class="month_name">
    </div><div class="table_month">
    </div>
    </td>
    <td class="td_month">
    <div class="month_name">
    </div>
    <div class="table_month">
    </div>
    </td>
    </tr>
    <tr>
    <td class="td_month">
    <div class="month_name">
    </div>
    <div class="table_month">
    </div></td><td class="td_month"><div class="month_name"></div><div class="table_month"></div></td><td class="td_month"><div class="month_name"></div><div class="table_month"></div></td></tr>
    <tr>
    <td class="td_month">
    <div class="month_name">
    </div>
    <div class="table_month">
    </div>
    </td>
    <td class="td_month">
    <div class="month_name">
    </div>
    <div class="table_month">
    </div>
    </td>
    <td class="td_month">
    <div class="month_name">
    </div>
    <div class="table_month">
    </div>
    </td>
    </tr>
    </table></div>
    </div>
    
    <button class="btn year" id="minus" data-up='-1'><</button>
    <button class="btn year" id="plus" data-up='1'>></button><br>
    <div class="content"></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() {
                var html = ['<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
                for (var i = 0; i < this.data.length; i++) {
                    html[i % 7] += '<td class="day">' + this.data[i];
                }
                var title = '<tr><th colspan=7>' + this.month;
                this.element.innerHTML = title + html.join('');
            }
        };
        function createYearCalendar(year, parent) {
            parent.innerHTML = `<h3>${year}</h3>`;
            for (var i = 0; i < 12; i++) {
                var table = document.createElement('table');
                table.className = 'month';
                calendar.element = table;
                calendar.update(thisYear, i);
                calendar.render();
                parent.append(table)
            }
        }
        var thisYear = 2021;
        var parent = document.querySelector('.content')
        createYearCalendar(thisYear, parent);
        document.addEventListener('click', function(event) {
            var target = event.target;
            if (target = target.closest('.btn.year')) {
                event.preventDefault();
                thisYear += +target.dataset.up;
                createYearCalendar(thisYear, parent);
            }
        });
    </script>
</body>
</html>
0
Эксперт JS
 Аватар для DrType
6553 / 3624 / 1075
Регистрация: 07.09.2019
Сообщений: 5,877
Записей в блоге: 1
20.05.2021, 12:47
Ну во-первых, вы как-то странно рендерите. В методе render создаётся такой массив:
JavaScript
1
2
3
4
5
6
7

["<tr><td class='day'>Пн.",
"<tr><td class='day'>Вт.",
"<tr><td class='day'>Ср.",
"<tr><td class='day'>Чт.",
"<tr><td class='day'>Пт.",
"<tr><td class='day'>Сб.",
"<tr><td class='day'>Вс."]
Из него валидной разметки не получится.
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
20.05.2021, 21:21  [ТС]
DrType, это вертикальный календарь, в нём дни недели идут в столбик... строка таблицы получается

HTML5
1

<tr><td class='day'>Пн.</td><td>1</td><td>8</td><td>15</td><td>22</td><td>29</td></tr>
Добавлено через 1 час 16 минут
DrType, проблема в том, что сейчас всё кое как работает, но зависит от ширины дива class="content", если уменьшить или увеличить ширину, то измениться количество месяцев в ряд, сейчас 3×4, 3 месяца в ряд и 4 ряда, а надо расположить всё в таблице, чтобы при изменении ширины дива class="content" месяца строго располагались в ячейках таблицы div class="content_year" > table id="table_year"

Добавлено через 2 часа 52 минуты
строка 172
JavaScript
1

var title = '<tr><th colspan=7>' + this.month;
насколько я понимаю выводит название месяца, а как сделать чтобы название месяца было не в строке таблицы <tr><th colspan=7></th></tr>, а в диве class="month_name" ?

строки 179-182
JavaScript
1
2
3

var table = document.createElement('table');
table.className = 'month';
calendar.element = table;
насколько я понимаю выводят таблицу календаря на месяц в диве class="content", а как сделать чтобы эта таблица выводилась в диве class="table_month"?

Добавлено через 4 часа 9 минут
попробую объяснить по другому

сейчас скрипт генерирует 12 таблиц такого вида

HTML5
1
2
3
4
5
6
7
8
9
10

<table>
<tr><th colspan=7></th></tr>
<tr><td class='day></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class='day></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class='day></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class='day></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class='day></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class='day></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class='day></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
а надо сделать чтобы скрипт генерировал таблицу обёрнутую в див, а вместо первой строки таблицы <tr><th>название месяца</th></tr> надо название месяца вывести в диве class="month_name"

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<td class="td_month">
<div class="month_name">
</div>
<div class="table_month">
<table>
<tr><td class='day></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class='day></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class='day></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class='day></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class='day></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class='day></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class='day></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</div>
</td>
а лучше не сгенерировать, а просто вставить в готовые html-теги, которые уже прописаны в коде страницы...
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
21.05.2021, 17:43  [ТС]
DrType, попробуй посмотреть этот календарь в блокноте, нормальная и валидная разметка там,

просто для того чтобы таблица нормально отображалась, ей надо задать ширину в 100% от родительского элемента, а первая строка таблицы с названием месяца не даёт это сделать, другими словами название месяца надо вынести за пределы таблицы, например в отдельный див, и таблицу обернуть в какой нибудь элемент, например в тот же див...
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
22.05.2021, 01:29  [ТС]
DrType,

Цитата Сообщение от DrType Посмотреть сообщение
Ну во-первых, вы как-то странно рендерите. В методе render создаётся такой массив:
JavaScript
1
2
3
4
5
6
7

["<tr><td class='day'>Пн.",
"<tr><td class='day'>Вт.",
"<tr><td class='day'>Ср.",
"<tr><td class='day'>Чт.",
"<tr><td class='day'>Пт.",
"<tr><td class='day'>Сб.",
"<tr><td class='day'>Вс."]
Из него валидной разметки не получится.
разве нельзя рендерить сразу два разных дива с разным контентом, а потом по какому либо событию скрывать один из них?
0
Эксперт JS
 Аватар для DrType
6553 / 3624 / 1075
Регистрация: 07.09.2019
Сообщений: 5,877
Записей в блоге: 1
22.05.2021, 01:38
Да, можно. Надо подумать.
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
22.05.2021, 01:46  [ТС]
думаю что реально в одном диве вывести календарь на месяц, а во втором такой же самый календарь только отображающий 12 месяцев года...
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
22.05.2021, 13:45  [ТС]
DrType, возможно ли сюда срендерить календарь на год?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Baumans&display=swap');
body { width: 1023px; }
body, select, input { font: 14px serif; }
#calendar { width: 330px; height: 375px; display: inline-block; border: 1px solid hsl(0,0%,66%); border-radius: 6px/4px; padding: 5px; margin: 0 0 5px 0; }
#navigation_panel { background-color: hsl(210, 100%, 92%); min-height: 34px; max-height: 78px; border: 1px solid hsl(0,0%,66%); border-radius: 6px/4px; padding: 10px; margin-bottom: 6px; text-align: center; vertical-align: middle;  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
#navigation_panel button, #navigation_panel #calendar_year { background-color: hsl(210, 100%, 85%); color: hsl(210, 100%, 45%); font: 14px serif; border: 1px solid hsl(210, 100%, 45%); }
#calendar_month { background-color: transparent; color: hsl(210,100%,45%); font: 14px serif; border: 1px solid hsl(210, 100%, 45%); }
#navigation_panel button { height: 34px; vertical-align: middle; }
#background_month { background-color: hsl(210, 100%, 85%); display: inline-block; }
button.minus { width: 28px; text-align: center; border-radius: 12px 0 0 12px / 10px 0 0 10px; margin-right: -1px; }
button.plus { width: 28px; text-align: center; border-radius: 0 12px 12px 0 / 0 10px 10px 0; margin-left: -1px; }
.month_plus { margin-right: 35px; }
#presently { width: 234px; margin-top: 10px; border-radius: 12px/10px;}
#calendar_month { width: 89px; display: inline-block; }
#calendar_year { width: 54px; display: inline-block; }
select { height: 34px; }
input { height: 30px; border: 1px solid hsl(0,0%,66%); display: inline-block; text-align: center; }
#table { font-family: 'Baumans', cursive; table-layout: fixed; width: 100%; height: 413px; padding: 2px; }
#table, td { border: 1px solid hsl(0,0%,66%); border-radius: 6px/4px; }
td { margin: 1px; text-align: center; }
#table tbody td.prevMonth { background-color: hsl(210,100%,95%); color: hsl(210,100%,80%); border: 1px solid hsl(0,0%,80%); }
#table tbody tr:nth-child(n + 6) td.prevMonth { background-color: hsl(348,100%,95%); color: hsl(348,100%,80%); border: 1px solid hsl(0,0%,80%); }
.curMonth { background-color: ; }
#table tbody td.nextMonth { background-color: hsl(210,100%,95%); color: hsl(210,100%,80%); border: 1px solid hsl(0,0%,80%); }
#table tbody tr:nth-child(n + 6) td.nextMonth { background-color: hsl(348,100%,95%); color: hsl(348,100%,80%); border: 1px solid hsl(0,0%,80%); }
#presently.hide { display: none; }
#table tbody tr td.week-day { background-color: hsl(210,100%,85%); color: hsl(210,100%,50%); border: 1px solid hsl(0,0%,60%); width: 20%; } /* день недели */
#table tbody tr:nth-child(n + 6) td.week-day { background-color: hsl(348,100%,85%); color: hsl(348,100%,50%); border: 1px solid hsl(0,0%,60%); } /* день недели выходной*/
#table tbody tr td.week-day.curDay { border: 1px solid hsl(210,100%,50%); background-color: hsl(210,100%,75%); color: hsl(210,100%,98%); font-weight: bold; text-shadow: 1px 1px hsl(210,100%,50%), -1px 1px hsl(210,100%,50%), 1px -1px hsl(210,100%,50%), -1px -1px hsl(210,100%,50%), 1px 0 hsl(210,100%,50%), 0 1px hsl(210,100%,50%), -1px 0 hsl(210,100%,50%), 0 -1px hsl(210,100%,50%); letter-spacing: 2px; } /* сегодн день недели */
#table tbody tr:nth-child(n + 6) td.week-day.curDay { border: 1px solid hsl(348,100%,50%); background-color: hsl(348,100%,75%); color: hsl(348,100%,98%); font-weight: bold; text-shadow: 1px 1px hsl(348,100%,50%), 1px -1px hsl(348,100%,50%), -1px 1px hsl(348,100%,50%), -1px -1px hsl(348,100%,50%), 1px 0 hsl(348,100%,50%), -1px 0 hsl(348,100%,50%), 0 1px hsl(348,100%,50%), 0 -1px hsl(348,100%,50%); letter-spacing: 2px; } /* сегодн день недели выходной */
#table tbody td { background-color: hsl(210,100%,90%); color: hsl(210,100%,50%); } /* будние дни текущего месяца */
#table tbody tr:nth-child(n + 6) td{ background-color: hsl(348,100%,90%); color: hsl(348,100%,50%); } /* выходные дни текущего месяца */
#table tbody tr td.curMonth.curDay { background-color: hsl(210,100%,80%); border: 1px solid hsl(210, 100%, 50%); font-weight: bold; color: hsl(210,100%,100%); text-shadow: 1px 1px hsl(210,100%,50%), -1px 1px hsl(210,100%,50%), 1px -1px hsl(210,100%,50%), -1px -1px hsl(210,100%,50%), 1px 0 hsl(210,100%,50%), 0 1px hsl(210,100%,50%), -1px 0 hsl(210,100%,50%), 0 -1px hsl(210,100%,50%); letter-spacing: 3px; } /* сегодня будний */
#table tbody tr:nth-child(n + 6) td.curMonth.curDay { background-color: hsl(348,100%,80%); border: 1px solid hsl(348,100%,50%); color: hsl(348,100%,100%); text-shadow: 1px 1px hsl(348,100%,50%), 1px -1px hsl(348,100%,50%), -1px 1px hsl(348,100%,50%), -1px -1px hsl(348,100%,50%), 1px 0 hsl(348,100%,50%), -1px 0 hsl(348,100%,50%), 0 1px hsl(348,100%,50%), 0 -1px hsl(348,100%,50%); letter-spacing: 3px; } /* сегодня выходной */
 
#calendar { display: flex; flex-direction: column; }
.content_month { flex: 1; }
#table { height:100%; }
 
button, select, input { outline: none; }
 
#calendar_Year { width: 1015px; height: 1726px; padding: 5px; border: 1px solid hsl(0,0%,66%); }
 #navigation_panel_year { width: 973px; border: 1px solid hsl(0,0%,66%); white-space: nowrap; padding: 10px 20px; margin: 0; }
 #table_year { width: 1025px; border: none; margin: 0 0 0 -5px;; padding: 0; border-spacing: 5px; }
 .td_month { width: 330px; height: 375px; border: 1px solid hsl(0,0%,66%); border-radius: 0px/0px; padding: 5px; margin-left: 10px; }
 div.month_name { border: 1px solid hsl(0,0%,66%); padding: 10px 0; margin: 0 0 5px 0; }
 .table_month { border: 1px solid hsl(0,0%,66%); height: 350px; }
 button.year_minus { background-color: hsl(210, 100%, 85%); width: 28px; height: 34px; text-align: center; border-radius: 12px 0 0 12px / 10px 0 0 10px; margin-right: -6px; }
 button.year_plus { background-color: hsl(210, 100%, 85%); width: 28px; height: 34px; text-align: center; border-radius: 0 12px 12px 0 / 0 10px 10px 0; margin-left: -6px; }
 .month_plus { margin-right: 35px; }
 #presently { width: 234px; margin-top: 10px; border-radius: 12px/10px;}
 #calendar_month { width: 89px; display: inline-block; }
 #calendar_year { width: 54px; display: inline-block; }
 select { height: 34px; }
 #calendar_year { height: 30px; display: inline-block; text-align: center;  }
 button.year_minus, button.year_plus, #calendar_year { background-color: hsl(210,100%,85%); color: hsl(210,100%,45%); font: 14px serif; border: 1px solid hsl(210,100%,45%); }
 
 </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="number" size="4" id="calendar_year" />
<button class="year_plus plus">❯</button><br />
<button id="presently">сегодня</button>
</div>
<div class="content_month">
<table id="table">
<tbody></tbody>
</table></div>
</div>
 
<div id="calendar_Year">
 <div id="navigation_panel_year">
 Календарь на 
 <button class="year_minus"><</button>
 <input type="number" size="4" id="calendar_year"/>
 <button class="year_plus">></button> год.<br/>
 <button id="presently_year" style="display: none;">сегодня</button>
 </div>
 <div class="content_year">
 <table id="table_year">
 <tr>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 </tr>
 <tr>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div><div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 </tr>
 <tr>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div></td><td class="td_month"><div class="month_name"></div><div class="table_month"></div></td><td class="td_month"><div class="month_name"></div><div class="table_month"></div></td></tr>
 <tr>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 <td class="td_month">
 <div class="month_name">
 </div>
 <div class="table_month">
 </div>
 </td>
 </tr>
 </table></div>
 </div>
 
 <script>
Date.prototype.reduce = function(callback, value) {
 var year = this.getFullYear();
 var month = this.getMonth();
 var step = new Date(year, month, 1);
 var last = new Date(year, month + 1, 0);
 step.setHours(24 * (0 - ((step.getDay() + 6) % 7)));
 last.setHours(24 * (6 - ((last.getDay() + 6) % 7)));
 for (var i = 0; step <= last; i++) {
 value = callback(value, new Date(+step), i, this);
 step.setHours(24);
 }
 return value;
};
var data = new Date();
var selectMonth = document.querySelector('#calendar_month');
var monthNames = [
 'Январь',
 'Февраль',
 'Март',
 'Апрель',
 'Май',
 'Июнь',
 'Июль',
 'Август',
 'Сентябрь',
 'Октябрь',
 'Ноябрь',
 'Декабрь',
];
monthNames.forEach(function(monthName, i) {
 selectMonth.options[i] = new Option(monthName, i);
});
selectMonth.addEventListener('change', function() {
 data.setMonth(this.value);
 createCalendar(data);
});
var minusMonth = document.querySelector('.month_minus');
minusMonth.addEventListener('click', function() {
 data.setMonth(data.getMonth() - 1);
 createCalendar(data);
});
var plusMonth = document.querySelector('.month_plus');
plusMonth.addEventListener('click', function() {
 data.setMonth(data.getMonth() + 1);
 createCalendar(data);
});
var minusYear = document.querySelector('.year_minus');
minusYear.addEventListener('click', function() {
 data.setYear(data.getFullYear() - 1);
 createCalendar(data);
});
var plusYear = document.querySelector('.year_plus');
plusYear.addEventListener('click', function() {
 data.setYear(data.getFullYear() + 1);
 createCalendar(data);
});
var inputYear = document.querySelector('#calendar_year');
inputYear.addEventListener('input', function() {
 if (/^d{4}$/.test(this.value)) {
 data.setYear(this.value);
 createCalendar(data);
 }
});
var currentButton = document.querySelector('#presently');
currentButton.addEventListener('click', function() {
 data = new Date();
 createCalendar(data);
});
 
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 indexcurDay;
 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');
 indexcurDay = index % 7;
 }
 value[index % 7] += '<td class="' + className + '">' + date;
 return value
 }, ['<tr><td class="week-day">Пн.',
             '<tr><td class="week-day">Вт.',
             '<tr><td class="week-day">Ср.',
             '<tr><td class="week-day">Чт.',
             '<tr><td class="week-day">Пт.',
             '<tr><td class="week-day">Сб.',
             '<tr><td class="week-day">Вс.']);
 document.querySelector('#table tbody').innerHTML = html.join('');
 var daysTd = document.querySelectorAll('.week-day');
 if(indexcurDay !== void 0) daysTd[indexcurDay].classList.add('curDay');
}
createCalendar(data);
var timer;
function refresh() {
 window.clearTimeout(timer);
 var finish = new Date().setHours(24, 0, 0, 0);
 finish -= data;
 timer = window.setTimeout(function() {
 createCalendar(data);
 refresh();
 }, finish);
}
refresh();
 </script>
 </body>
</html>
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
26.05.2021, 14:07  [ТС]
возможно ли сделать чтобы при клике на кнопку id="rotate_table вертикальная таблица менялась на горизонтальную? как тут?

вот код начального календаря

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273

    <!DOCTYPE html>
    <html lang="ru">
    <head>
    <meta charset="utf-8">
    <title>Вертикальный календарь</title>
    <style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Baumans&display=swap');
    body { width: 1023px; }
    body, select, input { font: 14px serif; }
    #calendar { width: 380px; height: 375px; display: inline-block; border: 1px solid hsl(0,0%,66%); border-radius: 6px/4px; padding: 5px; margin: 0 0 5px 0; }
    #navigation_panel {
    background-color: hsl(210,100%,92%);
    width: 359px;
    min-height: 34px; 
    max-height: 78px;
    border: 1px solid hsl(0,0%,66%);
    border-radius: 6px/4px;
    padding: 10px;
    margin-bottom: 5px;
    text-align: center;
    vertical-align: middle; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: flex;
    -webkit-box-align: center; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-box-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap; }
    #navigation_panel button,
    #navigation_panel #calendar_year {
    background-color: hsl(210,100%,85%);
    color: hsl(210,100%,45%);
    font: 14px serif;
    border: 1px solid hsl(210,100%,45%); }
    #calendar_month {
    background-color: transparent;
    color: hsl(210,100%,45%);
    font: 14px serif;
    border: 1px solid hsl(210,100%,45%); }
    #navigation_panel button { 
    height: 34px;
    vertical-align: middle; }
    #background_month {
    background-color: hsl(210,100%,85%);
    display: inline-block; }
    button.minus { 
    width: 28px;
    text-align: center;
    border-radius: 12px 0 0 12px / 10px 0 0 10px;
    margin-right: -1px; }
    button.plus {
    width: 28px;
    text-align: center;
    border-radius: 0 12px 12px 0 / 0 10px 10px 0;
    margin-left: -1px; }
    .month_plus, .year_plus {
    margin-right: 15px; }
    .arrow {
    display: inline-block;
    line-height: 0.5; }
    #rotate_table { width: 34px; text-align: center; border-radius: 5px 18px 18px 5px / 5px 12px 12px 5px; margin: -2px 0 0 0; }
    .arrow { display: inline-block; line-height: 0.5; }
    #presently {
    width: 234px;
    margin-top: 10px;
    border-radius: 12px/10px; }
    #calendar_month {
    width: 89px;
    display: inline-block; }
    #calendar_year {
    width: 54px;
    display: inline-block; }
    select {
    height: 34px; }
    input {
    height: 30px;
    display: inline-block;
    text-align: center; }
    #table {
    font-family: 'Baumans', cursive;
    table-layout: fixed;
    width: 100%;
    height: 413px;
    padding: 2px; }
    #table, td {
    border: 1px solid hsl(0,0%,66%);
    border-radius: 6px/4px; }
    td {
    margin: 1px;
    text-align: center; }
    #table tbody td.prevMonth {
    background-color: hsl(210,100%,95%);
    color: hsl(210,100%,80%);
    border: 1px solid hsl(0,0%,80%); } /* будние дни предыдущего месяца */
    #table tbody tr:nth-child(n + 6) td.prevMonth {
    background-color: hsl(348,100%,95%);
    color: hsl(348,100%,80%);
    border: 1px solid hsl(0,0%,80%); } /* выходные дни предыдущего месяца */
    #table tbody td.nextMonth {
    background-color: hsl(210,100%,95%);
    color: hsl(210,100%,80%);
    border: 1px solid hsl(0,0%,80%); } /* будние дни следующего месяца */
    #table tbody tr:nth-child(n + 6) td.nextMonth {
    background-color: hsl(348,100%,95%);
    color: hsl(348,100%,80%);
    border: 1px solid hsl(0,0%,80%); } /* выходные дни следующего месяца */
    #presently.hide {
    display: none; }
    #table tbody tr td.week-day {
    background-color: hsl(210,100%,85%);
    color: hsl(210,100%,50%);
    border: 1px solid hsl(0,0%,60%);
    width: 20%; } /* день недели */
    #table tbody tr:nth-child(n + 6) td.week-day {
    background-color: hsl(348,100%,85%);
    color: hsl(348,100%,50%);
    border: 1px solid hsl(0,0%,60%); } /* день недели выходной*/
    #table tbody tr td.week-day.curDay {
    border: 1px solid hsl(210,100%,50%);
    background-color: hsl(210,100%,75%);
    color: hsl(210,100%,98%);
    font-weight: bold;
    text-shadow:
    1px 1px hsl(210,100%,50%),
    -1px 1px hsl(210,100%,50%),
    1px -1px hsl(210,100%,50%),
    -1px -1px hsl(210,100%,50%),
    1px 0 hsl(210,100%,50%),
    0 1px hsl(210,100%,50%),
    -1px 0 hsl(210,100%,50%),
    0 -1px hsl(210,100%,50%);
    letter-spacing: 2px; } /* сегодн день недели */
    #table tbody tr:nth-child(n + 6) td.week-day.curDay { border: 1px solid hsl(348,100%,50%); background-color: hsl(348,100%,75%); color: hsl(348,100%,98%); font-weight: bold; text-shadow: 1px 1px hsl(348,100%,50%), 1px -1px hsl(348,100%,50%), -1px 1px hsl(348,100%,50%), -1px -1px hsl(348,100%,50%), 1px 0 hsl(348,100%,50%), -1px 0 hsl(348,100%,50%), 0 1px hsl(348,100%,50%), 0 -1px hsl(348,100%,50%); letter-spacing: 2px; } /* сегодн день недели выходной */
    #table tbody td {
    background-color: hsl(210,100%,90%);
    color: hsl(210,100%,50%); } /* будние дни текущего месяца */
    #table tbody tr:nth-child(n + 6) td{ background-color: hsl(348,100%,90%); color: hsl(348,100%,50%); } /* выходные дни текущего месяца */
    #table tbody tr td.curMonth.curDay { background-color: hsl(210,100%,80%); border: 1px solid hsl(210,100%,50%); font-weight: bold; color: hsl(210,100%,100%); text-shadow: 1px 1px hsl(210,100%,50%), -1px 1px hsl(210,100%,50%), 1px -1px hsl(210,100%,50%), -1px -1px hsl(210,100%,50%), 1px 0 hsl(210,100%,50%), 0 1px hsl(210,100%,50%), -1px 0 hsl(210,100%,50%), 0 -1px hsl(210,100%,50%); letter-spacing: 3px; } /* сегодня будний */
    #table tbody tr:nth-child(n + 6) td.curMonth.curDay { background-color: hsl(348,100%,80%); border: 1px solid hsl(348,100%,50%); color: hsl(348,100%,100%); text-shadow: 1px 1px hsl(348,100%,50%), 1px -1px hsl(348,100%,50%), -1px 1px hsl(348,100%,50%), -1px -1px hsl(348,100%,50%), 1px 0 hsl(348,100%,50%), -1px 0 hsl(348,100%,50%), 0 1px hsl(348,100%,50%), 0 -1px hsl(348,100%,50%); letter-spacing: 3px; } /* сегодня выходной */
    
    #calendar { display: flex; flex-direction: column; }
    .content_month { flex: 1; }
    #table { height:100%; }
    
    button, select, input { outline: none; }
    
     </style>
    </head>
    <body>
    <div id="calendar">
    <div id="navigation_panel">
    <button class="month_minus minus"><span class="arrow">◀</span></button>
    <span id="background_month"><select id="calendar_month"></select></span>
    <button class="month_plus plus"><span class="arrow">▶</span></button>
    <button class="year_minus minus"><span class="arrow">◀</span></button>
    <input type="number" size="4" id="calendar_year"/>
    <button class="year_plus plus"><span class="arrow">▶</span></button>
    <button id="rotate_table"><span class="arrow">➙</span></button><br/>
    <button id="presently">сегодня</button>
    </div>
    <div class="content_month">
    <table id="table">
    <tbody></tbody>
    </table></div>
    </div>
     <script>
    Date.prototype.reduce = function(callback, value) {
     var year = this.getFullYear();
     var month = this.getMonth();
     var step = new Date(year, month, 1);
     var last = new Date(year, month + 1, 0);
     step.setHours(24 * (0 - ((step.getDay() + 6) % 7)));
     last.setHours(24 * (6 - ((last.getDay() + 6) % 7)));
     for (var i = 0; step <= last; i++) {
     value = callback(value, new Date(+step), i, this);
     step.setHours(24);
     }
     return value;
    };
    var data = new Date();
    var selectMonth = document.querySelector('#calendar_month');
    var monthNames = [ 'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь',];
    monthNames.forEach(function(monthName, i) {
     selectMonth.options[i] = new Option(monthName, i);
    });
    selectMonth.addEventListener('change', function() {
     data.setMonth(this.value);
     createCalendar(data);
    });
    var minusMonth = document.querySelector('.month_minus');
    minusMonth.addEventListener('click', function() {
     data.setMonth(data.getMonth() - 1);
     createCalendar(data);
    });
    var plusMonth = document.querySelector('.month_plus');
    plusMonth.addEventListener('click', function() {
     data.setMonth(data.getMonth() + 1);
     createCalendar(data);
    });
    var minusYear = document.querySelector('.year_minus');
    minusYear.addEventListener('click', function() {
     data.setYear(data.getFullYear() - 1);
     createCalendar(data);
    });
    var plusYear = document.querySelector('.year_plus');
    plusYear.addEventListener('click', function() {
     data.setYear(data.getFullYear() + 1);
     createCalendar(data);
    });
    var inputYear = document.querySelector('#calendar_year');
    inputYear.addEventListener('input', function() {
     if (/^\d{4}$/.test(this.value)) {
     data.setYear(this.value);
     createCalendar(data);
     }
    });
    var currentButton = document.querySelector('#presently');
    currentButton.addEventListener('click', function() {
     data = new Date();
     createCalendar(data);
    });
    
    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 indexcurDay;
     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');
     indexcurDay = index % 7;
     }
     value[index % 7] += '<td class="' + className + '">' + date;
     return value
     }, ['<tr><td class="week-day">Пн.',
                 '<tr><td class="week-day">Вт.',
                 '<tr><td class="week-day">Ср.',
                 '<tr><td class="week-day">Чт.',
                 '<tr><td class="week-day">Пт.',
                 '<tr><td class="week-day">Сб.',
                 '<tr><td class="week-day">Вс.']);
     document.querySelector('#table tbody').innerHTML = html.join('');
     var daysTd = document.querySelectorAll('.week-day');
     if(indexcurDay !== void 0) daysTd[indexcurDay].classList.add('curDay');
    }
    createCalendar(data);
    var timer;
    function refresh() {
     window.clearTimeout(timer);
     var finish = new Date().setHours(24, 0, 0, 0);
     finish -= data;
     timer = window.setTimeout(function() {
     createCalendar(data);
     refresh();
     }, finish);
    }
    refresh();
     </script>
     </body>
    </html>
надо сделать чтобы при нажатии кнопки таблица стала такой

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Календарь для сайта с помощью Javascript</title>
   <meta name="description" content="Пример создания компактного календаря для сайта, с помощью javascript и CSS3" />
    <meta name="keywords" content="календарь для сайта, скрипт календаря для сайта, css3 стили календаря, javascript календаря, создать календарь" />
   <style type="text/css">
       /*** dbmast.ru ***/
body {
    background-color:#FAFDFF; 
    margin:0px; padding:0px;
}
b {
    color:#00008B
}
.day{
max-width: 980px;
margin: 0 auto;
padding: 25px 10px 0;
}
       
 
table.calendar {
    width:200px;
    margin: 0 auto;
    border: 1px solid #ababab;
    background: #f4f4f4;  
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal; 
    font-size: 12px;
    padding: 3px;
}
td.in_month {
    text-align: center; 
    font-weight: normal; 
    font-size: 12px; 
    border: 1px solid #bababa;
    border-radius: 2px;
    -webkit-border-radius: 2px;/*Safari, Chrome*/
    -moz-border-radius: 2px;/*Firefox*/
    background: #ddd;
    background: -moz-linear-gradient(90deg, #BFBFBF 0, #F6F0EA 100%);/* FF3.6+ */
    background: -webkit-gradient(linear, 90deg, color-stop(0, BFBFBF), color-stop(100%, F6F0EA));/* Chrome,Safari4+ */
    background: -webkit-linear-gradient(90deg, #BFBFBF 0, #F6F0EA 100%);/* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(90deg, #BFBFBF 0, #F6F0EA 100%);/* Opera 11.10+ */
    background: -ms-linear-gradient(90deg, #BFBFBF 0, #F6F0EA 100%);/* IE10+ */   
}       
table.calendar caption {
    border: 1px solid #ababab;    
    border-bottom: none;
    font-size: 14px;
    font-weight: bold;
    height: 28px;
    line-height: 2.2; 
    text-shadow: 0 1px 1px #fff;
    background: -moz-linear-gradient(90deg, #BFBFBF 0, #F6F0EA 100%);/* FF3.6+ */
    background: -webkit-gradient(linear, 90deg, color-stop(0, BFBFBF), color-stop(100%, F6F0EA));/* Chrome,Safari4+ */
    background: -webkit-linear-gradient(90deg, #BFBFBF 0, #F6F0EA 100%);/* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(90deg, #BFBFBF 0, #F6F0EA 100%);/* Opera 11.10+ */
    background: -ms-linear-gradient(90deg, #BFBFBF 0, #F6F0EA 100%);/* IE10+ */
}       
table.calendar th{
    color: green;
}
table.calendar td.selected { 
    background: #00c400; 
background: -moz-linear-gradient(270deg, #16B831 0, #42FF94 100%);/* FF3.6+ */
background: -webkit-gradient(linear, 270deg, color-stop(0, 16B831), color-stop(100%, 42FF94));/* Chrome,Safari4+ */
background: -webkit-linear-gradient(270deg, #16B831 0, #42FF94 100%);/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(270deg, #16B831 0, #42FF94 100%);/* Opera 11.10+ */
background: -ms-linear-gradient(270deg, #16B831 0, #42FF94 100%);/* IE10+ */
    font-weight: normal; 
    font-size: 10px; 
}
table.calendar a {
    display: block; 
    font-weight: bold; 
    text-decoration: none; 
    color: #4e4ead;  
    text-align: center; 
    font-size: 10px; 
}
table.calendar caption a {
    display: inline;
    font-weight: bold;
    font-size: 10px;
    color: #898989;
    text-shadow: 0 1px 1px #fff;
}       
</style>
<script type="text/javascript">
if (!fcp)
    var fcp = new Object();
if (!fcp.msg)
    fcp.msg = new Object();
if (!fcp)
    var fcp = new Object();
if (!fcp.msg)
    fcp.msg = new Object();
fcp.week_days = ["Пн", "Вт", "Ср", "Чт", "Пн", "Сб", "Вс"];
fcp.months = ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь",
    "Июль", "Август", "сентябрь", "Октябрь", "Ноябрь", "Декабрь"];
fcp.msg.prev_year = "предыдущий год";
fcp.msg.prev_month = "предыдущий месяц";
fcp.msg.next_month = "следующий месяц";
fcp.msg.next_year = "следующий год";
fcp.Calendar = function(element, show_clock) {
if (!element.childNodes)
throw "HTML element expected";
this.element = element;
this.selection = new Date();
this.show_clock = show_clock;
this.selected_cell = undefined;
this.generate_month();
this.render_calendar();
}
fcp.Calendar.prototype.set_date_time = function (date_time) {
    if (date_time.constructor == Date) {
        this.selection = date_time;
        this.generate_month();
        this.render_calendar();
    } else {
        throw "Date object expected (in fcp.Calendar.set_date_time)";
    }
}
fcp.Calendar.prototype.next_month = function () {
    var month = this.selection.getMonth();
    if (month == 11) {
        this.selection.setMonth(0);
        this.selection.setYear(this.selection.getFullYear() + 1);
    } else {
        this.selection.setMonth(month + 1);
    }
    this.generate_month();
    this.render_calendar();
}
fcp.Calendar.prototype.prev_month = function () {
    var month = this.selection.getMonth();
    if (month == 0) {
        this.selection.setMonth(11);
        this.selection.setYear(this.selection.getFullYear() - 1);
    } else {
        this.selection.setMonth(month - 1);
    }
    this.generate_month();
    this.render_calendar();
}
fcp.Calendar.prototype.next_year = function () {
    var is_feb29 = (this.selection.getMonth() == 1)
        && (this.selection.getDate() == 29);
    if (is_feb29) {
        this.selection.setDate(1);
        this.selection.setMonth(2); // March
    }
    this.selection.setFullYear(this.selection.getFullYear() + 1);
    this.generate_month();
    this.render_calendar();
}
fcp.Calendar.prototype.prev_year = function () {
    var is_feb29 = (this.selection.getMonth() == 1)
        && (this.selection.getDate() == 29);
    if (is_feb29) {
        this.selection.setDate(1);
        this.selection.setMonth(2); // March
    }
    this.selection.setFullYear(this.selection.getFullYear() - 1);
    this.generate_month();
    this.render_calendar();
}
fcp.Calendar.prototype.generate_month = function () {
    this.raw_data = new Array();
    var week = 0;
    this.raw_data[week] = new Array(7);
    var first_of_month = fcp.Calendar.clone_date(this.selection);
    first_of_month.setDate(1);
    var first_weekday = first_of_month.getDay();
    first_weekday = (first_weekday == 0) ? 6 : first_weekday - 1;
    for (var i = 0; i < first_weekday; i++) {
        this.raw_data[week][i] = 0;
    }
    var last_of_month = fcp.Calendar.days_in_month(
        this.selection.getYear(),
        this.selection.getMonth());
    var weekday = first_weekday;
    for (var i = 1; i <= last_of_month; i++) {
        this.raw_data[week][weekday] = i;
        weekday++;
        if (weekday > 6) {
            weekday = 0;
            week++;
            this.raw_data[week] = new Array(7);
        }
    }
    for (var i = weekday; i < 7; i++) {
        this.raw_data[week][i] = 0;
    }
}
fcp.Calendar.prototype.render_calendar = function () {
    this.element.selected_cell = undefined;
    this.element.innerHTML = "";
    this.element.appendChild(this.render_month());
}
fcp.Calendar.prototype.render_heading = function () {
    var heading = document.createElement("caption");
    var prev_year = document.createElement("a");
    prev_year.href = "#";
    prev_year.calendar = this;
    prev_year.onclick = function() {
        this.calendar.prev_year();
        return false;
    };
    prev_year.innerHTML = "<<";
    prev_year.title = fcp.msg.prev_year;
    var prev_month = document.createElement("a");
    prev_month.href = "#";
    prev_month.calendar = this;
    prev_month.onclick = function() {
        this.calendar.prev_month();
        return false;
    };
    prev_month.innerHTML = "<";
    prev_month.title = fcp.msg.prev_month;
    var month_year = document.createTextNode(
        "\u00a0" + fcp.months[this.selection.getMonth()]
        + " " + this.selection.getFullYear() + "\u00a0");
    var next_month = document.createElement("a");
    next_month.href = "#";
    next_month.calendar = this;
    next_month.onclick = function() {
        this.calendar.next_month();
        return false;
    };
    next_month.innerHTML = ">";
    next_month.title = fcp.msg.next_month;
    var next_year = document.createElement("a");
    next_year.href = "#";
    next_year.calendar = this;
    next_year.onclick = function() {
        this.calendar.next_year();
        return false;
    };
    next_year.innerHTML = ">>";
    next_year.title = fcp.msg.next_year;
    heading.appendChild(prev_year);
    heading.appendChild(document.createTextNode("\u00a0"));
    heading.appendChild(prev_month);
    heading.appendChild(month_year);
    heading.appendChild(next_month);
    heading.appendChild(document.createTextNode("\u00a0"));
    heading.appendChild(next_year);
    return heading;
}
fcp.Calendar.prototype.render_month = function() {
    var html_month = document.createElement("table");
    html_month.className = "calendar";
    html_month.appendChild(this.render_heading());
    var thead = document.createElement("thead");
    var tr = document.createElement("tr");
    for (var i = 0; i < fcp.week_days.length; i++) {
        var th = document.createElement("th");
        th.innerHTML =  fcp.week_days[i];
        tr.appendChild(th);
    }
    thead.appendChild(tr);
    html_month.appendChild(thead);
    var tbody = document.createElement("tbody");
    for (var i = 0; i < this.raw_data.length; i++) {
        tbody.appendChild(this.render_week(this.raw_data[i]));
    }
    html_month.appendChild(tbody);
    return html_month;
}
fcp.Calendar.prototype.render_week = function (day_numbers) {
    var html_week = document.createElement("tr");
    html_week.align = "right";
    for (var i = 0; i < 7; i++) {
        html_week.appendChild(this.render_day(day_numbers[i]));
    }
    return html_week;
}
fcp.Calendar.prototype.render_day = function (day_number) {
    var td = document.createElement("td");
    if (day_number >= 1 && day_number <= 31) {
        var anchor = document.createElement("a");
        anchor.href = "#";
        anchor.innerHTML = day_number;
        anchor.calendar = this;
        anchor.date = day_number;
        anchor.onclick = fcp.Calendar.handle_select;
        td.appendChild(anchor);
        if (day_number == this.selection.getDate()) {
            this.selected_cell = td;
            td.className = "in_month selected";
        } else {
            td.className = "in_month";
        }
    }
    return td;
}
fcp.Calendar.prototype.onselect = function () {}
fcp.Calendar.clone_date = function (date_obj) {
    if (date_obj.constructor != Date)
        throw "Date object expected (in fcp.Calendar.clone_date)";
    else
        return new Date(
            date_obj.getFullYear(),
            date_obj.getMonth(),
            date_obj.getDate(),
            date_obj.getHours(),
            date_obj.getMinutes(),
            date_obj.getSeconds());
}
fcp.Calendar.days_in_month = function (year, month) {
    if (month < 0 || month > 11)
        throw "Month must be between 0 and 11";
    var day_count = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    if (month != 1) {
        return day_count[month];
    } else if ((year % 4) != 0) {
        return 28;
    } else if ((year % 400) == 0) {
        return 29;
    } else if ((year % 100) == 0) {
        return 28;
    } else {
        return 29;
    }
}
fcp.Calendar.handle_select = function () {
    if (this.calendar.selected_cell)
    this.calendar.selected_cell.className = "in_month";
    this.calendar.selected_cell = this.parentNode;
    this.parentNode.className = "in_month selected";
    this.calendar.selection.setDate(this.date);
    this.calendar.onselect(this.calendar.selection);
    return false;
}
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
  cal = new fcp.Calendar(document.getElementById("cal_placeholder"));
  cal.onselect = function(date) {alert(date);}; } )
//-->
</script>
</head>
<body>
<div class="day">
<div id="cal_placeholder"></div>
</div>
</body>
</html>
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
27.05.2021, 00:17  [ТС]
SOS, почему не работает скрипт? что не так с строками 106,107 ?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
        <style>
          #table_year {
          table-layout: fixed;
          width: 100%;
          border: 1px solid hsl(0, 0%, 66%);
          border-radius: 4px;
          }
          .td_month {
          width: 260px;
          height: 270px;
          border: 1px solid hsl(0, 0%, 66%);
          border-radius: 4px;
          }
          #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: 790px;
          border: 1px solid hsl(0, 0%, 66%);
          border-radius: 4px;
          padding: 5px;
          margin: 0 0 5px 0;
          }
          #month {
          display: inline-block;
          border: 1px solid hsl(0, 0%, 66%);
          border-radius: 4px;
          padding: 5px;
          width: auto;
          }
          #month_name {
          border: 1px solid hsl(0, 0%, 66%);
          border-radius: 4px;
          padding: 5px;
          margin: 0 0 5px 0;
          }
          .day {
          border: 1px solid hsl(0, 0%, 66%);
          width: auto;
          line-height: 30px;
          text-align: center;
          margin: 1px;
          background-color: hsl(210, 100%, 95%);
          color: hsl(210, 100%, 50%);
          }
          .table_month {
          table-layout: fixed;
          width: 100%;
          height: 220px;
          border: 1px solid hsl(0, 0%, 66%);
          border-radius: 4px;
          }
          .week_day {
          width: 20%;
          background-color: hsl(210, 100%, 50%);
          color: hsl(210, 100%, 95%);
          }
          .table_month tr:nth-child(n + 6) td.day {
          background-color: hsl(340, 100%, 95%);
          color: hsl(340, 100%, 50%);
          }
          .table_month tr:nth-child(1) th {
          text-align: center;
          }
        </style>
        </head>
        <body>
        <div id="num_year"></div>
        <table id="table_year">
        <tr><td class="td_month"></td><td class="td_month"></td><td class="td_month"></td></tr>
        <tr><td class="td_month"></td><td class="td_month">
        <div id="month">
        <div id="month_name"></div>
        <table class="table_month"></table>
        </div>
        </td><td class="td_month"></td></tr>
        <tr><td class="td_month"></td><td class="td_month"></td><td class="td_month"></td></tr>
        <tr><td class="td_month"></td><td class="td_month"></td><td class="td_month"></td></tr>
        <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() {
          var html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
          for (var i = 0; i < 12; i < this.data.length; i++) {
          html[i % 7] += '<td class="day">' + this.data[i];
          }
          this.numYear.textContent = this.year;
          this.monthName.textContent = this.month;
          this.element.innerHTML = html.join('');
          },
          };
          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');
          calendar.update(thisYear, thisMonth);
          calendar.render();
        </script>
    </body>
    </html>
0
Эксперт JS
 Аватар для DrType
6553 / 3624 / 1075
Регистрация: 07.09.2019
Сообщений: 5,877
Записей в блоге: 1
27.05.2021, 00:29
Так у вас там синтаксическая ошибка. i должна до 7 изменяться, а не до 12; значит следует
JavaScript
107

for (var i = 0; i < this.data.length; i++) {
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
27.05.2021, 00:33  [ТС]
DrType, возможно ли вывести все 12 месяцев года? и как сделать чтобы ячейкам с названием дней недели присваивался класс?
0
 Аватар для Tavashi
1172 / 762 / 194
Регистрация: 21.05.2016
Сообщений: 1,858
27.05.2021, 03:40
Лучший ответ Сообщение было отмечено Блондинка йа как решение

Решение

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <style>
          #table_year {
            table-layout: fixed;
            width: 100%;
            border: 1px solid hsl(0, 0%, 66%);
            border-radius: 4px;
          }
 
          .td_month {
            width: 260px;
            height: 270px;
            border: 1px solid hsl(0, 0%, 66%);
            border-radius: 4px;
          }
 
          #num_year,
          #January,
          #February, 
          #March,
          #April, 
          #May,
          #June, 
          #July,
          #August, 
          #September,
          #October, 
          #November,
          #December {
            background-color: hsl(210, 100%, 95%);
            color: hsl(210, 100%, 50%);
            font: bold 18px serif;
            text-align: center;
          }
 
          #num_year {
            width: auto;
            border: 1px solid hsl(0, 0%, 66%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px 0;
          }
 
          #month1,
          #month2,
          #month3,
          #month4,
          #month5,
          #month6,
          #month7,
          #month8,
          #month9,
          #month10,
          #month11,
          #month12 {
            display: inline-block;
            border: 1px solid hsl(0, 0%, 66%);
            border-radius: 4px;
            padding: 5px;
            width: auto;
          }
 
          .day {
            border: 1px solid hsl(0, 0%, 66%);
            width: auto;
            line-height: 30px;
            text-align: center;
            margin: 1px;
            background-color: hsl(210, 100%, 95%);
            color: hsl(210, 100%, 50%);
          }
 
          .table_month {
            table-layout: fixed;
            width: 100%;
            height: 220px;
            border: 1px solid hsl(0, 0%, 66%);
            border-radius: 4px;
          }
 
          .week_day {
            width: 20%;
            background-color: hsl(210, 100%, 50%);
            color: hsl(210, 100%, 95%);
          }
 
          .table_month tr:nth-child(n + 6) td.day {
            background-color: hsl(340, 100%, 95%);
            color: hsl(340, 100%, 50%);
          }
 
          .table_month tr:nth-child(1) th {
            text-align: center;
          }
 
        </style>
      </head>
 
      <body>
        <div id="num_year"></div>
        <table id="table_year">
          <tr>
            <td class="td_month">
              <div id="month1">
                <div id="January"></div>
                <table class="table_month"></table>
              </div>
            </td>
            <td class="td_month">
              <div id="month2">
                <div id="February"></div>
                <table class="table_month"></table>
              </div>
            </td>
            <td class="td_month">
              <div id="month3">
                <div id="March"></div>
                <table class="table_month"></table>
              </div>
            </td>
          </tr>
          <tr>
            <td class="td_month">
              <div id="month4">
                <div id="April"></div>
                <table class="table_month"></table>
              </div>
            </td>
            <td class="td_month">
              <div id="month5">
                <div id="May"></div>
                <table class="table_month"></table>
              </div>
            </td>
            <td class="td_month">
              <div id="month6">
                <div id="June"></div>
                <table class="table_month"></table>
              </div>
            </td>
          </tr>
          <tr>
            <td class="td_month">
              <div id="month7">
                <div id="July"></div>
                <table class="table_month"></table>
              </div>
            </td>
            <td class="td_month">
              <div id="month8">
                <div id="August"></div>
                <table class="table_month"></table>
              </div>
            </td>
            <td class="td_month">
              <div id="month9">
                <div id="September"></div>
                <table class="table_month"></table>
              </div>
            </td>
          </tr>
          <tr>
            <td class="td_month">
              <div id="month10">
                <div id="October"></div>
                <table class="table_month"></table>
              </div>
            </td>
            <td class="td_month">
              <div id="month11">
                <div id="November"></div>
                <table class="table_month"></table>
              </div>
            </td>
            <td class="td_month">
              <div id="month12">
                <div id="December"></div>
                <table class="table_month"></table>
              </div>
            </td>
          </tr>
        </table>
        <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() {
              var 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];
              }
              this.numYear.textContent = this.year;
              this.monthName.textContent = this.month;
              this.element.innerHTML = html.join('');
            },
          };
          var today = new Date(),
            thisYear = today.getFullYear(),
            thisMonth = today.getMonth(),
            months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
            
          calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
          calendar.numYear = document.querySelector('#num_year');
          
          months.forEach((v,i) => {
            calendar.monthName = document.querySelector(`#${v}`);
            calendar.element = document.querySelectorAll('.table_month')[i];
            calendar.update(thisYear, i);
            calendar.render();
          })
        </script>
      </body>
    </html>
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
27.05.2021, 03:55  [ТС]
Tavashi, а не подскажешь что с 206 строкой?
JavaScript
1

var html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
вроде-бы указан класс у первой ячейки, но почему-то стили для этого класса не срабатывают?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
 27.05.2021, 03:55
Помогаю со студенческими работами здесь

Как сделать что бы значения из God выводилось не в отдельную ячейку а рядом с названия столбца год пример год 2018
CTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;title&gt;Таблица(Шаблон представления информации о...

Как получить значение позиции курсора(фокуса) в DateTimePicker (день,месяц или год), когда календарь закрыт?
Доброго времени суток. Подскажите, как получить значение позиции курсора(фокуса) в DateTimePicker (день,месяц или год), когда календарь...

Календарь На Год
Привет! В стандартном лотусовом календаре есть соритровки на день, неделю и месяц. Нет на год. Поставлена задача показать календарь...

Календарь на год
Здравствуйте! Хочу сделать календарь событий на год типа как тут http://www.mbo4x4.ru/index.phtml?way=rasp но покрасивее нашел...

Календарь на год
Доброго времени суток, никак не получается решить задачу. Написать программу формирования календаря для любого года, начиная с 1900 (1...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
1 из 2 1 2 »
Новые блоги и статьи
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru