60 lines
1.9 KiB
JavaScript
60 lines
1.9 KiB
JavaScript
// ✅ /js/calendar.js
|
|
export function renderCalendar(containerId, onDateSelect) {
|
|
const container = document.getElementById(containerId);
|
|
if (!container) return;
|
|
|
|
let currentDate = new Date();
|
|
let selectedDateStr = '';
|
|
|
|
function drawCalendar(date) {
|
|
container.innerHTML = '';
|
|
const year = date.getFullYear();
|
|
const month = date.getMonth();
|
|
const firstDay = new Date(year, month, 1).getDay();
|
|
const lastDate = new Date(year, month + 1, 0).getDate();
|
|
|
|
const nav = document.createElement('div');
|
|
nav.className = 'nav';
|
|
const prev = document.createElement('button');
|
|
prev.textContent = '◀';
|
|
prev.addEventListener('click', () => {
|
|
currentDate = new Date(year, month - 1, 1);
|
|
drawCalendar(currentDate);
|
|
});
|
|
const title = document.createElement('div');
|
|
title.innerHTML = `<strong>${year}년 ${month + 1}월</strong>`;
|
|
const next = document.createElement('button');
|
|
next.textContent = '▶';
|
|
next.addEventListener('click', () => {
|
|
currentDate = new Date(year, month + 1, 1);
|
|
drawCalendar(currentDate);
|
|
});
|
|
nav.append(prev, title, next);
|
|
container.appendChild(nav);
|
|
|
|
['일','월','화','수','목','금','토'].forEach(day => {
|
|
const el = document.createElement('div');
|
|
el.innerHTML = `<strong>${day}</strong>`;
|
|
container.appendChild(el);
|
|
});
|
|
|
|
for (let i = 0; i < firstDay; i++) container.appendChild(document.createElement('div'));
|
|
|
|
for (let i = 1; i <= lastDate; i++) {
|
|
const btn = document.createElement('button');
|
|
const ymd = `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;
|
|
btn.textContent = i;
|
|
btn.className = (ymd === selectedDateStr) ? 'selected-date' : '';
|
|
btn.addEventListener('click', () => {
|
|
selectedDateStr = ymd;
|
|
drawCalendar(currentDate);
|
|
onDateSelect(ymd);
|
|
});
|
|
container.appendChild(btn);
|
|
}
|
|
}
|
|
|
|
drawCalendar(currentDate);
|
|
}
|
|
|