94 lines
2.8 KiB
JavaScript
94 lines
2.8 KiB
JavaScript
var WEEKDAYS = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];
|
||
var MONTHS = [
|
||
"Январь", "Февраль", "Март", "Апрель", "Май", "Июнь",
|
||
"Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"
|
||
];
|
||
|
||
var now = new Date();
|
||
var view = { year: now.getFullYear(), month: now.getMonth() };
|
||
var selected = null;
|
||
|
||
var gridEl = document.getElementById("grid");
|
||
var monthNameEl = document.getElementById("monthName");
|
||
var hintEl = document.getElementById("hint");
|
||
|
||
function pad(n) { return (n < 10 ? "0" : "") + n; }
|
||
|
||
function fmt(d) {
|
||
return pad(d.getDate()) + "." + pad(d.getMonth() + 1) + "." + d.getFullYear();
|
||
}
|
||
|
||
function renderWeekdays() {
|
||
document.getElementById("weekdays").innerHTML =
|
||
WEEKDAYS.map(function (w) { return "<span>" + w + "</span>"; }).join("");
|
||
}
|
||
|
||
function render() {
|
||
monthNameEl.textContent = MONTHS[view.month] + " " + view.year;
|
||
|
||
var first = new Date(view.year, view.month, 1);
|
||
var startPad = (first.getDay() + 6) % 7;
|
||
var daysInMonth = new Date(view.year, view.month + 1, 0).getDate();
|
||
var prevDays = new Date(view.year, view.month, 0).getDate();
|
||
|
||
var html = "";
|
||
|
||
for (var i = startPad - 1; i >= 0; i--) {
|
||
html += '<div class="day empty">' + (prevDays - i) + "</div>";
|
||
}
|
||
|
||
for (var d = 1; d <= daysInMonth; d++) {
|
||
var cls = "day";
|
||
var date = new Date(view.year, view.month, d);
|
||
|
||
var isToday =
|
||
date.getFullYear() === now.getFullYear() &&
|
||
date.getMonth() === now.getMonth() &&
|
||
date.getDate() === now.getDate();
|
||
if (isToday) cls += " today";
|
||
|
||
if (selected && fmt(date) === fmt(selected)) cls += " selected";
|
||
|
||
html += '<div class="' + cls + '" data-date="' + fmt(date) + '">' + d + "</div>";
|
||
}
|
||
|
||
var endPad = 7 - ((startPad + daysInMonth) % 7);
|
||
if (endPad < 7) {
|
||
for (var j = 1; j <= endPad; j++) {
|
||
html += '<div class="day empty">' + j + "</div>";
|
||
}
|
||
}
|
||
|
||
gridEl.innerHTML = html;
|
||
}
|
||
|
||
function changeMonth(delta) {
|
||
view.month += delta;
|
||
if (view.month < 0) { view.month = 11; view.year--; }
|
||
if (view.month > 11) { view.month = 0; view.year++; }
|
||
selected = null;
|
||
render();
|
||
}
|
||
|
||
function goToday() {
|
||
now = new Date();
|
||
view = { year: now.getFullYear(), month: now.getMonth() };
|
||
selected = null;
|
||
render();
|
||
}
|
||
|
||
gridEl.addEventListener("click", function (e) {
|
||
var day = e.target.closest(".day");
|
||
if (!day || day.classList.contains("empty")) return;
|
||
selected = new Date(view.year, view.month, parseInt(day.textContent, 10));
|
||
hintEl.textContent = "Выбрано: " + fmt(selected);
|
||
render();
|
||
});
|
||
|
||
document.getElementById("prev").addEventListener("click", function () { changeMonth(-1); });
|
||
document.getElementById("next").addEventListener("click", function () { changeMonth(1); });
|
||
document.getElementById("today").addEventListener("click", goToday);
|
||
|
||
renderWeekdays();
|
||
render();
|