Add to Calendar Button in Framer

Add to Calendar Button in Framer

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

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.

image of Nandi Muzsik

Created by

Add to Calendar Button in Framer
Add to Calendar Button in Framer
Add to Calendar Button in Framer

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

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

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.

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

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

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.

add to calendar code override customization

Add to calendar code override customization.

add to calendar code override customization

Add to calendar code override customization.

add to calendar code override customization

Add to calendar code override 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.

Add to calendar flow on iPhone.

Add to calendar flow on iPhone.

Add to calendar flow on iPhone.

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.

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.

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.

google calendar event creation inferface

Google Calendar event creation UI.

google calendar event creation inferface

Google Calendar event creation UI.

google calendar event creation inferface

Google Calendar event creation UI.

Important

To make sure your 'add to calendar' button is accessible, set the button frame's HTML tag to 'button' in the right panel.

Important

To make sure your 'add to calendar' button is accessible, set the button frame's HTML tag to 'button' in the right panel.

Important

To make sure your 'add to calendar' button is accessible, set the button frame's HTML tag to 'button' in the right panel.

accessibility tag in Framer

Tag can be set under the accessibility section on the right panel.

accessibility tag in Framer

Tag can be set under the accessibility section on the right panel.

accessibility tag in Framer

Tag can be set under the accessibility section on the right panel.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

    Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

    Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

  • Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component

    Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component

    Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component