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

@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()];

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

@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

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

Решение

Решение