Component

Add to Calendar Button in Framer

This is an override in Framer that you can apply to any button element to turn it into an "add to calendar" button. It adds an event to the user's Apple or Google calendar, depending on their device. Feel free to copy the code override to your project and start using it on your websites.

Created by

Nandi

About the resource

To create this add-to-calendar button, you need to create a code override in your project. You can do that by going into the assets panel on the left, scrolling down to the code section, and then clicking the little plus button. You can then select the code override option, name it 'AddToCal,' and hit create.

You'll see auto-generated code in the file, which you can replace with the code found below. Make sure to save the file with ⌘ + S after pasting in the new code.

About the resource

You'll see auto-generated code in the file, which you can replace with the code found below. Make sure to save the file with ⌘ + S after pasting in the new code.

About the resource

You'll see auto-generated code in the file, which you can replace with the code found below. Make sure to save the file with ⌘ + S after pasting in the new code.

import type { ComponentType } from "react"

export function withAddEventToCalendar(Component): ComponentType {
    return (props) => {
        const { style, ...rest } = props

        const eventName = "Example Event Name"
        const eventDescription = "Even description here."
        const eventLocation = "Specify event location."
        const startDate = "2024-09-10T12:00:00"
        const endDate = "2024-09-10T12:15:00"

        const generateGoogleCalendarUrl = () => {
            const baseUrl = "https://calendar.google.com/calendar/r/eventedit"
            const params = new URLSearchParams({
                text: eventName,
                details: eventDescription,
                location: eventLocation,
                dates: `${startDate.replace(
                    /-|:|\.\d+/g,
                    ""
                )}/${endDate.replace(/-|:|\.\d+/g, "")}`,
            })
            return `${baseUrl}?${params.toString()}`
        }

        const generateICSFile = () => {
            const icsContent = `BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
DTSTART:${startDate.replace(/-|:|\.\d+/g, "")}
DTEND:${endDate.replace(/-|:|\.\d+/g, "")}
SUMMARY:${eventName}
DESCRIPTION:${eventDescription}
LOCATION:${eventLocation}
END:VEVENT
END:VCALENDAR`
            const blob = new Blob([icsContent], {
                type: "text/calendar;charset=utf-8",
            })
            const url = URL.createObjectURL(blob)
            const a = document.createElement("a")
            a.href = url
            a.download = "event.ics"
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
        }

        const handleClick = () => {
            const isAppleDevice =
                /iPhone|iPad|iPod|Mac/.test(navigator.userAgent) &&
                !window.MSStream
            if (isAppleDevice) {
                generateICSFile()
            } else {
                window.open(generateGoogleCalendarUrl(), "_blank")
            }
        }

        return <Component {...rest} style={style} onClick={handleClick} />
    }
}

import type { ComponentType } from "react"

export function withAddEventToCalendar(Component): ComponentType {
    return (props) => {
        const { style, ...rest } = props

        const eventName = "Example Event Name"
        const eventDescription = "Even description here."
        const eventLocation = "Specify event location."
        const startDate = "2024-09-10T12:00:00"
        const endDate = "2024-09-10T12:15:00"

        const generateGoogleCalendarUrl = () => {
            const baseUrl = "https://calendar.google.com/calendar/r/eventedit"
            const params = new URLSearchParams({
                text: eventName,
                details: eventDescription,
                location: eventLocation,
                dates: `${startDate.replace(
                    /-|:|\.\d+/g,
                    ""
                )}/${endDate.replace(/-|:|\.\d+/g, "")}`,
            })
            return `${baseUrl}?${params.toString()}`
        }

        const generateICSFile = () => {
            const icsContent = `BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
DTSTART:${startDate.replace(/-|:|\.\d+/g, "")}
DTEND:${endDate.replace(/-|:|\.\d+/g, "")}
SUMMARY:${eventName}
DESCRIPTION:${eventDescription}
LOCATION:${eventLocation}
END:VEVENT
END:VCALENDAR`
            const blob = new Blob([icsContent], {
                type: "text/calendar;charset=utf-8",
            })
            const url = URL.createObjectURL(blob)
            const a = document.createElement("a")
            a.href = url
            a.download = "event.ics"
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
        }

        const handleClick = () => {
            const isAppleDevice =
                /iPhone|iPad|iPod|Mac/.test(navigator.userAgent) &&
                !window.MSStream
            if (isAppleDevice) {
                generateICSFile()
            } else {
                window.open(generateGoogleCalendarUrl(), "_blank")
            }
        }

        return <Component {...rest} style={style} onClick={handleClick} />
    }
}

import type { ComponentType } from "react"

export function withAddEventToCalendar(Component): ComponentType {
    return (props) => {
        const { style, ...rest } = props

        const eventName = "Example Event Name"
        const eventDescription = "Even description here."
        const eventLocation = "Specify event location."
        const startDate = "2024-09-10T12:00:00"
        const endDate = "2024-09-10T12:15:00"

        const generateGoogleCalendarUrl = () => {
            const baseUrl = "https://calendar.google.com/calendar/r/eventedit"
            const params = new URLSearchParams({
                text: eventName,
                details: eventDescription,
                location: eventLocation,
                dates: `${startDate.replace(
                    /-|:|\.\d+/g,
                    ""
                )}/${endDate.replace(/-|:|\.\d+/g, "")}`,
            })
            return `${baseUrl}?${params.toString()}`
        }

        const generateICSFile = () => {
            const icsContent = `BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
DTSTART:${startDate.replace(/-|:|\.\d+/g, "")}
DTEND:${endDate.replace(/-|:|\.\d+/g, "")}
SUMMARY:${eventName}
DESCRIPTION:${eventDescription}
LOCATION:${eventLocation}
END:VEVENT
END:VCALENDAR`
            const blob = new Blob([icsContent], {
                type: "text/calendar;charset=utf-8",
            })
            const url = URL.createObjectURL(blob)
            const a = document.createElement("a")
            a.href = url
            a.download = "event.ics"
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
        }

        const handleClick = () => {
            const isAppleDevice =
                /iPhone|iPad|iPod|Mac/.test(navigator.userAgent) &&
                !window.MSStream
            if (isAppleDevice) {
                generateICSFile()
            } else {
                window.open(generateGoogleCalendarUrl(), "_blank")
            }
        }

        return <Component {...rest} style={style} onClick={handleClick} />
    }
}

Customization

To customize the event that will be created, you can change the five variables at the start of the code labeled as follows: eventName, eventDescription, eventLocation, startDate, and endDate.

Customization

How it works?

Since the code supports both Apple and Google calendars, it will automatically detect what device the visitor is using and take the appropriate action.

If the visitor is on a Mac, it will download an 'event.ics' file that can be opened to add the event to the Apple Calendar.

If the visitor is using an iPhone and clicks the button, a sleek native Apple Calendar UI will appear where they can finish adding the event to their calendar.

How it works?

Since the code supports both Apple and Google calendars, it will automatically detect what device the visitor is using and take the appropriate action.

If the visitor is on a Mac, it will download an 'event.ics' file that can be opened to add the event to the Apple Calendar.

If the visitor is using an iPhone and clicks the button, a sleek native Apple Calendar UI will appear where they can finish adding the event to their calendar.

How it works?

Since the code supports both Apple and Google calendars, it will automatically detect what device the visitor is using and take the appropriate action.

If the visitor is on a Mac, it will download an 'event.ics' file that can be opened to add the event to the Apple Calendar.

If the visitor is using an iPhone and clicks the button, a sleek native Apple Calendar UI will appear where they can finish adding the event to their calendar.

If the user isn't on an Apple device, it will automatically redirect to a Google Calendar event creation URL with all event details prefilled. The user can simply click save, and the event will be added to their Google Calendar.