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.
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
Title, date, start time, end time, type, and priority per event
Up to 50 events
Default View — Month, Week, or Agenda
Theme — Dark or Modern
Week Starts — Monday or Sunday
Layout — Horizontal or Vertical
Accent
Background, Card, Text, Border, Today, Panel (optional overrides)
Meetings, Tasks, and Personal type colors
Radius
Padding
Border toggle
Header Size
Day Size
Custom font picker
Capacity Rings — colored rings showing event density per day
Filters — toggle category filter chips
Side Panel — show or hide the selected-date detail panel
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
