Custom className Styling
Apply custom CSS classes to events based on categories, priorities, or any custom logic
Interactive Demo
Legend
Immediate updates - drag or resize events for instant changes
Meeting
Task
Reminder
Break
Priority Indicators:
High Priority (red border)
Medium Priority (yellow border)
Low Priority (dimmed)
12:00 AM
1:00 AM
2:00 AM
3:00 AM
4:00 AM
5:00 AM
6:00 AM
7:00 AM
8:00 AM
9:00 AM
10:00 AM
11:00 AM
12:00 PM
1:00 PM
2:00 PM
3:00 PM
4:00 PM
5:00 PM
6:00 PM
7:00 PM
8:00 PM
9:00 PM
10:00 PM
11:00 PM
9:00 AM – 9:30 AM
Team Standup
10:00 AM – 11:00 AM
Review PR #234
11:00 AM – 11:15 AM
Coffee Break
2:00 PM – 3:30 PM
Client Presentation
4:00 PM – 5:00 PM
Update Documentation
10:00 AM – 10:30 AM
Follow up with Design Team
1:00 PM – 2:00 PM
Code Review Session
9:30 AM – 11:00 AM
Fix Bug #456
12:00 PM – 1:00 PM
Lunch Break
How It Works
1. Define Event Types
Extend your event interface with custom properties like category, priority, or any other metadata you need to style events dynamically.
2. Implement eventPropGetter
The eventPropGetter function receives each event and returns an object with a className property. You can apply conditional logic to assign different classes based on event properties.
3. Style with CSS or Tailwind
Define CSS rules for your custom classes. You can use Tailwind utilities, CSS variables from your theme, or custom CSS. The styles will be applied to events matching those classes.
4. Benefits
- Visual distinction between event types at a glance
- Priority highlighting for important events
- Full control over event appearance
- Easy integration with your design system
- Support for dark mode and theme switching