Вывести дни месяца в таблицу

@lilubanana · Регистрация: 25.04.2014

Студворк — интернет-сервис помощи студентам

привет! помогите, пожалуйста, разобраться.
необходимо вывести дни месяца в таблицу по 7 ячеек.
вот так:
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 (количество дней в зависимости от месяца)

сейчас реализован вывод массива с днями недели.

JavaScript
1
<div id="calendar"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body{
    font-size: 18px;
    color:#999;
}
.table{
    display:table;
    border:2px solid hotpink;
    margin:100px auto;
}
td.odd {
    background-color: lightgray;
}
td.even {
    background-color: white;
}

JavaScript
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
'use strict';
var calendarDate = new Date(),
    year = calendarDate.getFullYear(),
    month = calendarDate.getMonth(),
    firstDayInMonth = new Date(year,month+1).getDate(),
    lastDayMonth = new Date(year,month+1,0).getDate(),
    weekDay = ['Пн','Вт','Ср','Чт','Пт','Сб','Вс'],
    divTable = document.createElement('table'),
    newRow = divTable.insertRow(-1);
 
divTable.className = "table";
 
for (var i = 0, I = weekDay.length; i < I; i++){
    var newCell = newRow.insertCell(-1);
    newCell.className = (i%2==0) ? 'odd' : 'even';
    newCell.appendChild(document.createTextNode(weekDay[i]));
 
}
 
 
for (var j = 0; j <= lastDayMonth; j++){
   if(j%7==0){
        var newCell = newRow.insertCell(-1);
        newCell.className = (j%7==0) ? 'odd' : 'even';       
        newRow.appendChild(newCell);
       //как записать дни в td?
   }
 
}
 
divTable.appendChild(newRow);
document.getElementById('calendar').appendChild(divTable);

@Glart · 15.11.2015, 16:05

Ну а смещение задаем исходя из того какой день недели падает на 1 число.

JavaScript
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
var calendarDate = new Date(),
    year = calendarDate.getFullYear(),
    month = calendarDate.getMonth(),
    firstDayInMonth = new Date(year,month+1).getDate(),
    lastDayMonth = new Date(year,month+1,0).getDate(),
    weekDay = ['Пн','Вт','Ср','Чт','Пт','Сб','Вс'],
    divTable = document.createElement('table'),
    newRow = divTable.insertRow(-1);
 
divTable.className = "table";
 
for (var i = 0, I = weekDay.length; i < I; i++){
    var newCell = newRow.insertCell(-1);
    newCell.className = (i%2==0) ? 'odd' : 'even';
    newCell.appendChild(document.createTextNode(weekDay[i]));
}
 newRow = divTable.insertRow(-1);
for (var j = 1; j <= lastDayMonth; j++){
   if(j%7==1){
       newRow = divTable.insertRow(-1);
   }
        var newCell = newRow.insertCell(-1);
        newCell.className = (j%7==0) ? 'odd' : 'even';
    newCell.appendChild(document.createTextNode(j));
}
 
divTable.appendChild(newRow);
document.getElementById('calendar').appendChild(divTable);

@lilubanana · 15.11.2015, 16:17 **[ТС]**

спасибо большое) буду разбираться

@Glart · 15.11.2015, 16:52

Сообщение от Glart

Ну а смещение задаем исходя из того какой день недели падает на 1 число.

JavaScript
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
var calendarDate = new Date(),
    year = calendarDate.getFullYear(),
    month = calendarDate.getMonth(),
    firstDayInMonth = new Date(year,month+1).getDate(),
    lastDayMonth = new Date(year,month+1,0).getDate(),
    weekDay = ['Пн','Вт','Ср','Чт','Пт','Сб','Вс'],
    divTable = document.createElement('table'),
    newRow = divTable.insertRow(-1);
 
divTable.className = "table";
 
for (var i = 0, I = weekDay.length; i < I; i++){
    var newCell = newRow.insertCell(-1);
    newCell.className = (i%2==0) ? 'odd' : 'even';
    newCell.appendChild(document.createTextNode(weekDay[i]));
}
 newRow = divTable.insertRow(-1);
var firstday = [7, 1, 2, 3, 4, 5, 6][new Date(year, month, 1).getDay()];
 
lastDayMonth = lastDayMonth + firstday-1
for (var j = 1; j <= lastDayMonth; j++){
   
        var newCell = newRow.insertCell(-1);
        newCell.className = (j%7==0) ? 'odd' : 'even';
 
    if (j-firstday+1 > 0) { 
 
    newCell.appendChild(document.createTextNode(j-firstday+1));
    } else {
    newCell.appendChild(document.createTextNode(''));
    }
    
        if(j%7==0){
       newRow = divTable.insertRow(-1);
   
   }
 
}
 
divTable.appendChild(newRow);
document.getElementById('calendar').appendChild(divTable);

@lilubanana · 15.11.2015, 17:42 **[ТС]**

спасибо большое за помощь! вроде все просто, но пока сама не могу сделать...((

@Glart · 15.11.2015, 17:53

Комментарии

JavaScript
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
//Создаем новую строку в таблице
newRow = divTable.insertRow(-1);
//Узнаем день недели 1го числа месяца и года (смещение по дням)
var firstday = [7, 1, 2, 3, 4, 5, 6][new Date(year, month, 1).getDay()];
 //Увеличиваем на смещение (что бы цикл знал,сколько в начале оставить пустых клеток)
lastDayMonth = lastDayMonth + firstday-1
//Цикл :)
for (var j = 1; j <= lastDayMonth; j++){
//Создаем ячейку  
var newCell = newRow.insertCell(-1);
//Форматируем ячейку в зависимости от дня недели
newCell.className = (j%7==0) ? 'odd' : 'even';
//Проверяем, прошли мы смещение или нет
if (j-firstday+1 > 0) { //Смещение прошли
 //Выводим день
newCell.appendChild(document.createTextNode(j-firstday+1));
} else { // Не прошли
//Выводим пустую ячейку
newCell.appendChild(document.createTextNode(''));
}
    
if(j%7==0){ //Каждые 7 ячеек (7 дней недели) создаем новую строку (переходим на неделю с начала)
newRow = divTable.insertRow(-1);
}
 
}

@lilubanana · 15.11.2015, 18:01 **[ТС]**

Сообщение от Glart

var firstday = [7, 1, 2, 3, 4, 5, 6][new Date(year, month, 1).getDay()];

это всегда так? т.е. всегда используем эти числа для смещения?

@Glart · 15.11.2015, 18:09

Сообщение от lilubanana

[7, 1, 2, 3, 4, 5, 6]

Вс, Пн, Вт, .... Сб - именно так.

Массив дней в номерном виде

JavaScript
1
[7, 1, 2, 3, 4, 5, 6]

Дальше определяем день недели 1го числа, начинается с ВС (так принято)

JavaScript
1
new Date(year, month, 1).getDay()

В текущем месяце нам вернет 1й день недели - то есть ВС (хотя мы привыкли, что ВС - это 7мой день недели)
Тогда конструкция вида

JavaScript
1
[7, 1, 2, 3, 4, 5, 6][new Date(year, month, 1).getDay()]

Будет иметь вид

JavaScript
1
[7, 1, 2, 3, 4, 5, 6][1]

И следовательно вернет [1] элемент из массива [7, 1, 2, 3, 4, 5, 6] = 7 (мы узнаем что 7й день, для нас ВС и есть первое число месяца)

JavaScript
1
var firstday = [7, 1, 2, 3, 4, 5, 6][new Date(year, month, 1).getDay()];

Новые блоги и статьи Все статьи Все блоги /
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .

Вывести дни месяца в таблицу

Решение

Решение

@lilubanana 64 / 1 / 2 Регистрация: 25.04.2014 Сообщений: 125
	15.11.2015, 16:17 [ТС]
	спасибо большое) буду разбираться 0

@lilubanana 64 / 1 / 2 Регистрация: 25.04.2014 Сообщений: 125
	15.11.2015, 17:42 [ТС]
	спасибо большое за помощь! вроде все просто, но пока сама не могу сделать...(( 0