// ---------- Month Calendar View (Monday start, multi-day bars) ---------- const { useMemo: useMemoCal } = React; const WEEKDAYS_MON = ['월', '화', '수', '목', '금', '토', '일']; function MonthCalendar({ cursor, setCursor, items, tab, onItemClick, onDayDetail, onDayCreate, tabAccent }) { const grid = useMemoCal(() => D.monthGrid(cursor), [cursor]); const weeks = useMemoCal(() => { const out = []; for (let i = 0; i < 6; i++) out.push(grid.slice(i * 7, i * 7 + 7)); return out; }, [grid]); const today = new Date(); const todayISO = D.toISO(today); const curMonth = cursor.getMonth(); const renderWeek = (week, wi) => { const wkStartISO = D.toISO(week[0]); const wkEndISO = D.toISO(week[6]); // collect items visible in this week const evs = items.filter((it) => { const d0 = itemDateISO(it); if (!d0) return false; if (it.tab === 'todo') { const endISO = ((it.endISO || it.startISO || '')).slice(0, 10); return d0 <= wkEndISO && endISO >= wkStartISO; } return d0 >= wkStartISO && d0 <= wkEndISO; }); // sort: multi-day TODO first by start, then single-day by start time evs.sort((a, b) => { const aSpan = a.tab === 'todo' ? (((a.endISO || '').slice(0, 10)) > ((a.startISO || '').slice(0, 10))) : false; const bSpan = b.tab === 'todo' ? (((b.endISO || '').slice(0, 10)) > ((b.startISO || '').slice(0, 10))) : false; if (aSpan !== bSpan) return aSpan ? -1 : 1; const aD = itemDateISO(a) + (a.startISO || '').slice(11); const bD = itemDateISO(b) + (b.startISO || '').slice(11); return aD.localeCompare(bD); }); // lane assignment const lanes = []; const placed = evs.map((it) => { let s = itemDateISO(it); let e = s; if (it.tab === 'todo' && it.endISO) e = it.endISO.slice(0, 10); const startInWk = s < wkStartISO ? 0 : week.findIndex((d) => D.toISO(d) === s); const endInWk = e > wkEndISO ? 6 : week.findIndex((d) => D.toISO(d) === e); let lane = 0; while (lanes[lane] && lanes[lane].some((r) => !(endInWk < r.s || startInWk > r.e))) lane++; if (!lanes[lane]) lanes[lane] = []; lanes[lane].push({ s: startInWk, e: endInWk }); return { it, lane, startInWk: Math.max(0, startInWk), endInWk: Math.max(0, endInWk), contLeft: s < wkStartISO, contRight: e > wkEndISO, }; }); const visibleLanes = 5; // mobile: 3 via CSS const visible = placed.filter((p) => p.lane < visibleLanes); const hiddenPerDay = Array(7).fill(0); placed.forEach((p) => { if (p.lane >= visibleLanes) { for (let d = p.startInWk; d <= p.endInWk; d++) hiddenPerDay[d]++; } }); return (
{week.map((d, di) => { const iso = D.toISO(d); const inMonth = d.getMonth() === curMonth; const isToday = iso === todayISO; const dow = di; // 0..6 (Mon..Sun) const isWeekend = dow >= 5; return ( ); })}
{visible.map((p, idx) => { const left = (p.startInWk / 7) * 100; const width = ((p.endInWk - p.startInWk + 1) / 7) * 100; const c = COLOR_BY_ID[p.it.color] || COLOR_BY_ID.blue; const done = p.it.tab === 'todo' && p.it.status === 'done'; return ( ); })} {hiddenPerDay.map((n, di) => n > 0 ? ( ) : null )}
); }; return (
{WEEKDAYS_MON.map((w, i) => (
= 5 ? ' wknd' : '')}>{w}
))}
{weeks.map(renderWeek)}
); } window.MonthCalendar = MonthCalendar;