Add to Calendar
A customizable Add to Calendar button that lets users add events to Apple or Google Calendar with auto device detection and CMS integration.
Make it with Workshop
Build your own component with AI
About this Component
Make it effortless for your users to save events directly to their calendar with a single click. This Add to Calendar component automatically adapts to the user’s device and integrates seamlessly into your Framer projects.
Smart Auto-Detection
The component detects if the user is on an Apple device and automatically provides an iCal file download. On any other device, it redirects them to Google Calendar.
Apple Calendar or Google Calendar
Prefer to choose manually? You can set the default to Apple Calendar, Google Calendar, or let the auto-select do the work.
Fully Customizable
Tailor the button to match your brand, adjust fonts, colors, backgrounds, borders, padding, and hover states. Add icons with adjustable size and spacing for a polished look.
CMS-Ready Integration
Event details like Name, Description, Location, Start Date, and End Date can be linked to CMS collections, making it easy to manage dynamic events at scale.
Flexible Interactions
Trigger Framer Events on Click or Calendar Add, opening up possibilities for animations, tracking, or connecting to other actions in your design.
Perfect for: event websites, webinars, product launches, meetups, or any experience where adding an event to a user’s calendar increases engagement.
