diff --git a/public/app.js b/public/app.js
index 775707b..252297a 100644
--- a/public/app.js
+++ b/public/app.js
@@ -235,8 +235,7 @@ function viewSearch() {
// ---- Calendar: agenda built from private ICS links (managed here; fetched and parsed by the server)
const ymd = d => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
-async function loadAgenda(days) {
- const start = new Date(); start.setHours(0, 0, 0, 0);
+async function loadRange(start, days) {
const end = new Date(start); end.setDate(end.getDate() + days);
const last = new Date(end.getTime() - 1);
const q = new URLSearchParams({ from: start.getTime(), to: end.getTime() - 1, fd: ymd(start), td: ymd(last) });
@@ -251,6 +250,7 @@ async function loadAgenda(days) {
for (const list of byDay.values()) list.sort((a, b) => (b.allDay - a.allDay) || ((a.allDay ? 0 : a.start) - (b.allDay ? 0 : b.start)));
return { byDay, errors, start };
}
+const loadAgenda = days => { const start = new Date(); start.setHours(0, 0, 0, 0); return loadRange(start, days); };
const fmtTime = ms => new Date(ms).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
const evRow = e => `${esc(e.title)}
${e.allDay ? 'All day' : fmtTime(e.start) + ' – ' + fmtTime(e.end)}${e.location ? ' · ' + esc(e.location) : ''} · ${esc(e.cal)}
`;
@@ -268,22 +268,67 @@ async function renderAgenda(el, mode) { // Home card (today only)
} catch {}
}
+const now0 = new Date();
+const calState = { y: now0.getFullYear(), m: now0.getMonth(), sel: ymd(now0) };
+
async function viewCalendar() {
- const range = store.get('cal_range', 7);
+ const mode = store.get('cal_view', 'month');
const v = $('#view');
- v.innerHTML = `Calendar
${[[1, 'Today'], [7, '7 days'], [30, '30 days']].map(([n, l]) => `
${l}`).join('')}
-
Calendar
+
${[['month', 'Month'], ['agenda', 'Agenda']].map(([k, l]) => `
${l}`).join('')}
+
No calendars yet. Add a private calendar link to see your events here.
'; $('#ac').onclick = addCalendar; return; }
- const { byDay, errors } = await loadAgenda(range);
- if (!location.hash.startsWith('#/calendar')) return;
- const keys = [...byDay.keys()].sort();
- $('#ag').innerHTML = (keys.map(k => `${esc(dayLabel(k))}
${byDay.get(k).map(evRow).join('')}
`).join('') || 'Nothing coming up
')
- + errors.map(e => `${esc(e)}
`).join('');
- } catch (e) { $('#ag').innerHTML = `${esc(e.message)}
`; }
+ if (!cals.length) { $('#cbody').innerHTML = 'No calendars yet. Add a private calendar link to see your events here.
'; $('#ac').onclick = addCalendar; return; }
+ if (mode === 'month') await renderMonth(); else await renderAgendaList();
+ } catch (e) { const b = $('#cbody'); if (b) b.innerHTML = `${esc(e.message)}
`; }
+}
+
+async function renderAgendaList() {
+ const range = store.get('cal_range', 7);
+ const { byDay, errors } = await loadAgenda(range);
+ if (!location.hash.startsWith('#/calendar') || !$('#cbody')) return;
+ const keys = [...byDay.keys()].sort();
+ $('#cbody').innerHTML = `${[[1, 'Today'], [7, '7 days'], [30, '30 days']].map(([n, l]) => `
${l}`).join('')}
${esc(dayLabel(k))}
${byDay.get(k).map(evRow).join('')}
`).join('') || 'Nothing coming up
')
+ + errors.map(e => `${esc(e)}
`).join('');
+ $('#cbody').querySelectorAll('.seg a[data-n]').forEach(a => a.onclick = e => { e.preventDefault(); store.set('cal_range', +a.dataset.n); viewCalendar(); });
+}
+
+async function renderMonth() {
+ const { y, m } = calState;
+ const first = new Date(y, m, 1), gridStart = new Date(y, m, 1 - first.getDay()); // the Sunday on or before the 1st
+ const { byDay, errors } = await loadRange(gridStart, 42);
+ if (!location.hash.startsWith('#/calendar') || !$('#cbody')) return;
+ const today = ymd(new Date());
+ if (calState.sel < ymd(gridStart) || calState.sel > ymd(new Date(y, m, 1 - first.getDay() + 41))) calState.sel = ymd(first);
+ const cells = [];
+ for (let i = 0; i < 42; i++) {
+ const d = new Date(gridStart); d.setDate(d.getDate() + i);
+ const k = ymd(d), evs = byDay.get(k) || [], other = d.getMonth() !== m;
+ cells.push(``);
+ }
+ $('#cbody').innerHTML = `
+
${first.toLocaleDateString([], { month: 'long', year: 'numeric' })}
+
+ ${['S', 'M', 'T', 'W', 'T', 'F', 'S'].map(d => `${d}`).join('')}
+ ${cells.join('')}
+ ${errors.map(e => `${esc(e)}
`).join('')}`;
+ const showDay = () => {
+ const k = calState.sel, evs = byDay.get(k) || [];
+ $('#dayev').innerHTML = `${esc(dayLabel(k))}
${evs.length ? evs.map(evRow).join('') : '
No events
'}