tk-factory-services/system1-factory/web/js/calendar.js

// ✅ /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);
}