// ========== CALENDAR WIDGET (DC-161) ==========
// Zero-config for calendars deployed through DashCaddy (Radicale auto-wiring);
// manual CalDAV/ICS sources via the βοΈ settings modal. Weather-widget pattern:
// compact top-bar display + weather-modal shell + server-backed settings.
(function() {
const errorHandler = new ErrorHandler();
injectModal('calendar-modal', `
π
Calendar
Next 14 days
No upcoming appointments.
+ Add a calendar (CalDAV URL or ICS feed)
`);
const widgetEls = () => ({
icon: document.querySelector('.calendar-widget-icon'),
text: document.querySelector('.calendar-widget-text'),
});
function fmtWhen(start, allDay) {
const d = new Date(start);
const today = new Date(); today.setHours(0, 0, 0, 0);
const day = new Date(d); day.setHours(0, 0, 0, 0);
const days = Math.round((day - today) / 86400000);
const dayLabel = days === 0 ? 'Today' : days === 1 ? 'Tomorrow' :
d.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' });
const timeLabel = allDay ? 'all-day' : d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
return `${dayLabel} ${timeLabel}`;
}
async function fetchCalendar() {
const start = new Date(Date.now() - 86400000);
const end = new Date(Date.now() + 14 * 86400000);
const resp = await fetch(`/api/v1/calendar/events?start=${start.toISOString()}&end=${end.toISOString()}`, { cache: 'no-store' });
if (resp.status === 404) return { notConfigured: true };
if (!resp.ok) throw new Error(`Calendar API HTTP ${resp.status}`);
return resp.json();
}
function renderWidget(body) {
const els = widgetEls();
if (!els.icon || !els.text) return;
const events = (body && Array.isArray(body.events)) ? body.events : [];
if (!events.length) {
els.icon.textContent = 'π
';
els.text.textContent = 'No calendar';
return;
}
const next = events[0];
els.icon.textContent = next.allDay ? 'ποΈ' : 'β°';
els.text.innerHTML = `${escapeHtml(next.title || 'Untitled')}
Β· ${escapeHtml(fmtWhen(next.start, next.allDay))}`;
}
function renderUpcoming(body) {
const list = document.getElementById('calendar-upcoming-list');
if (!list) return;
const events = (body && Array.isArray(body.events)) ? body.events : [];
if (!events.length) {
list.innerHTML = 'No upcoming appointments.
';
return;
}
list.innerHTML = events.slice(0, 12).map(ev =>
`
${escapeHtml(fmtWhen(ev.start, ev.allDay))}
${escapeHtml(ev.title || 'Untitled')}
${ev.location ? `${escapeHtml(ev.location)}` : ''}
`).join('');
}
async function renderSources() {
const listEl = document.getElementById('calendar-sources-list');
if (!listEl) return;
let sources = [];
try {
const resp = await fetch('/api/v1/calendar/sources', { cache: 'no-store' });
if (resp.ok) {
const body = await resp.json();
sources = (body && Array.isArray(body.sources)) ? body.sources
: (Array.isArray(body) ? body : []);
}
} catch (e) { /* modal still usable */ }
if (!sources.length) {
listEl.innerHTML = 'No calendars connected. Deploy Radicale from the App Selector to auto-connect one, or add a CalDAV/ICS URL below.
';
return;
}
listEl.innerHTML = sources.map(s => `
${escapeHtml(s.name || s.id)}
Β· ${escapeHtml(s.type)}${s.autoProvisioned ? ' Β· auto-wired' : ''}
`).join('');
listEl.querySelectorAll('.cal-src-toggle').forEach(btn => btn.addEventListener('click', async () => {
const id = btn.dataset.id;
const enable = btn.dataset.enabled !== '1';
await fetch(`/api/v1/calendar/sources/${encodeURIComponent(id)}`, {
method: 'PUT', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ enabled: enable })
});
renderSources(); refresh();
}));
listEl.querySelectorAll('.cal-src-del').forEach(btn => btn.addEventListener('click', async () => {
const id = btn.dataset.id;
await fetch(`/api/v1/calendar/sources/${encodeURIComponent(id)}`, { method: 'DELETE' });
renderSources(); refresh();
}));
}
async function refresh() {
if (refresh._inFlight) return;
refresh._inFlight = true;
try {
const body = await fetchCalendar();
renderWidget(body);
if (document.getElementById('calendar-modal').style.display === 'flex') {
renderUpcoming(body);
}
} catch (e) {
errorHandler.log(e, 'calendar-widget');
const els = widgetEls();
if (els.text) els.text.textContent = 'Calendar offline';
} finally {
refresh._inFlight = false;
}
}
// ---- Settings modal wiring ----
function openModal() {
document.getElementById('calendar-modal').style.display = 'flex';
renderSources();
refresh();
}
function closeModal() {
document.getElementById('calendar-modal').style.display = 'none';
}
function formCreds() {
return {
type: document.getElementById('cal-add-type').value,
name: document.getElementById('cal-add-name').value.trim(),
url: document.getElementById('cal-add-url').value.trim(),
user: document.getElementById('cal-add-user').value.trim(),
pass: document.getElementById('cal-add-pass').value,
};
}
function setStatus(msg) {
document.getElementById('cal-add-status').textContent = msg;
}
document.getElementById('cal-add-test').addEventListener('click', async () => {
const f = formCreds();
if (!f.url) { setStatus('Enter a URL first.'); return; }
setStatus('Testingβ¦');
try {
const resp = await fetch('/api/v1/calendar/discover', {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url: f.url, user: f.user, pass: f.pass })
});
const body = await resp.json();
const p = body && body.probe;
if (p && p.ok) setStatus(`β Reachable (${p.server || 'server'})${p.looksLikeCalendar ? ' β looks like a calendar' : ''}`);
else setStatus(`β ${p && p.error ? p.error : 'Not reachable'}`);
} catch (e) {
setStatus(`β ${e.message}`);
}
});
document.getElementById('cal-add-save').addEventListener('click', async () => {
const f = formCreds();
if (!f.name || !f.url) { setStatus('Name and URL are required.'); return; }
try {
const resp = await fetch('/api/v1/calendar/sources', {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: f.name, type: f.type, url: f.url, user: f.user, pass: f.pass })
});
if (!resp.ok) {
const body = await resp.json().catch(() => ({}));
setStatus(`β ${body.error || body.message || `HTTP ${resp.status}`}`);
return;
}
setStatus('Saved.');
document.getElementById('cal-add-details').open = false;
['cal-add-name', 'cal-add-url', 'cal-add-user', 'cal-add-pass'].forEach(id => { document.getElementById(id).value = ''; });
renderSources(); refresh();
} catch (e) {
setStatus(`β ${e.message}`);
}
});
const calBtn = document.getElementById('calendar-widget');
if (calBtn) calBtn.addEventListener('click', openModal);
const calSettings = document.getElementById('calendar-settings');
if (calSettings) calSettings.addEventListener('click', (e) => { e.stopPropagation(); openModal(); });
const calClose = document.getElementById('calendar-close');
if (calClose) calClose.addEventListener('click', closeModal);
window.refreshCalendarWidget = refresh;
const POLL = (typeof DC !== 'undefined' && DC.POLL && DC.POLL.CALENDAR) || 300000;
setInterval(refresh, POLL);
setTimeout(refresh, 400);
})();