5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tdf6,

About this component

This premium calendar component offers a fully featured, modern interface that lets you showcase tasks and events directly on the calendar for your customers. It includes intuitive month/year navigation, clear visual task indicators, and a dedicated side panel for detailed task information. With extensive customization options and responsive layouts, it adapts seamlessly to your brand.

Calendar Pro component with tasks in the side panel sorted by time.

One click toggle to hide the side panel - perfect for mobile.

Properties

Simply copy the component into your Framer project and customize it effortlessly to match your design.

Smart Date Navigation

Interactive month/year selector with dropdown interface
Smooth navigation between months with arrow controls
Visual indicators for current date and selected dates

Integrated Task/Event Management

Task markers appear as dots on dates with scheduled items
Expandable side panel showing detailed task information
Automatic time-based sorting of daily tasks
Support for multiple tasks per day with time display

Extensive Customization

Complete color theming (backgrounds, accents, text colors)
Typography controls for headers, dates, and task text
Adjustable dimensions for calendar and side panel
Flexible horizontal or vertical layout options

Responsive Design

Adaptive sizing that works across different screen sizes
Flexible layout system (horizontal/vertical orientations)
Optimized touch targets for mobile interactions
Clean, modern aesthetic that fits any design system

property panels for Calendar Pro Framer component

5a:[["$","$L5d",null,{"post":{"id":"0198d22b-b0f5-71b9-9b90-fe45ef673bff","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"dbe65566-cacf-495d-8a4b-458381fefc15","name":"Jotted Studios","slug":"jotted-studios","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"muOYSn2KilVe22KWXwhH","resolved":true,"title":"Calendar Pro","body":"$5e","bodyJson":null,"introduction":"","slug":"calendar-pro","author":{"framerUserId":"dbe65566-cacf-495d-8a4b-458381fefc15","name":"Jotted Studios","slug":"jotted-studios","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/muOYSn2KilVe22KWXwhH/calendar-pro-A3OcOL670RZPsBFFrboEUcOBOw9hMg","metadata":{"tint":{"h":180,"s":25,"l":13},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-15T01:05:24.325Z","updatedAt":"2025-09-19T22:11:57.017Z","publishedAt":"2025-08-22T14:25:35.477Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://calendar-pro.framer.media/","price":"8","paymentUrl":"https://jotted-studios.lemonsqueezy.com/buy/2463f5b3-b11f-492d-ae2f-50f405b1594c","workshop":true,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"MqokIwmJphFwUBuPBtne","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-08-22T14:25:35.477Z","updatedAt":"2025-08-22T14:25:35.477Z","reported":false}}],"$L5f"]

Suggested for you