cleanup and refactor

public/js/modules/calendar.js

@@ -12,7 +12,7 @@ const title = $('cal-title');
 const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
 const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 
-let viewYear, viewMonth; // 0-indexed month
+// Calendar view year/month stored in state.calYear/state.calMonth
 
 function pad(n) { return String(n).padStart(2, '0'); }
 
@@ -146,12 +146,12 @@ function clearCalHover() {
 }
 
 function render() {
-    title.textContent = `${MONTHS[viewMonth]} ${viewYear}`;
+    title.textContent = `${MONTHS[state.calMonth]} ${state.calYear}`;
 
-    const firstDay = new Date(viewYear, viewMonth, 1).getDay(); // 0=Sun
+    const firstDay = new Date(state.calYear, state.calMonth, 1).getDay(); // 0=Sun
     const startOffset = (firstDay + 6) % 7; // Mon=0
-    const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
-    const prevMonthDays = new Date(viewYear, viewMonth, 0).getDate();
+    const daysInMonth = new Date(state.calYear, state.calMonth + 1, 0).getDate();
+    const prevMonthDays = new Date(state.calYear, state.calMonth, 0).getDate();
     const today = new Date();
     const todayStr = dateStr(today.getFullYear(), today.getMonth(), today.getDate());
 
@@ -169,17 +169,17 @@ function render() {
         if (dayNum < 1) {
             // Previous month
             displayNum = prevMonthDays + dayNum;
-            const pm = viewMonth === 0 ? 11 : viewMonth - 1;
-            const py = viewMonth === 0 ? viewYear - 1 : viewYear;
+            const pm = state.calMonth === 0 ? 11 : state.calMonth - 1;
+            const py = state.calMonth === 0 ? state.calYear - 1 : state.calYear;
             ds = dateStr(py, pm, displayNum);
         } else if (dayNum > daysInMonth) {
             // Next month
             displayNum = dayNum - daysInMonth;
-            const nm = viewMonth === 11 ? 0 : viewMonth + 1;
-            const ny = viewMonth === 11 ? viewYear + 1 : viewYear;
+            const nm = state.calMonth === 11 ? 0 : state.calMonth + 1;
+            const ny = state.calMonth === 11 ? state.calYear + 1 : state.calYear;
             ds = dateStr(ny, nm, displayNum);
         } else {
-            ds = dateStr(viewYear, viewMonth, dayNum);
+            ds = dateStr(state.calYear, state.calMonth, dayNum);
         }
         const isToday = ds === todayStr;
         const cards = getCardsForDate(ds);
@@ -317,9 +317,9 @@ function render() {
 
 function navigate(delta) {
     closeDayPopup();
-    viewMonth += delta;
-    if (viewMonth > 11) { viewMonth = 0; viewYear++; }
-    if (viewMonth < 0) { viewMonth = 11; viewYear--; }
+    state.calMonth += delta;
+    if (state.calMonth > 11) { state.calMonth = 0; state.calYear++; }
+    if (state.calMonth < 0) { state.calMonth = 11; state.calYear--; }
     render();
 }
 
@@ -495,8 +495,8 @@ export function refreshCalendar() {
 
 export function openCalendar() {
     const now = new Date();
-    viewYear = now.getFullYear();
-    viewMonth = now.getMonth();
+    state.calYear = now.getFullYear();
+    state.calMonth = now.getMonth();
     render();
     overlay.classList.add('open');
     overlay.style.visibility = '';
@@ -514,8 +514,8 @@ $('cal-prev')?.addEventListener('click', () => navigate(-1));
 $('cal-next')?.addEventListener('click', () => navigate(1));
 $('cal-today')?.addEventListener('click', () => {
     const now = new Date();
-    viewYear = now.getFullYear();
-    viewMonth = now.getMonth();
+    state.calYear = now.getFullYear();
+    state.calMonth = now.getMonth();
     render();
 });
 overlay?.addEventListener('click', e => { if (e.target === overlay) closeCalendar(); });