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

Question

[webe]

Подскажите плиз, может кто-нибдуь подсказать как его лучше реализовать?
Нуэно вывести все дни текущего месяца.
Если в первой неделе есть дни от предыдщего месяца, то показать их.
Если в последней неделе есть дни от следующего месяца, то показать их.

Answer 1

[Alexander Pushkarev]

Писал свой календарь, подсчитать кол-во дней по бокам месяца легко.

Допустим у нас сетка будет 7*6 = 42 ячейки (самый идеальный вариант). Возьмём текущий месяц - ноябрь 2018.
1) Нам надо найти смещение первого дня. Первое число это четверг (4 день) т.е. нам из 42 надо отнять 3 = 39. Это будет смещение.
2) Получить кол-во дней в месяце 30. Также отнять от ячеек. 39 - 30 = 9.
3) Т.к. месяц у нас всегда с первого числа, мы просто рисуем 9 ячеек.

Вот вырезка из моего календаря - https://codesandbox.io/s/4xv39wyr5x
Этой вырезки достаточно для постарения вот этого:

Comments

[webe]

Alexander Pushkarev т.е. мы всегда формируем массив из 42 ячеек , меня просто смущает февраль 2010 года.

Как по мне это не очнеь красиво, но паходу других вариантво нет, если делать динамическое кол-во строк, то календарь будет "скакать"

[Alexander Pushkarev]

webe, 42 для этого и надо, чтобы всегда был один размер. Я дополнил ответ, там пример скинул

Answer 2

[Сёмка Гавриленко]

Если это не обязательно самопис, то можно взять хороший плагин https://fullcalendar.io/

Comments

[webe]

Сёмка Гавриленко нужен именно самопис, ибо там не стандартный функционал, но не получается подобрать оптимальный алгорит отображение месяца

[Сёмка Гавриленко]

webe, подскажите, какой "не стандартный функционал" вам надо реализовать, возможно это уже сделно в стандартных функциях этого плагина :)

Answer 3

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

Вот мой недоделанный самопис на jQ:

<style type="text/css">
#calendar table {
	margin: auto;
	padding: 5px;
	background: linear-gradient(#777, #555, #333, #555) #555;
}

#calendar td {
	cursor: pointer;
	text-align: center;
}

#calendar td:hover {
	background: #159;
}
</style>


<div align="center" id="calc_all">
	<select id="month" class="button" onchange="$.cookie.set({mon: this.value}); createCalendar();" size="1">
		<option value=1>Январь</option>
		<option value=2>Февраль</option>
		<option value=3>Март</option>
		<option value=4>Апрель</option>
		<option value=5>Май</option>
		<option value=6>Июнь</option>
		<option value=7>Июль</option>
		<option value=8>Август</option>
		<option value=9>Сентябрь</option>
		<option value=10>Октябрь</option>
		<option value=11>Ноябрь</option>
		<option value=12>Декабрь</option>
</select>

	<select id="year" class="button" onchange="$.cookie.set({year: this.value}); createCalendar();" size="1"></select>

	<br />
	<div id="calendar"></div>

</div>

<script>
	'use strict';
	var akt_year = new Date().getFullYear(),
		n_y = 9,
		yyyy = akt_year - n_y,
		yyyy_f = akt_year + n_y;

	while (yyyy++ < yyyy_f) {
		$('<option />', { value: yyyy })
		.appendTo($('#year'))
		.text(yyyy);
	}


	function createCalendar() {
		var $elem = $('#calendar');
		$('#month').val(
			$.cookie.get('mon') ? $.cookie.get('mon') : +(new Date().getMonth()) + 1
		);
		$('#year').val ($.cookie.get('year') ? $.cookie.get('year') : akt_year);


		var mon = document.getElementById('month').value - 1; // месяцы от 0 до 11
		var year = document.getElementById('year').value; //$.cookie.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>';
		// console.log("table= ", table);

		$elem.html (table);

	}


	function getDay(date) {
		var day = date.getDay();
		if (day == 0) day = 7;
		return day - 1;
	}

	createCalendar();

</script>

Лежит здесь, но код на странице относится к делегированию. В исходниках - тот, что привёл выше.
В нём используется плагин для работы с кукисами.