Embedding an Add to Calendar Button in React

If you are building an event platform or a webinar registration flow in React (or Next.js), providing a seamless "Add to Calendar" experience is critical.

While you could build an ICS file generator from scratch and manually construct Google Calendar URLs, it's often much faster to use pre-generated links.

Building a Simple React Component

Here is a basic example of an AddToCalendar button component in React that supports Google Calendar and Apple Calendar (ICS download):

import React from 'react';
 
type AddToCalendarProps = {
  googleUrl: string;
  icsUrl: string;
};
 
export default function AddToCalendar({ googleUrl, icsUrl }: AddToCalendarProps) {
  return (
    <div className="flex gap-4">
      <a 
        href={googleUrl} 
        target="_blank" 
        rel="noopener noreferrer"
        className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
      >
        Add to Google
      </a>
      <a 
        href={icsUrl} 
        download="event.ics"
        className="px-4 py-2 bg-slate-800 text-white rounded-md hover:bg-slate-900"
      >
        Apple / Outlook
      </a>
    </div>
  );
}

Where do the URLs come from?

To make the component above work, you need the actual googleUrl and icsUrl.

Constructing a Google Calendar URL requires accurately formatting dates into ISO 8601 strings and URL-encoding the title, description, and location. Constructing the ICS file requires hosting a dynamic endpoint that returns the text/calendar content type.

The Invitly Approach

Instead of writing custom backend endpoints, you can simply create your event in Invitly. Invitly will give you permanent, tracked URLs that you can pass directly into your React component props:

<AddToCalendar 
  googleUrl="https://invitlyapp.com/api/events/123/google" 
  icsUrl="https://invitlyapp.com/api/events/123/ics" 
/>

This ensures your dates, timezones, and recurring rules are perfectly handled by Invitly's engine, while your React UI remains clean and completely under your control.