--- title: "Add To Calendar Pro — Framer component · Best of Framer" description: "$5.00 · Framer component · by Cem Atahan · Buttons. Whether you are hosting a webinar, a design meetup, or a multi-day conference, Add To Calendar Pro provides a friction-less way…" canonical: "https://framer.elliotli.dev/component/add-to-calendar-pro" --- [Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Add To Calendar Pro # Add To Calendar Pro Smart Add to Calendar with CMS & TZ [View on Framer](https://framer.com/marketplace/components/add-to-calendar-pro/?via=elliot-li) ![Add To Calendar Pro preview image 1](https://framer.elliotli.dev/og/component/add-to-calendar-pro/c4020f8f4bb2cae1/1600x1200.jpg) ## Summary 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. ## Description **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 ## 🛠 How to Use: Add To Calendar Pro Follow these steps to integrate the calendar component into your Framer project and connect it to your content. ### 1\. Basic Setup - **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). ### 2\. Styling to Match Your Brand - **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. ### 3\. CMS Integration (Recommended) This component shines when used with Framer CMS for event pages: 1. In your **CMS Collection**, create fields for Start Date, End Date, Location, and Event Title. 2. On your **CMS Template Page**, select the component. 3. Click the **+** (plus icon) next to the properties in the panel and link them to the corresponding CMS fields. ### 4\. Advanced Timing Features - **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. ### 5\. Localization - **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/**](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](mailto:creator.nitso@gmail.com) ## Rank history [How rankings work →](/terms#rankings) - All · #5146 ## Details - **Author**: Cem Atahan - **Price**: $5.00 - **Published**: 2026-02-13 - **Updated**: 2026-02-13 - **Added**: 2026-02-03 - **Categories**: Buttons ## More like this - [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button - [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face - [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover - [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow