---
title: "Add to Calendar — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Feux Design · Buttons. This Add to Calendar component automatically adapts to the user’s device and integrates seamlessly into your Framer projects."
canonical: "https://framer.elliotli.dev/component/add-to-calendar"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Add to Calendar

# Add to Calendar

[View on Framer](https://framer.com/marketplace/components/add-to-calendar/?via=elliot-li)

![Add to Calendar preview image 1](https://framer.elliotli.dev/og/component/add-to-calendar/a4806b3462a74475/1600x1200.jpg)

## Summary

This Add to Calendar component automatically adapts to the user’s device and integrates seamlessly into your Framer projects.

## Description

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #8349

## Details

- **Author**: Feux Design
- **Price**: $5.00
- **Published**: 2025-10-03
- **Updated**: 2025-10-03
- **Added**: 2025-09-24
- **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