---
title: "AddToCalender — Free Framer component · Best of Framer"
description: "Free Framer component · by Doradsn · Buttons. Add Event to your Calendar"
canonical: "https://framer.elliotli.dev/component/addtocalender"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/AddToCalender

# AddToCalender

Add Event to your Calendar

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

![AddToCalender preview image 1](https://framer.elliotli.dev/og/component/addtocalender/31ab41dd87b8c3eb/1600x1200.jpg)

## Summary

Add Event to your Calendar

## Description

## ✨ Features

-   ✅ **Cross-Platform Calendar Support**
    
    -   Opens Google Calendar for most devices
        
    -   Downloads .ics file for Apple/macOS/iOS users
        
-   🎯 **CMS-Compatible**
    
    -   All fields (event name, description, location, etc.) can be connected to CMS collections
        
-   🎨 **Customizable Appearance**
    
    -   Background color and text color
        
    -   Full padding control (top, right, bottom, left)
        
    -   Adjustable border radius
        
-   🖼️ **Custom SVG Icon Support**
    
    -   Paste your own inline <svg>...</svg> markup
        
    -   Adjustable icon size
        
    -   Appears to the left of the button label
        
-   🖱️ **Mild Hover Animation**
    
    -   Slight upward shift
        
    -   Subtle opacity change
        
-   🛠️ **Responsive and Fit-Content Width**
    
    -   Adapts to content
        
    -   Great for inline layouts
        

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

-   All · #3136

## Details

- **Author**: Doradsn
- **Published**: 2025-08-11
- **Updated**: 2026-04-22
- **Added**: 2025-08-02
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything