---
title: "Calendar Planner — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Aidan Looker · Interactive. What is Calendar Planner?"
canonical: "https://framer.elliotli.dev/component/calendar-planner"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Calendar Planner

# Calendar Planner

An interactive scheduler with presets.

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

![Calendar Planner preview image 1](https://framer.elliotli.dev/og/component/calendar-planner/c88e1dfd9ae1b3c8/1600x1200.jpg)

## Summary

What is Calendar Planner?

## Description

## What is Calendar Planner?

Calendar Planner is a production-ready scheduling component built for Framer. It includes three animated views — month grid, weekly timeline, and agenda list — plus a detail panel and event filters. Ideal for dashboards, SaaS landing pages, portfolio pieces, and booking interfaces that need to look polished on day one.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Three views — Month grid, Week timeline, and Agenda list — with smooth animated transitions
    
-   Detail panel that displays events for the selected date, with priority badges and color-coded type indicators
    
-   Capacity rings on each day cell that visualise event density at a glance
    
-   Filter chips to toggle visibility of Meetings, Tasks, and Personal events
    
-   Dark and Modern themes with horizontal or vertical layout options
    
-   Full color system with ten customisable color tokens including accent, background, card, text, border, today highlight, panel, and per-type event colors
    
-   Year and month dropdown picker for fast navigation
    

## Controls inside Framer

### Events

-   Title, date, start time, end time, type, and priority per event
    
-   Up to 50 events
    

### Display

-   Default View — Month, Week, or Agenda
    
-   Theme — Dark or Modern
    
-   Week Starts — Monday or Sunday
    
-   Layout — Horizontal or Vertical
    

### Colors

-   Accent
    
-   Background, Card, Text, Border, Today, Panel (optional overrides)
    
-   Meetings, Tasks, and Personal type colors
    

### Card Style

-   Radius
    
-   Padding
    
-   Border toggle
    

### Typography

-   Header Size
    
-   Day Size
    

### Font

-   Custom font picker
    

### Features

-   Capacity Rings — colored rings showing event density per day
    
-   Filters — toggle category filter chips
    
-   Side Panel — show or hide the selected-date detail panel
    

## Best use cases

-   SaaS product pages and dashboards that need a realistic calendar UI
    
-   Portfolio and agency sites showcasing scheduling flows
    
-   Startup landing pages demonstrating app functionality above the fold
    

Ship a polished calendar experience in minutes, not days. Drop it in, style it to your brand, and publish.

## Questions or custom requests?

-   We design and build custom Framer components. Get in touch at [contact@teampixel.com.au](mailto:contact@teampixel.com.au).
    

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

-   All · #9180

## Details

- **Author**: Aidan Looker
- **Price**: $14.00
- **Published**: 2026-03-06
- **Updated**: 2026-06-13
- **Added**: 2026-02-28
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase