Calendar links on event websites

Why add calendar buttons?

Event pages with calendar buttons see higher attendance rates. Making it easy for visitors to save your event means they won't forget about it. getcal.link lets you do this with plain HTML — no JavaScript SDK, no iFrame, no build step.

Single button (ICS download)

The simplest approach — one link that works with every calendar app:

<a href="https://api.getcal.link/event.ics?title=Tech+Conference+2026&start=2026-06-10T09:00:00Z&end=2026-06-10T17:00:00Z&location=Convention+Center&description=Annual+tech+conference&reminder=60"
   class="calendar-btn">
  Add to Calendar
</a>

When clicked, the browser downloads an .ics file. On mobile, most devices automatically suggest adding it to the calendar app.

Multiple calendar options

Offer provider-specific links so users can add the event in one click without downloading a file. Fetch links from the /links endpoint:

<script>
  async function loadCalendarLinks() {
    const res = await fetch(
      'https://api.getcal.link/links?title=Tech+Conference+2026&start=2026-06-10T09:00:00Z&end=2026-06-10T17:00:00Z&location=Convention+Center'
    );
    const links = await res.json();

    document.getElementById('btn-google').href = links.google_url;
    document.getElementById('btn-outlook').href = links.outlook_url;
    document.getElementById('btn-yahoo').href = links.yahoo_url;
    document.getElementById('btn-ics').href = links.ics_url;
  }
  loadCalendarLinks();
</script>

<div class="calendar-buttons">
  <a id="btn-google" href="#" target="_blank">Google Calendar</a>
  <a id="btn-outlook" href="#" target="_blank">Outlook</a>
  <a id="btn-yahoo" href="#" target="_blank">Yahoo</a>
  <a id="btn-ics" href="#">Download .ics</a>
</div>

Multi-session conferences

For conferences with multiple talks or sessions, generate a separate link for each one. You can template the URLs server-side or build them dynamically:

<!-- Session 1 -->
<div class="session">
  <h3>Opening Keynote — 9:00 AM</h3>
  <a href="https://api.getcal.link/event.ics?title=Opening+Keynote&start=2026-06-10T09:00:00Z&end=2026-06-10T10:00:00Z&location=Main+Hall">
    Add to Calendar
  </a>
</div>

<!-- Session 2 -->
<div class="session">
  <h3>Building with APIs — 10:30 AM</h3>
  <a href="https://api.getcal.link/event.ics?title=Building+with+APIs&start=2026-06-10T10:30:00Z&end=2026-06-10T11:30:00Z&location=Room+A">
    Add to Calendar
  </a>
</div>

Recurring events

For weekly meetups or recurring events, use the rrule parameter:

<a href="https://api.getcal.link/event.ics?title=Weekly+Standup&start=2026-03-02T09:00:00Z&end=2026-03-02T09:30:00Z&rrule=FREQ%3DWEEKLY%3BCOUNT%3D12">
  Add recurring event
</a>

Note: URL-encode the rrule value. ; becomes %3B and = becomes %3D.

Static site generators

Since getcal.link is just URL-based, it works perfectly with static site generators like Astro, Hugo, Next.js, or Jekyll. Build the URL from your event data at build time — no API call needed:

---
// Astro example
const event = {
  title: 'Monthly Meetup',
  start: '2026-04-01T18:00:00Z',
  end: '2026-04-01T20:00:00Z',
  location: 'Community Space',
};
const params = new URLSearchParams(event);
const icsUrl = `https://api.getcal.link/event.ics?${params}`;
---

<a href={icsUrl}>Add to Calendar</a>