New
New
New
Guide
- Calendar
- Button
Guide
- Calendar
- Button
Guide
- Calendar
- Button
How to Create an “Add to Calendar” Button in Framer
Need to promote an event on your website? Here’s a slick way to do it in Framer, with an “Add to Calendar” button that just works, whether your visitors are on Apple or Google devices.
Posted by
Nandi
Table of contents
What this does
This override turns any Framer button into a calendar event trigger. When someone clicks it:
On iPhone, it opens a native Apple Calendar prompt.
On Mac, it downloads an ‘event.ics’ file they can open in Apple Calendar.
On other devices, it opens Google Calendar with all the event details prefilled.
No plugins. No third-party services. Just a clean, custom event flow that feels built-in.
Step 1: Add the code override
In Framer, open the Assets panel on the left.
Scroll to the Code section.
Click the little + icon → select Code Override.
Name it something like AddToCal and hit Create.
Framer will generate some boilerplate code, delete that, and replace it with the override code from the Add to Calendar Button resource.
Step 2: Customize your event
At the top of the code, you’ll see five variables at the start of the code labeled as follows: eventName, eventDescription, eventLocation, startDate, and endDate.
Just update these with your own details. You can use any format supported by Google Calendar or the Apple Calendar .ics spec, ISO format like above works great.
What this does
This override turns any Framer button into a calendar event trigger. When someone clicks it:
On iPhone, it opens a native Apple Calendar prompt.
On Mac, it downloads an ‘event.ics’ file they can open in Apple Calendar.
On other devices, it opens Google Calendar with all the event details prefilled.
No plugins. No third-party services. Just a clean, custom event flow that feels built-in.
Step 1: Add the code override
In Framer, open the Assets panel on the left.
Scroll to the Code section.
Click the little + icon → select Code Override.
Name it something like AddToCal and hit Create.
Framer will generate some boilerplate code, delete that, and replace it with the override code from the Add to Calendar Button resource.
Step 2: Customize your event
At the top of the code, you’ll see five variables at the start of the code labeled as follows: eventName, eventDescription, eventLocation, startDate, and endDate.
Just update these with your own details. You can use any format supported by Google Calendar or the Apple Calendar .ics spec, ISO format like above works great.
What this does
This override turns any Framer button into a calendar event trigger. When someone clicks it:
On iPhone, it opens a native Apple Calendar prompt.
On Mac, it downloads an ‘event.ics’ file they can open in Apple Calendar.
On other devices, it opens Google Calendar with all the event details prefilled.
No plugins. No third-party services. Just a clean, custom event flow that feels built-in.
Step 1: Add the code override
In Framer, open the Assets panel on the left.
Scroll to the Code section.
Click the little + icon → select Code Override.
Name it something like AddToCal and hit Create.
Framer will generate some boilerplate code, delete that, and replace it with the override code from the Add to Calendar Button resource.
Step 2: Customize your event
At the top of the code, you’ll see five variables at the start of the code labeled as follows: eventName, eventDescription, eventLocation, startDate, and endDate.
Just update these with your own details. You can use any format supported by Google Calendar or the Apple Calendar .ics spec, ISO format like above works great.
Add to calendar code override customization.
Add to calendar code override customization.
Add to calendar code override customization.
Step 3: Connect the override to your button
Drag any button onto the canvas.
In the right panel, scroll to the Code Overrides section.
Connect your AddToCal override.
Bonus tip: In the same right panel, set the HTML tag to button for better accessibility.
Boom, your button now creates calendar events.
Step 3: Connect the override to your button
Drag any button onto the canvas.
In the right panel, scroll to the Code Overrides section.
Connect your AddToCal override.
Bonus tip: In the same right panel, set the HTML tag to button for better accessibility.
Boom, your button now creates calendar events.
Step 3: Connect the override to your button
Drag any button onto the canvas.
In the right panel, scroll to the Code Overrides section.
Connect your AddToCal override.
Bonus tip: In the same right panel, set the HTML tag to button for better accessibility.
Boom, your button now creates calendar events.
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.
What the user sees
Here’s what the experience looks like, depending on the device:
iPhone: Tapping the button triggers the native Apple Calendar flow, super clean and mobile-friendly.
Mac: Clicking downloads an .ics file that opens in Apple Calendar.
Windows/Android/Other: The user is sent to a Google Calendar page with all the event info filled in, they just hit Save.
It’s automatic. It’s smooth. It feels native, no matter what device someone’s using.
What the user sees
Here’s what the experience looks like, depending on the device:
iPhone: Tapping the button triggers the native Apple Calendar flow, super clean and mobile-friendly.
Mac: Clicking downloads an .ics file that opens in Apple Calendar.
Windows/Android/Other: The user is sent to a Google Calendar page with all the event info filled in, they just hit Save.
It’s automatic. It’s smooth. It feels native, no matter what device someone’s using.
What the user sees
Here’s what the experience looks like, depending on the device:
iPhone: Tapping the button triggers the native Apple Calendar flow, super clean and mobile-friendly.
Mac: Clicking downloads an .ics file that opens in Apple Calendar.
Windows/Android/Other: The user is sent to a Google Calendar page with all the event info filled in, they just hit Save.
It’s automatic. It’s smooth. It feels native, no matter what device someone’s using.
Google Calendar event creation UI.
Google Calendar event creation UI.
Google Calendar event creation UI.
Perfect for:
Event signups
Webinar reminders
Launch parties
Workshops
Community meetups
If you’ve got a date people need to remember, this is the easiest way to help them save it, no friction.
Grab the code and try it yourself
You can copy the full code override from the Add to Calendar Button resource. Drop it into your project, tweak the event details, and start making your site more interactive in seconds.
Perfect for:
Event signups
Webinar reminders
Launch parties
Workshops
Community meetups
If you’ve got a date people need to remember, this is the easiest way to help them save it, no friction.
Grab the code and try it yourself
You can copy the full code override from the Add to Calendar Button resource. Drop it into your project, tweak the event details, and start making your site more interactive in seconds.
Perfect for:
Event signups
Webinar reminders
Launch parties
Workshops
Community meetups
If you’ve got a date people need to remember, this is the easiest way to help them save it, no friction.
Grab the code and try it yourself
You can copy the full code override from the Add to Calendar Button resource. Drop it into your project, tweak the event details, and start making your site more interactive in seconds.
