FullCalendar

Pro

FullCalendar renders day, week, month, year, and agenda views over one event list, with built-in drag-to-reschedule and resize-to-adjust-duration.

Get the code
November 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
Investor Update00:00
Sprint Planning09:00
Design Review14:00
Product Launch09:00

Installation

Add this component with the NateUI CLI.

npx @nateui/cli@latest add FullCalendar

Examples

Custom Header

Get the code

Resizable Duration

Get the code

Custom Day Sidebar

Get the code

Custom Event Render

Get the code

More Overflow

Get the code

Fill Height

Get the code

API

FullCalendar

PropDescriptionTypeDefault
eventsEvents to render. color accepts 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'orange' | 'gray'; any other value falls back to gray.FullCalendarEvent[]—
viewActive view. The built-in header only switches between Month, Week, and Agenda; reach Day and Year through view directly or a custom renderHeaderEnd.CalendarView'month'
fillHeightFills the parent's height instead of the view's own default height. The parent chain must be height-bounded (an explicit height somewhere above), or the calendar collapses.booleanfalse
onCellClickFires when an empty cell or time slot is clicked.(date: Date) => void—
onCellDoubleClickFires when an empty cell or time slot is double clicked.(overflowedEvents: FullCalendarEvent[], allEvents: FullCalendarEvent[]) => void—
onEventClickFires when an event is clicked. Not called by the year view (its event bullets aren't clickable).(event: FullCalendarEvent) => void—
onChangeFires after an event is moved (drag) or resized, with the full updated list and the one event that changed.(events: FullCalendarEvent[], event: FullCalendarEvent) => void—
onMoreClickObserves activation of a month-view cell's "+N more" control alongside the built-in or customized overflow Popover. Only used by the month view.(overflowedEvents: FullCalendarEvent[], allEvents: FullCalendarEvent[]) => void—
renderMoreContentCustomizes or replaces the built-in overflow Popover body in the month view; it is not required to enable the "+N more" Popover.(props: MoreContentRenderProps) => ReactNode—
renderEventReplaces an event's rendered content and class name. Not called by the year view.(props: EventRenderProps) => EventRenderResult—
renderDayViewSidebarReplaces the day view's complete sidebar wrapper, including its width and responsive behavior. Receives the selected date, its setter, and currently active single-day events. Return null to hide the sidebar.(props: DayViewSidebarRenderProps) => ReactNode—
renderHeaderStartReplaces the header's left/start section.(payload: FullCalendarHeaderPayload) => ReactNode | string—
renderHeaderEndReplaces the header's right/end section.(payload: FullCalendarHeaderPayload) => ReactNode | string—

Drag-to-move and resize-to-adjust-duration are always active on single-day events in the month, week, and day views — there is no prop to disable them. Both report through onChange, so a parent that doesn't feed updated events back in will see the drag or resize visually revert.

Types

type CalendarView = 'day' | 'week' | 'month' | 'year' | 'agenda';
 
type FullCalendarEvent = {
  id: number;
  startDate: string;
  endDate: string;
  title: string;
  color: string;
  description: string;
  type: string;
  disabled?: boolean;
};
 
type EventRenderProps = {
  event: FullCalendarEvent;
  view: CalendarView;
};
 
type EventRenderResult = {
  className?: string;
  content: ReactNode;
};
 
type MoreContentRenderProps = {
  overflowedEvents: FullCalendarEvent[];
  allEvents: FullCalendarEvent[];
};
 
type DayViewSidebarRenderProps = {
  selectedDate: Date;
  setSelectedDate: (date: Date) => void;
  currentEvents: FullCalendarEvent[];
};
 
type FullCalendarHeaderPayload = {
  handlePrevious: () => void;
  handleNext: () => void;
  selectedDate: Date;
  view: CalendarView;
  setView: (view: CalendarView) => void;
  setSelectedDate: (date: Date) => void;
};