Interactive Demo
CustomEvent component - Shows time range with event title (all views)
Immediate updates - drag or resize events for instant changes
Implementation Examples
Basic Usage - Single Component
Use the same custom event component for all calendar views.
import { CustomEvent } from "shadcn-big-calendar";
// Use for all views
<ShadcnBigCalendar
localizer={localizer}
events={events}
components={{
event: CustomEvent,
}}
/>View-Specific Components
Use different components optimized for each view type (month, week, day, agenda).
import {
CustomMonthEvent,
CustomWeekEvent,
CustomAgendaEvent
} from "shadcn-big-calendar";
// Use different components per view
<ShadcnBigCalendar
localizer={localizer}
events={events}
components={{
month: { event: CustomMonthEvent },
week: { event: CustomWeekEvent },
day: { event: CustomWeekEvent },
agenda: { event: CustomAgendaEvent },
}}
/>Custom Implementation
Create your own event component with custom time formatting and styling.
import { CustomEvent } from "shadcn-big-calendar";
import type { EventProps } from "react-big-calendar";
// Create your own custom event component
function MyCustomEvent({ event }: EventProps) {
const formatTime = (date: Date) => {
return date.toLocaleTimeString([], {
hour: "numeric",
minute: "2-digit",
hour12: true,
});
};
return (
<div className="flex flex-col gap-0.5">
{!event.allDay && (
<div className="text-[10px] font-medium opacity-90">
{formatTime(event.start)} - {formatTime(event.end)}
</div>
)}
<div className="text-xs font-medium truncate">
{event.title}
</div>
</div>
);
}Available Components
CustomEvent
General-purpose event component that displays time range and title in a stacked layout. Works well across all calendar views.
CustomMonthEvent
Optimized for month view where space is limited. Shows start time inline with the title for better space utilization.
CustomWeekEvent
Optimized for week and day views with more vertical space. Displays time range and title stacked with enhanced readability.
CustomAgendaEvent
Designed for agenda view list format. Shows time range in a fixed-width column alongside the event title for consistent alignment.
Key Features
Time Formatting
Automatic 12-hour time format with AM/PM indicators. All-day events are handled gracefully.
Responsive Text
Text sizes are optimized for each view type to ensure readability at different zoom levels.
Truncation
Long event titles are truncated with ellipsis to prevent layout breaking in constrained spaces.
Theme Support
Works seamlessly with light and dark themes using Tailwind CSS and CSS variables.