Boost your event conversions with a seamless calendar integration for your Framer websites. Whether you are hosting a webinar, a design meetup, or a multi-day conference, Add To Calendar Pro provides a friction-less way for your users to save the date.
Designed with Framer's CMS in mind, this component allows you to map dates and event details dynamically, ensuring your event pages are always up to date without touching any code.
Key Features:
📅 Universal Support: One-click integration for Google Calendar, Apple Calendar, and Microsoft Outlook.
🔗 CMS Ready: Fully compatible with Framer CMS. Map your event titles, dates, and locations directly from your collection fields.
🌍 Smart Timezone Management: Automatic visitor timezone detection or fixed timezone selection to prevent scheduling errors.
🔄 Recurring Events: Support for daily, weekly, monthly, and yearly recurrences via RRULE logic.
🎨 Fully Customizable: Complete control over typography, colors, border-radius, and hover states to match your brand's UI.
📱 Device Aware: Smart logic that identifies the user's device to offer the best calendar format (e.g., direct .ics download for Apple users).
🌐 Localization: Built-in support for English and Turkish, with an "Auto" mode that detects the browser language.
Perfect for:
Webinar Landing Pages
Event & Workshop Directories
Booking & Appointment Sites
Personal Portfolio "Availability" sections
Follow these steps to integrate the calendar component into your Framer project and connect it to your content.
Drag & Drop: Place the Add To Calendar Pro component onto your canvas.
Configure Details: Use the property panel on the right to set your Event Title, Description, and Location.
Set Dates: Enter your start and end dates using the format YYYY-MM-DDTHH:mm:ss (e.g., 2026-02-10T18:00:00).
Theme Colors: Customize the Background, Text, and Border colors.
Hover Effects: Set a Hover Color to provide visual feedback when users interact with the button.
Typography: Use the Font picker to select your brand’s typeface, weight, and size.
Dropdown Toggle: Choose whether to show a dropdown menu with specific calendar providers or a single "Smart Action" button that detects the user's device.
This component shines when used with Framer CMS for event pages:
In your CMS Collection, create fields for Start Date, End Date, Location, and Event Title.
On your CMS Template Page, select the component.
Click the + (plus icon) next to the properties in the panel and link them to the corresponding CMS fields.
Auto Timezone: By default, the component detects the visitor's local timezone. If your event is at a fixed physical location, disable Auto Detect Timezone and select a specific zone (e.g., Europe/Istanbul).
Recurrence: For repeating events (like weekly meetups), select the Repeat frequency and set an optional "Until" date.
Language: Set to Auto to let the component switch between English and Turkish based on the user's browser, or lock it to a specific language.
Label Override: Use the Button Label field if you want to use custom text like "Save my seat" instead of the default "Add to Calendar".
See live: https://add-to-calendar-pro.framer.website/
Refund Policy: Component are delivered instantly upon purchase and cannot be returned once downloaded. Questions? Email: caasoftware90@gmail.com
Cem Atahan
