Как построить сетку календаря на JS?

Question

[DrunkMaster]

Есть массив со всем датами месяца.
Определяем первый день недели месяца:

var first_day = new Date(2017, 6, 1); // июль 2017 начинается с субботы
var first_wday = first_day.getDay(); // 6

Каждые 7 дней при выводе массива добавляем перенос строки, упрощённо br
А как построить первую строчку?
Будет цикл от 0 до 6 условно, но нельзя напрямую сравнить if(0 == first_wday) потому что неделя тогда будет с воскресенья начинаться.
Строить цикл от 1 до 7 тоже нельзя - воскресенье в него не попадёт.

Answer 1

[Александр Синицын]

Дополнить массив дат спереди пустым массивом до полной недели и выводить как есть )

Comments

[DrunkMaster]

Да была такая мысль, думал есть метод проще )

Answer 2

[Павел Корнилов]

Для любого месяца и года:

// Элементы с id month и year должны содержать int значения нужного месяца и года соответственно
		var mon = document.getElementById('month').value - 1; // месяцы от 0 до 11
		var year = document.getElementById('year').value; //Cook.get('year') ||
		// alert(year+' '+mon) //2012
		var d = new Date(year, mon),
			table = '<table id="cal"><tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr><tr>';
		//alert(d)

		for (var i = 0; i < getDay(d); i++) {
			table += '<td></td>';
		}

		// ячейки календаря с датами
		while (d.getMonth() == mon) {
			table += '<td>' + d.getDate() + '</td>';
			if (getDay(d) % 7 == 6) {
				table += '</tr><tr>';
			}
			d.setDate(d.getDate() + 1);
		}

		if (getDay(d) != 0) {
			for (var i = getDay(d); i < 7; i++) {
				table += '<td></td>';
			}
		}

		table += '</tr></table>';

function getDay(date) {
		var day = date.getDay();
		if (day == 0) day = 7;
		return day - 1;
	}
		console.log("table= ", table);