Calendar Planner

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.

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.