FullCalendar: JavaScript Event Calendar with Drag & Drop

FullCalendar is a JavaScript event calendar library that displays and edits scheduled events in month, week, day, list, and multi-month views.

It works well for booking systems, appointment portals, admin dashboards, and team schedules that need remote event data, date selection, and drag-and-drop updates.

Note that FullCalendar v4 and newer no longer require jQuery or Moment.js. FullCalendar v3 remains available for legacy jQuery projects that still depend on the old $.fullCalendar() API.

Features:

• Multiple calendar views: Display the same schedule in month, week, day, list, or multi-month layouts, then switch views from the toolbar or through JavaScript.
• Remote event loading: Load events from a JSON feed, callback function, Google Calendar feed, iCalendar feed, or local JavaScript array.
• Drag-and-drop event editing: Move events to a new date or time, resize their duration, drag external items onto the calendar, and react to each change with callbacks.
• Date and time-range selection: Detect clicks on empty dates or selected time ranges, then open a booking form, create a draft event, or load related schedule data.
• Recurring events: Create repeating events for weekly meetings, shifts, classes, appointments, and other schedules that follow a fixed pattern.
• Scheduling rules and availability: Show business hours, blocked periods, background availability, valid date ranges, overlap rules, and custom restrictions for event creation or movement.
• Custom event display: Control event colors, labels, ordering, time formats, popovers, HTML content, and rendering hooks for different event types.
• Localization and time zones: Translate calendar labels, adjust date formats and week settings, support right-to-left layouts, and keep remote event data aligned with the required time zone.
• Programmatic calendar control: Add, update, remove, refetch, or search for events through the JavaScript API without recreating the calendar.
• Framework and theme support: Use FullCalendar with vanilla JavaScript, React, Preact, Vue, Angular, or Web Components, then adapt its appearance with built-in or custom themes.
• Resource scheduling with Scheduler: Schedule people, meeting rooms, vehicles, equipment, or other bookable resources alongside events. Resource views and timeline scheduling require the separately licensed FullCalendar Scheduler package.

Use Cases:

• Appointments and bookings: Show availability by month or week, then let staff move or resize confirmed reservations.
• Operations dashboards: Load work orders, deliveries, deadlines, or team events from an application API.
• Editorial and campaign planning: Switch between month, week, and list views when a team needs both an overview and a detailed schedule.
• Resource scheduling: Assign events to rooms, equipment, or staff through FullCalendar Scheduler.

Related Event Calendar Resources:

• 10 Best JavaScript Calendar Plugins For Scheduled Events: Compare FullCalendar with other event calendar libraries.
• 10 Best Date Time Picker JavaScript Plugins with Examples: Find date and time pickers for forms that do not need a full event calendar.
• EventCalendar with Resource and Timeline Views: Review a standalone JavaScript alternative for resource scheduling.
• Full Calendar Component for shadcn/ui: Use a React and shadcn/ui calendar component in a Next.js project.

Table Of Contents

• Features
• Use Cases
• Related Event Calendar Resources
• FullCalendar Setup
• Browser Global Setup
• External Draggable Events
• Remote JSON Events and Drag Persistence
• FullCalendar Configuration Reference
• FullCalendar Method Reference
• FullCalendar Callbacks and Render Hooks
• Current API and Migration Notes
• FullCalendar v3 jQuery Setup
• FAQ
• Changelog

FullCalendar Setup

Use the package setup when the project already has Vite, Webpack, Rollup, or another ES module build process. The current v7 packages use fullcalendar for the core library and fullcalendar/* entry points for standard plugins.

Install The Current Packages

npm install fullcalendar@7 temporal-polyfill

FullCalendar v7 requires temporal-polyfill as a peer dependency. Add the Scheduler package only when the project needs premium resource or timeline views.

npm install fullcalendar-scheduler@7

Add The Calendar Element

<div id="team-calendar"></div>

Import And Render The Calendar

import { Calendar } from 'fullcalendar';
import themePlugin from 'fullcalendar/themes/monarch';
import interactionPlugin from 'fullcalendar/interaction';
import dayGridPlugin from 'fullcalendar/daygrid';
import timeGridPlugin from 'fullcalendar/timegrid';
import listPlugin from 'fullcalendar/list';

import 'fullcalendar/skeleton.css';
import 'fullcalendar/themes/monarch/theme.css';
import 'fullcalendar/themes/monarch/palettes/purple.css';

const calendarEl = document.getElementById('team-calendar');

const calendar = new Calendar(calendarEl, {
  plugins: [
    themePlugin,
    interactionPlugin,
    dayGridPlugin,
    timeGridPlugin,
    listPlugin
  ],
  initialView: 'dayGridMonth',
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
  },
  selectable: true,
  editable: true,
  events: [
    {
      id: 'planning-session',
      title: 'Sprint planning',
      start: '2026-06-22T10:00:00',
      end: '2026-06-22T11:30:00'
    },
    {
      id: 'release-window',
      title: 'Release window',
      start: '2026-06-26'
    }
  ]
});

calendar.render();

The current setup requires a theme plugin and its styles. The interactionPlugin entry activates date clicks, range selection, event dragging, and event resizing for this module setup.

Browser Global Setup

Use the browser-global bundle when the page does not use a bundler. FullCalendar v7 uses all/global.js in place of the older index.global.js file.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/skeleton.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/monarch/theme.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/monarch/palettes/purple.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/all/global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/themes/monarch/global.js"></script>

<div id="support-calendar"></div>

document.addEventListener('DOMContentLoaded', function () {
  const calendarEl = document.getElementById('support-calendar');

  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    events: [
      { title: 'Support rotation', start: '2026-06-15' },
      { title: 'Customer review', start: '2026-06-18T14:00:00' }
    ]
  });

  calendar.render();
});

The standard all/global.js bundle includes the interaction, DayGrid, TimeGrid, List, and MultiMonth plugins. Load the Scheduler bundle separately for premium resource and timeline features.

External Draggable Events

Use FullCalendar.Draggable with the browser-global bundle when a user needs to drag a task or booking type into a calendar date. Set droppable to true on the calendar before you handle drop or eventReceive.

<div id="unscheduled-items">
  <button class="calendar-item" type="button">Design review</button>
  <button class="calendar-item" type="button">Client onboarding</button>
</div>

<div id="project-calendar"></div>

document.addEventListener('DOMContentLoaded', function () {
  const itemListEl = document.getElementById('unscheduled-items');
  const calendarEl = document.getElementById('project-calendar');

  new FullCalendar.Draggable(itemListEl, {
    itemSelector: '.calendar-item',
    eventData: function (itemEl) {
      return {
        title: itemEl.textContent,
        duration: '01:00'
      };
    }
  });

  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    editable: true,
    droppable: true,
    eventReceive: function (info) {
      console.log('New event:', info.event.id, info.event.start);
    },
    drop: function (info) {
      console.log('Dropped on:', info.dateStr);
    }
  });

  calendar.render();
});

eventDrop handles an existing calendar event that moves. eventReceive handles an external element that creates a new event. The drop callback runs for external drops even when the element does not carry event data.

Remote JSON Events and Drag Persistence

Pass a JSON endpoint to events when the calendar should request the current range from an application API. Persist an event move inside eventDrop or eventResize. Call info.revert() when the server rejects the update.

const calendar = new Calendar(document.getElementById('booking-calendar'), {
  plugins: [
    themePlugin,
    interactionPlugin,
    dayGridPlugin,
    timeGridPlugin
  ],
  initialView: 'timeGridWeek',
  editable: true,
  events: '/api/bookings',
  eventDrop: saveEventDates,
  eventResize: saveEventDates
});

async function saveEventDates(info) {
  const response = await fetch('/api/bookings/' + info.event.id, {
    method: 'PATCH',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      start: info.event.startStr,
      end: info.event.endStr,
      allDay: info.event.allDay
    })
  });

  if (!response.ok) {
    info.revert();
  }
}

calendar.render();

FullCalendar adds the current range to a JSON-feed request through its event-source parameters. Use startParam, endParam, and timeZoneParam when the backend expects different parameter names. Send startStr, endStr, and allDay back to the API after an event changes so all-day values and the calendar time zone remain explicit.

FullCalendar Configuration Reference

Calendar, Toolbar, And Display Options

• plugins: Registers the theme, view, interaction, event-source, and Scheduler plugins that this calendar instance needs. Type: Array.
• initialView: Sets the first view, such as dayGridMonth, timeGridWeek, timeGridDay, or listWeek. Type: String.
• initialDate: Sets the date visible when the calendar first renders. Type: Date or String.
• views: Adds view-specific settings or defines a custom view configuration. Type: Object.
• headerToolbar: Defines the title, navigation buttons, and view buttons above the calendar. Type: Object, String, or false.
• footerToolbar: Defines the controls below the calendar. Type: Object, String, or false.
• titleFormat: Formats the date range in the toolbar title. Type: Formatter input.
• buttons: Defines custom toolbar buttons or overrides standard button behavior. Type: Object.
• buttonDisplay: Controls whether toolbar buttons show icons, text, or both. Type: String or Object.
• toolbarElements: Adds a custom HTML element to a toolbar section. Type: Object.
• height: Sets the complete calendar height. Type: Number, String, or Function.
• contentHeight: Sets the height of the view area below the toolbar. Type: Number, String, or Function.
• aspectRatio: Sets the width-to-height ratio when the calendar does not use an explicit height. Type: Number.
• expandRows: Expands calendar rows to fill the available height. Type: Boolean.
• tableHeaderSticky: Keeps table headers visible while the calendar scrolls. Type: Boolean or 'auto'.
• footerScrollbarSticky: Keeps a horizontal scrollbar visible in long scrollable layouts. Type: Boolean or 'auto'.

View, Date, And Time Options

• fixedWeekCount: Keeps month view at a fixed six-week height. Type: Boolean.
• showNonCurrentDates: Shows or hides adjacent-month dates in month view. Type: Boolean.
• allDaySlot: Shows or hides the all-day area in TimeGrid views. Type: Boolean.
• slotDuration: Sets the frequency of time slots in time-based views. Type: Duration input.
• slotHeaderInterval: Sets how often TimeGrid or Timeline labels appear. Type: Duration input.
• slotHeaderFormat: Formats time-axis labels. Type: Formatter input.
• slotMinTime: Sets the first visible time slot. Type: Duration input.
• slotMaxTime: Sets the exclusive end of the visible time range. Type: Duration input.
• scrollTime: Sets the initial vertical scroll position for time-based views. Type: Duration input.
• scrollTimeReset: Resets the scroll position after the visible date range changes. Type: Boolean.
• multiMonthMaxColumns: Limits month columns in the MultiMonth Grid view. Type: Number.
• singleMonthMinWidth: Sets the minimum width for one month before MultiMonth Grid reduces its columns. Type: Number.
• singleMonthTitleFormat: Formats the title for each month in MultiMonth Grid. Type: Formatter input.
• weekends: Includes Saturday and Sunday in supported views. Type: Boolean.
• hiddenDays: Excludes weekday indexes from the displayed calendar. Type: Array.
• dayHeaders: Shows or hides day headers in Month, DayGrid, and TimeGrid views. Type: Boolean.
• dayHeaderFormat: Formats the text in day headers. Type: Formatter input.
• dayMinWidth: Adds horizontal scrolling when a day column cannot satisfy the selected minimum width. Type: Number.
• dayNarrowWidth: Uses narrow day text and layout variants below the selected width. Type: Number.
• locale: Selects locale data for button labels and date formatting. Type: String.
• direction: Sets left-to-right or right-to-left layout direction. Type: String.
• firstDay: Sets the first weekday in a calendar row. Type: Number.
• timeZone: Controls date parsing, rendering, and event-source requests. Type: String.
• validRange: Limits navigation, date selection, and event placement to an allowed date range. Type: Object or Function.
• dateIncrement: Changes the distance that prev and next move the calendar. Type: Duration input.
• dateAlignment: Aligns the visible start date for a custom view. Type: String.
• navLinks: Turns supported date text into navigation links. Type: Boolean.
• nowIndicator: Shows the current-time indicator in supported time-based views. Type: Boolean.
• businessHours: Highlights regular business hours. Use businessHours as selectConstraint or eventConstraint when those hours must restrict selection, dragging, or resizing. Type: Boolean, Object, or Array.

Event Source And Event Display Options

• events: Supplies events as an array, a JSON-feed URL, or a function. Type: Array, String, or Function.
• eventSources: Registers multiple event arrays, feeds, or event-source objects. Type: Array.
• initialEvents: Adds a non-refetched initial event collection. Type: Array.
• eventDataTransform: Transforms incoming event data before FullCalendar creates an Event object. Type: Function.
• defaultAllDay: Sets the fallback all-day value when an event does not define one. Type: Boolean.
• defaultAllDayEventDuration: Sets a fallback duration for all-day events without an end. Type: Duration input.
• defaultTimedEventDuration: Sets a fallback duration for timed events without an end. Type: Duration input.
• forceEventDuration: Assigns an event end when incoming event data omits it. Type: Boolean.
• eventColor: Sets a default color for foreground events. Type: String.
• eventContrastColor: Sets text and related contrast color for foreground events. Type: String.
• eventDisplay: Chooses a preset event rendering style. Type: String.
• eventTimeFormat: Formats the time text shown inside events. Type: Formatter input.
• displayEventTime: Shows or hides event time text. Type: Boolean.
• displayEventEnd: Shows or hides an event end time. Type: Boolean.
• nextDayThreshold: Controls when an event that crosses midnight displays on the next day. Type: Duration input.
• eventOrder: Sorts events that occupy the same day or time area. Type: String, Array, or Function.
• eventOrderStrict: Enforces the selected eventOrder where a view allows it. Type: Boolean.
• progressiveEventRendering: Controls individual or batched rendering for asynchronous event sources. Type: Boolean.
• dayMaxEvents: Limits visible events in a day cell and exposes a more link when necessary. Type: Boolean or Number.
• dayMaxEventRows: Limits visible event rows in DayGrid and TimeGrid all-day areas. Type: Boolean or Number.
• eventMaxStack: Limits stacked timed events before FullCalendar displays a more link. Type: Number.
• lazyFetching: Avoids repeat event requests for date ranges that FullCalendar already fetched. Type: Boolean.
• startParam: Sets the start-date query parameter for JSON feeds. Type: String.
• endParam: Sets the end-date query parameter for JSON feeds. Type: String.
• timeZoneParam: Sets the time-zone query parameter for JSON feeds. Type: String.

Selection, Dragging, Dropping, And Resizing Options

• selectable: Lets users select date ranges or time ranges. Type: Boolean.
• selectMirror: Shows a placeholder event during range selection. Type: Boolean.
• unselectAuto: Clears a selected range after a click outside the current selection. Type: Boolean.
• unselectCancel: Keeps a selection when a click matches the selected CSS selector. Type: String.
• selectOverlap: Controls selection over existing events. Type: Boolean or Function.
• selectConstraint: Limits selectable time ranges. Type: String, Object, or Array.
• selectAllow: Accepts or rejects a proposed date selection in application code. Type: Function.
• selectMinDistance: Sets the pointer distance required before a drag selection begins. Type: Number.
• editable: Enables event start and duration editing unless a narrower event option overrides it. Type: Boolean.
• eventStartEditable: Controls event dragging that changes the event start. Type: Boolean.
• eventDurationEditable: Controls event resizing that changes duration. Type: Boolean.
• eventResizableFromStart: Lets users resize an event from its starting edge. Type: Boolean.
• eventResourceEditable: Lets users drag events between resources in Scheduler views. Type: Boolean.
• droppable: Accepts external draggable elements and events from another calendar. Type: Boolean.
• eventDragMinDistance: Sets the pointer distance required before an event starts to drag. Type: Number.
• dragRevertDuration: Sets the duration of an unsuccessful drag revert. Type: Number.
• dragScroll: Scrolls matching containers during event dragging and date selection. Type: Boolean.
• snapDuration: Sets event-drag and selection snapping granularity. Type: Duration input.
• allDayMaintainDuration: Controls duration changes when an event moves between timed and all-day areas. Type: Boolean.
• eventOverlap: Controls drag and resize overlap with existing events. Type: Boolean or Function.
• eventConstraint: Limits event movement and resizing to allowed ranges. Type: String, Object, or Array.
• eventAllow: Accepts or rejects a proposed event drop in application code. Type: Function.
• dropAccept: Filters which external elements the calendar accepts. Type: String or Function.

Scheduler Options

• resources: Supplies resource data as an array, JSON feed, or function. Type: Array, String, or Function. Availability: Scheduler only.
• initialResources: Adds a non-refetched initial resource collection. Type: Array. Availability: Scheduler only.
• refetchResourcesOnNavigate: Reloads resource data after the calendar navigates. Type: Boolean. Availability: Scheduler only.
• resourceOrder: Sorts resource rows. Type: String, Array, or Function. Availability: Scheduler only.
• resourceGroupField: Groups resources by a resource property. Type: String. Availability: Scheduler only.
• resourceColumns: Defines columns next to Timeline resources. Type: Array. Availability: Scheduler only.
• resourcesInitiallyExpanded: Expands nested resource rows when the calendar renders. Type: Boolean. Availability: Scheduler only.
• filterResourcesWithEvents: Shows only resources with events in the current range. Type: Boolean. Availability: Scheduler only.
• datesAboveResources: Places dates above resources in supported resource views. Type: Boolean. Availability: Scheduler only.

FullCalendar Method Reference

Calendar And Option Methods

• calendar.render(): Renders the calendar inside its target element. Parameters: None. Returns: Nothing.
• calendar.destroy(): Removes the calendar and cleans up its DOM and event handlers. Parameters: None. Returns: Nothing.
• calendar.batchRendering(callback): Groups several Calendar API changes before FullCalendar renders them. Parameters: Function. Returns: The callback result.
• calendar.setOption(name, value): Changes a dynamic calendar option after initialization. Parameters: Option name and value. Returns: Nothing.
• calendar.getOption(name): Reads the current value of a dynamic calendar option. Parameters: Option name. Returns: The option value.
• calendar.on(name, handler): Binds a handler after initialization. Parameters: Handler name and function. Returns: Nothing.
• calendar.off(name, handler): Removes a runtime handler. Parameters: Handler name and function. Returns: Nothing.
• calendar.changeView(viewName, dateOrRange): Changes the active view and can move it to a date or range. Parameters: View name and optional date or range. Returns: Nothing.

Navigation And Selection Methods

• calendar.prev(): Moves the calendar backward by the active view's normal step. Parameters: None. Returns: Nothing.
• calendar.next(): Moves the calendar forward by the active view's normal step. Parameters: None. Returns: Nothing.
• calendar.prevYear(): Moves the calendar backward one year. Parameters: None. Returns: Nothing.
• calendar.nextYear(): Moves the calendar forward one year. Parameters: None. Returns: Nothing.
• calendar.today(): Moves the calendar to the current date. Parameters: None. Returns: Nothing.
• calendar.gotoDate(date): Moves the calendar to a specific date. Parameters: Date input. Returns: Nothing.
• calendar.incrementDate(duration): Moves the calendar by an arbitrary duration. Parameters: Duration input. Returns: Nothing.
• calendar.getDate(): Returns the current calendar date. Parameters: None. Returns: Date.
• calendar.select(dateOrRange): Selects a date or date range in code. Parameters: Date input or range object. Returns: Nothing.
• calendar.unselect(): Clears the current date selection. Parameters: None. Returns: Nothing.
• calendar.scrollToTime(duration): Scrolls the current time-based view to a time. Parameters: Duration input. Returns: Nothing.

Event And Event Source Methods

• calendar.getEvents(): Returns the Event objects that FullCalendar currently stores. Parameters: None. Returns: Array.
• calendar.getEventById(id): Returns the Event object with the matching ID. Parameters: String or Number. Returns: Event object or null.
• calendar.addEvent(eventInput, source): Adds an event from plain event data. Parameters: Event input and optional source. Returns: Event object.
• calendar.getEventSources(): Returns registered Event Source objects. Parameters: None. Returns: Array.
• calendar.getEventSourceById(id): Returns an event source by its ID. Parameters: String or Number. Returns: Event Source object or null.
• calendar.addEventSource(source): Adds an event source after initialization. Parameters: Event source input. Returns: Event Source object.
• calendar.refetchEvents(): Requests event data again from refetchable sources. Parameters: None. Returns: Nothing.
• eventSource.refetch(): Requests fresh event data from one Event Source object. Parameters: None. Returns: Nothing.
• eventSource.remove(): Removes an Event Source object and its current events. Parameters: None. Returns: Nothing.
• event.setProp(name, value): Changes a non-date Event property. Parameters: Property name and value. Returns: Nothing.
• event.setExtendedProp(name, value): Changes one property inside extendedProps. Parameters: Property name and value. Returns: Nothing.
• event.setStart(date, options): Sets an event start date. Parameters: Date input and optional mutation options. Returns: Nothing.
• event.setEnd(date, options): Sets an event end date. Parameters: Date input and optional mutation options. Returns: Nothing.
• event.setDates(start, end, options): Sets an event start, end, and all-day state in one call. Parameters: Start date, end date, and optional options. Returns: Nothing.
• event.setAllDay(allDay, options): Changes an event between all-day and timed display. Parameters: Boolean and optional mutation options. Returns: Nothing.
• event.moveStart(delta): Moves only an event start by a duration. Parameters: Duration input. Returns: Nothing.
• event.moveEnd(delta): Moves only an event end by a duration. Parameters: Duration input. Returns: Nothing.
• event.moveDates(delta): Moves an event start and end by a duration. Parameters: Duration input. Returns: Nothing.
• event.formatRange(formatInput): Formats an event date range. Parameters: Formatter input. Returns: String.
• event.remove(): Removes an event from the calendar. Parameters: None. Returns: Nothing.
• event.toPlainObject(settings): Converts an Event object into plain data for application code. Parameters: Optional settings. Returns: Object.

Scheduler Resource Methods

• calendar.refetchResources(): Requests resource data again from refetchable resource sources. Parameters: None. Returns: Nothing. Availability: Scheduler only.
• calendar.getTopLevelResources(): Returns resources without a parent resource. Parameters: None. Returns: Array. Availability: Scheduler only.
• calendar.getResources(): Returns all resource objects. Parameters: None. Returns: Array. Availability: Scheduler only.
• calendar.getResourceById(id): Returns one resource by its ID. Parameters: String or Number. Returns: Resource object or null. Availability: Scheduler only.
• calendar.addResource(resourceInput, scrollTo): Adds a resource after initialization. Parameters: Resource input and optional Boolean. Returns: Resource object. Availability: Scheduler only.
• resource.getEvents(): Returns events associated with one resource. Parameters: None. Returns: Array. Availability: Scheduler only.
• resource.setProp(name, value): Changes a Resource property. Parameters: Property name and value. Returns: Nothing. Availability: Scheduler only.
• resource.setExtendedProp(name, value): Changes one resource extended property. Parameters: Property name and value. Returns: Nothing. Availability: Scheduler only.
• resource.remove(): Removes a resource. Parameters: None. Returns: Nothing. Availability: Scheduler only.

FullCalendar Callbacks And Render Hooks

Date And Calendar Callbacks

• datesSet: Runs after FullCalendar sets or changes the visible date range and updates the DOM. Arguments: Date-range information object. Trigger: Initial render or date/view change.
• dateClick: Runs after a user clicks a date or time. Arguments: Date-click information object. Trigger: Date or time click.
• select: Runs after a user creates a date or time selection. Arguments: Selection information object. Trigger: Date or time range selection.
• unselect: Runs after FullCalendar clears the current selection. Arguments: None. Trigger: Selection removal.
• loading: Runs when FullCalendar starts or finishes event-source loading. Arguments: Boolean. Trigger: Event-source request state changes.

Event Data And Click Callbacks

• eventAdd: Runs after FullCalendar adds an event. Arguments: Event-add information object. Trigger: New event creation.
• eventChange: Runs after FullCalendar changes an event. Arguments: Event-change information object. Trigger: Event mutation.
• eventRemove: Runs after FullCalendar removes an event. Arguments: Event-remove information object. Trigger: Event deletion.
• eventsSet: Runs after FullCalendar initializes or changes its event collection. Arguments: Array of Event objects. Trigger: Event collection change.
• eventClick: Runs after a user clicks an event. Arguments: Event-click information object. Trigger: Event click.
• eventMouseEnter: Runs when the pointer enters an event. Arguments: Event-hover information object. Trigger: Pointer enter.
• eventMouseLeave: Runs when the pointer leaves an event. Arguments: Event-hover information object. Trigger: Pointer leave.
• eventSourceSuccess: Transforms or accepts data from a successful event-source request. Arguments: Raw response and response object. Trigger: Successful event-source request.
• eventSourceFailure: Handles a failed event-source request. Arguments: Error object. Trigger: Failed event-source request.

Drag, Drop, And Resize Callbacks

• eventDragStart: Runs when an event drag begins. Arguments: Event-drag information object. Trigger: Event drag start.
• eventDragStop: Runs when an event drag ends. Arguments: Event-drag information object. Trigger: Event drag stop.
• eventDrop: Runs after a drag moves an existing event to a different date or time. Arguments: Event-drop information object. Trigger: Successful event move.
• eventResizeStart: Runs when event resizing begins. Arguments: Event-resize information object. Trigger: Resize start.
• eventResizeStop: Runs when event resizing ends. Arguments: Event-resize information object. Trigger: Resize stop.
• eventResize: Runs after an event duration changes. Arguments: Event-resize information object. Trigger: Successful event resize.
• drop: Runs after an external draggable item or an event from another calendar lands on this calendar. Arguments: Drop information object. Trigger: External drop.
• eventReceive: Runs after an external draggable item with event data creates or transfers an event. Arguments: Event-receive information object. Trigger: Event reception.
• eventLeave: Runs when an event leaves this calendar for another calendar. Arguments: Event-leave information object. Trigger: Cross-calendar transfer.

Render Hooks

• eventContent: Supplies custom content for a foreground event. Arguments: Event-content argument object. Trigger: Event rendering.
• eventDidMount: Runs after FullCalendar adds a foreground event element to the DOM. Arguments: Event-mount argument object. Trigger: Event element mount.
• eventWillUnmount: Runs before FullCalendar removes a foreground event element. Arguments: Event-unmount argument object. Trigger: Event element cleanup.
• viewDidMount: Runs after FullCalendar adds a view to the DOM. Arguments: View-mount argument object. Trigger: View mount.
• viewWillUnmount: Runs before FullCalendar removes a view from the DOM. Arguments: View-unmount argument object. Trigger: View cleanup.

Current API And Migration Notes

FullCalendar v7 changes package names, browser-global file paths, and CSS setup. Move a v6 vanilla JavaScript project from @fullcalendar/core and @fullcalendar/daygrid to fullcalendar and fullcalendar/daygrid. Install temporal-polyfill with the new package.

• fullcalendar@7 replaces the v6 vanilla JavaScript package group that began with @fullcalendar/core.
• fullcalendar-scheduler@7 replaces the v6 Scheduler package group that began with @fullcalendar/resource and @fullcalendar/timeline.
• Browser-global builds use all/global.js. Replace old index.global.js URLs.
• v7 separates the calendar theme from the core package. Load a theme plugin plus the skeleton, theme, and palette styles.
• The Moment and Moment Timezone integration packages do not carry into v7. Use the built-in date handling or the supported formatting plugins that match the current package structure.
• v7 does not render a header toolbar by default. Set headerToolbar when the interface needs navigation, a title, or view-switcher buttons.
• customButtons became buttons. buttonText and buttonIcons moved to per-button display settings.
• Bootstrap 4 and Bootstrap 5 theme packages were removed. Select a v7 theme or build a custom theme through the current theme hooks.
• React, Vue 3, Angular, Preact, and Web Component integrations use their own v7 package entry points for view and interaction plugins. Vue 2 is not supported by the v7 connector.

FullCalendar Standard uses an MIT license. Scheduler and other premium features use separate licensing terms. Review those terms before you ship a commercial resource or timeline calendar.

FullCalendar v3 jQuery Setup

Use FullCalendar v3 only when an existing application depends on jQuery and the $.fullCalendar() API. New projects should use the current JavaScript setup above. The legacy build requires jQuery and Moment.js, and older external-dragging examples also require jQuery UI.

<link rel="stylesheet" href="fullcalendar.min.css">

<script src="jquery.min.js"></script>
<script src="moment.min.js"></script>
<script src="fullcalendar.min.js"></script>

<div id="legacy-calendar"></div>

$('#legacy-calendar').fullCalendar({
  defaultView: 'month',
  defaultDate: '2019-06-10',
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay,listWeek'
  },
  navLinks: true,
  editable: true,
  eventLimit: true,
  events: [
    {
      title: 'Operations review',
      start: '2019-06-12T09:00:00',
      end: '2019-06-12T10:00:00'
    },
    {
      title: 'Office closed',
      start: '2019-06-17'
    }
  ]
});

Download the FullCalendar v3.10.5 archive when a legacy project needs the original jQuery distribution. Do not mix v3 files with current package names or browser-global URLs.

FAQs:

Why is FullCalendar.Draggable undefined, or why does an external item not create an event?

Browser-global projects need the current all/global.js bundle before calendar code. Create the external-item instance with new FullCalendar.Draggable(...), set droppable: true on the calendar, and return event data when a drop should create an event. The drop callback runs for an accepted external drop. eventReceive runs only after FullCalendar creates an event.

Why do date clicks, range selection, or event dragging fail after setup?

Module builds must import and register fullcalendar/interaction. Use selectable: true for date-range selection, editable: true for moving and resizing existing events, and droppable: true for external items. Each setting controls a different interaction.

What happened to the $.fullCalendar() jQuery plugin?

The current library uses the JavaScript Calendar class and framework connectors. Keep the v3 branch only when an existing application still depends on $.fullCalendar(). Do not combine v3 jQuery assets with current package or browser-global files.

How should an application save an event after a drag or resize?

Handle eventDrop and eventResize, then send the event ID, startStr, endStr, and allDay values to the backend. Call info.revert() when the save fails. Refetch the event source after a successful save when the server normalizes dates, permissions, or recurrence data.

Why do timed events shift by an hour or appear on the wrong day?

Set the calendar timeZone to the business time zone and send timed events as ISO timestamps with a UTC marker or explicit offset. Use date-only values for all-day events. For a named zone such as America/New_York, pass startStr and endStr through the API. Import temporal-polyfill/global and convert to Temporal.ZonedDateTime when application code must perform calculations in that named zone, because native Date values expose local or UTC fields rather than the calendar zone itself.

Is FullCalendar free, and when is a Scheduler license required?

FullCalendar Standard features use the MIT license. Resource Timeline and other Scheduler features use separate premium licensing. Confirm the license before building a commercial room, staff, equipment, or capacity scheduler around those views.

Changelog

v7.0.0 (June 19, 2026)

• Rebuilt package names and import paths for vanilla JavaScript, framework integrations, and Scheduler.
• Added the temporal-polyfill peer dependency for FullCalendar packages.
• Moved browser-global standard bundles from index.global.js to all/global.js.
• Introduced a formal theme system with separate theme and stylesheet assets.
• Changed the open-source Scheduler license path from GPLv3 to AGPLv3.

v6.1.21 (June 18, 2026)

• Added Angular 22 support.

---

This awesome jQuery plugin is developed by fullcalendar. For more Advanced Usages, please check the demo page or visit the official website.