Add to Calendar: hand phones the .ics file instead of a Google link

On a phone the Google Calendar app claims calendar.google.com links and opens
its own home screen, dropping the event. The pop-up now offers one "Add to
Calendar" button that goes to the calendar file on iOS/Android (served inline
so the phone hands it to its calendar) and to the Google event editor on
desktop, with the other route as the second button either way. The .ics is
also folded to RFC 5545 line lengths so Outlook accepts it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-22 06:26:21 -05:00
parent 9249ae6368
commit 2c6b116e9a
3 changed files with 19 additions and 5 deletions
+10 -2
View File
@@ -98,15 +98,23 @@
var details = (EV.meetUrl ? 'Join: ' + EV.meetUrl + '\n' : '') + String(EV.times || '').replace(/\|/g, ' ');
var gcal = 'https://calendar.google.com/calendar/render?action=TEMPLATE&text=' + encodeURIComponent(title) +
'&dates=' + f(st) + '/' + f(en) + '&details=' + encodeURIComponent(details) + '&location=' + encodeURIComponent(EV.meetUrl || '');
// On a phone a calendar.google.com link is claimed by the Google Calendar app, which opens its own
// home screen and throws the event details away. Phones get the calendar file instead: iOS, Android
// and the Google Calendar app all import it straight into the default calendar.
var phone = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent || '');
var row = document.createElement('div');
row.style.cssText = 'display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;';
var btnCss = 'display:block;text-align:center;text-decoration:none;background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.35);' +
'color:#f3c34a;font-size:13px;font-weight:700;padding:10px 8px;border-radius:10px;';
var g = document.createElement('a');
g.href = gcal; g.target = '_blank'; g.rel = 'noopener'; g.textContent = '📅 Google Calendar'; g.style.cssText = btnCss;
g.textContent = '📅 Add to Calendar'; g.style.cssText = btnCss;
if (phone) g.href = '/announce.ics?open=1';
else { g.href = gcal; g.target = '_blank'; g.rel = 'noopener'; }
g.addEventListener('click', done);
var a = document.createElement('a');
a.href = '/announce.ics'; a.setAttribute('download', 'rm-circle-huddle.ics'); a.textContent = '📅 Apple / Outlook'; a.style.cssText = btnCss;
a.style.cssText = btnCss;
if (phone) { a.href = gcal; a.target = '_blank'; a.rel = 'noopener'; a.textContent = 'Google Calendar'; }
else { a.href = '/announce.ics'; a.setAttribute('download', 'rm-circle-huddle.ics'); a.textContent = 'Apple / Outlook'; }
a.addEventListener('click', done);
row.appendChild(g); row.appendChild(a); foot.appendChild(row);
}
+1 -1
View File
@@ -28,5 +28,5 @@
<a class="btn btn-primary" href="/my">Open the dashboard</a>
</div>
</main>
<script src="/app.js"></script> <script src="/announce.js?v=20260916a"></script>
<script src="/app.js"></script> <script src="/announce.js?v=20260922a"></script>
</body></html>