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
October 2026
    Sun
    Mon
    Tue
    Wed
    Thu
    Fri
    Sat
    27
    28
    29
    30
    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
    31
    Investor Update00:00
    Sprint Planning09:00
    Design Review14:00
    Product Launch09:00

    Installation

    Add this component with the NateUI CLI.

    npx nateui@latest add FullCalendar

    Examples

    Custom Header

    Get the code
    October 2026
      Sun
      Mon
      Tue
      Wed
      Thu
      Fri
      Sat
      27
      28
      29
      30
      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
      31
      Customer Call11:00
      Board Meeting13:00

      Resizable Duration

      Get the code
      October 2026
        28 Wed
        01:00
        02:00
        03:00
        04:00
        05:00
        06:00
        07:00
        08:00
        09:00
        10:00
        11:00
        12:00
        13:00
        14:00
        15:00
        16:00
        17:00
        18:00
        19:00
        20:00
        21:00
        22:00
        23:00

        Focus Block

        09:00 - 11:00

        Client Workshop

        14:00 - 15:30

        14:46

        Custom Day Sidebar

        Get the code
        October 2026
          28 Wed
          01:00
          02:00
          03:00
          04:00
          05:00
          06:00
          07:00
          08:00
          09:00
          10:00
          11:00
          12:00
          13:00
          14:00
          15:00
          16:00
          17:00
          18:00
          19:00
          20:00
          21:00
          22:00
          23:00

          Project Check-in

          14:16 - 15:16

          14:46

          Custom Event Render

          Get the code
          October 2026
            Sun
            Mon
            Tue
            Wed
            Thu
            Fri
            Sat
            27
            28
            29
            30
            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
            31
            Team Sync
            Launch Day
            Renewal Due

            More Overflow

            Get the code
            October 2026
              Sun
              Mon
              Tue
              Wed
              Thu
              Fri
              Sat
              27
              28
              29
              30
              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
              31
              Interview 109:00
              Interview 210:00
              Interview 311:00
              Interview 412:00
              Interview 513:00

              Fill Height

              Get the code
              October 2026
                Sun
                Mon
                Tue
                Wed
                Thu
                Fri
                Sat
                27
                28
                29
                30
                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
                31
                Standup09:00
                Retro16:00

                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;
};