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
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.
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 UI.
Google Calendar event creation UI.
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.
Tag can be set under the accessibility section on the right panel.
Tag can be set under the accessibility section on the right panel.
Tag can be set under the accessibility section on the right panel.
