Feature Showcase

Explore the powerful features of Shadcn Big Calendar through interactive demos. Each example includes working code, detailed explanations, and implementation guidance.

Custom className Styling

Apply custom CSS classes to events using the eventPropGetter function. Style events based on categories, priorities, or any custom logic.

Dynamic class assignment
Category-based styling
Full Tailwind CSS support
Easy theme integration
View Demo

Time Display with Events

Show time information alongside event titles using custom event components. Perfect for displaying durations and schedules at a glance.

Custom event rendering
Time format customization
Duration display
Responsive layout
View Demo

Generic Data Props

Extend events with custom data properties and display them in interactive modals. Build rich, data-driven calendar experiences.

TypeScript generics
Custom event metadata
Interactive modals
Type-safe implementation
View Demo

Getting Started

Each feature demo includes complete, working code examples that you can copy and integrate into your own projects. The examples use TypeScript for type safety and follow React best practices with proper hooks usage and memoization.