EventCalendar

See demo and changelog.

Full-sized drag & drop JavaScript event calendar with resource & timeline views:

• Lightweight (35kb br compressed)
• Minimal DOM structure (thanks to CSS Grid)
• Zero-dependency (standalone bundle)
• Used on over 70,000 websites with Bookly

Inspired by FullCalendar, it implements similar options.

Featured sponsors

Table of contents

• Usage

  • JavaScript module
  • Svelte 5 component
  • Standalone bundle
  • Modifying options after initialization

• Options

  allDayContent allDaySlot buttonText columnWidth customButtons customScrollbars date dateClick dateIncrement datesAboveResources datesSet dayCellContent dayCellFormat dayHeaderAriaLabelFormat dayHeaderFormat dayMaxEvents dayPopoverFormat displayEventEnd dragConstraint dragScroll duration editable events eventAllUpdated eventBackgroundColor eventClassNames eventClick eventColor eventContent eventDidMount eventDragMinDistance eventDragStart eventDragStop eventDrop eventDurationEditable

  eventFilter eventGap eventLongPressDelay eventMouseEnter eventMouseLeave eventOrder eventOrderStrict eventResizableFromStart eventResize eventResizeStart eventResizeStop eventSources eventStartEditable eventTextColor eventTimeFormat filterEventsWithResources filterResourcesWithEvents firstDay flexibleSlotTimeLimits headerToolbar height hiddenDays highlightedDates icons lazyFetching listDayFormat listDaySideFormat loading locale longPressDelay monthHeaderFormat moreLinkContent noEventsClick noEventsContent nowIndicator

  pointer refetchResourcesOnNavigate resizeConstraint resourceExpand resources resourceLabelContent resourceLabelDidMount scrollTime select selectable selectBackgroundColor selectConstraint selectLongPressDelay selectMinDistance slotDuration slotEventOverlap slotHeight slotLabelFormat slotLabelInterval slotMaxTime slotMinTime slotWidth snapDuration theme timeZone titleFormat unselect unselectAuto unselectCancel validRange view viewDidMount views weekNumberContent weekNumbers

• Methods

  getOption setOption

  addEvent getEventById getEvents removeEventById updateEvent

  refetchEvents refetchResources

  dateFromPoint getView gotoDate next prev unselect

• Content

• Event object

  • Parsing event from a plain object

• Duration object

  • Parsing duration from input values

• Resource object

  • Parsing resource from a plain object

• View object

• Theming

• Browser support

Usage

JavaScript module

The first step is to install the EventCalendar core package:

npm install --save-dev @event-calendar/core

This package provides functions for creating and destroying the calendar, as well as plugins for various views. You must use at least one plugin that provides a view. The following plugins are currently available:

• DayGrid
• List
• ResourceTimeline
• ResourceTimeGrid
• TimeGrid
• Interaction (doesn't provide a view)

Then, in your JavaScript module:

import {createCalendar, destroyCalendar, TimeGrid} from '@event-calendar/core';
// Import CSS if your build tool supports it
import '@event-calendar/core/index.css';

let ec = createCalendar(
    // HTML element the calendar will be mounted to
    document.getElementById('ec'),
    // Array of plugins
    [TimeGrid],
    // Options object
    {
        view: 'timeGridWeek',
        events: [
            // your list of events
        ]
    }
);

// If you later need to destroy the calendar then use
destroyCalendar(ec);

Svelte 5 component

The first step is to install the EventCalendar core package:

npm install --save-dev @event-calendar/core

This package provides the Calendar component, as well as plugins for various views. You must use at least one plugin that provides a view. The following plugins are currently available:

• DayGrid
• List
• ResourceTimeline
• ResourceTimeGrid
• TimeGrid
• Interaction (doesn't provide a view)

Then in your Svelte 5 component, use the calendar like this:

<script>
    import {Calendar, TimeGrid} from '@event-calendar/core';

    let options = $state({
        view: 'timeGridWeek',
        events: [
            // your list of events
        ]
    });
</script>

<Calendar plugins={[TimeGrid]} {options} />

The calendar is destroyed gracefully when the component containing it is destroyed.

Standalone bundle

This bundle contains a version of the calendar that includes all plugins and is prepared for use in the browser via the <script> tag.

The first step is to include the following lines of code in the <head> section of your page:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.11.1/dist/event-calendar.min.css">
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.11.1/dist/event-calendar.min.js"></script>

Then initialize the calendar like this:

let ec = EventCalendar.create(document.getElementById('ec'), {
    view: 'timeGridWeek',
    events: [
        // your list of events
    ]
});

// If you later need to destroy the calendar then use
EventCalendar.destroy(ec);

Modifying options after initialization

You can modify the calendar options after initialization using the setOption method.

ec.setOption('slotDuration', '01:00');

In Svelte, you can simply update the original options object.

<script>
    import {Calendar, TimeGrid} from '@event-calendar/core';

    let options = $state({
        view: 'timeGridWeek'
    });

    function updateOptions() {
        options.slotDuration = '01:00';
    }
</script>

<button onclick={updateOptions}>Change slot duration</button>
<Calendar plugins={[TimeGrid]} {options} />

Options

allDayContent

• Type Content or function
• Default 'all-day'

Defines the content that is displayed as a title of the all-day slot.

This value can be either a Content or a function that returns content:

function (arg) {
    // return Content
}

arg is an object with the following properties:

allDaySlot

• Type boolean
• Default true

Determines whether the all-day slot is displayed at the top of the calendar.

When hidden with false, all-day events will not be displayed in timeGrid/resourceTimeGrid views.

buttonText

• Type object or function

• Default

  {collapse: 'Collapse', close: 'Close', dayGridDay: 'day', dayGridMonth: 'month', dayGridWeek: 'week', expand: 'Expand', listDay: 'day', listMonth: 'month', listWeek: 'week', listYear: 'year', resourceTimeGridDay: 'day', resourceTimeGridWeek: 'week', resourceTimelineDay: 'day', resourceTimelineMonth: 'month', resourceTimelineWeek: 'week', resourceTimelineYear: 'year', timeGridDay: 'day', timeGridWeek: 'week', today: 'today'}

  Views override the default value as follows:

  • dayGridDay text => ({...text, next: 'Next day', prev: 'Previous day'})
  • dayGridMonth text => ({...text, next: 'Next month', prev: 'Previous month'})
  • dayGridWeek text => ({...text, next: 'Next week', prev: 'Previous week'})
  • listDay text => ({...text, next: 'Next day', prev: 'Previous day'})
  • listMonth text => ({...text, next: 'Next month', prev: 'Previous month'})
  • listWeek text => ({...text, next: 'Next week', prev: 'Previous week'})
  • listYear text => ({...text, next: 'Next year', prev: 'Previous year'})
  • resourceTimeGridDay text => ({...text, next: 'Next day', prev: 'Previous day'})
  • resourceTimeGridWeek text => ({...text, next: 'Next week', prev: 'Previous week'})
  • resourceTimelineDay text => ({...text, next: 'Next day', prev: 'Previous day'})
  • resourceTimelineMonth text => ({...text, next: 'Next month', prev: 'Previous month'})
  • resourceTimelineWeek text => ({...text, next: 'Next week', prev: 'Previous week'})
  • resourceTimelineYear text => ({...text, next: 'Next year', prev: 'Previous year'})
  • timeGridDay text => ({...text, next: 'Next day', prev: 'Previous day'})
  • timeGridWeek text => ({...text, next: 'Next week', prev: 'Previous week'})

Text that is displayed in buttons of the header toolbar.

This value can be either a plain object with all necessary properties, or a callback function that receives default button text object and should return a new one:

function (text) {
  // return new button text object
}

columnWidth

• Type string
• Default undefined

Defines the column width in timeGrid/resourceTimeGrid views.

This option accepts a CSS length value, so be sure to include px if you specify the value in pixels.

If this option is undefined, the column width will adjust to the calendar width.

customButtons

• Type object or function
• Default {}

Defines custom buttons that can be used in the headerToolbar.

First, specify the custom buttons as key-value pairs. Then reference them from the headerToolbar option.

let options = {
    customButtons: {
        myCustomButton: {
            text: 'custom!',
            click: function() {
                alert('clicked the custom button!');
            }
        }
    },
    headerToolbar: {
        start: 'title myCustomButton',
        center: '',
        end: 'today prev,next'
    }
};

Each customButton entry accepts the following properties:

This option can also be set as a callback function that receives default custom button object and should return a new one:

function (customButtons) {
  // return new custom buttons object
}

customScrollbars

• Type boolean
• Default false

Enables scrollbars styling, which in turn prevents the scrollbars from being hidden in supported browsers.

This option can be useful, for example, for macOS users in resourceTimeline views to indicate that the calendar can be scrolled horizontally. On macOS, scrollbars can be hidden completely, and this option ensures they are always visible in supported browsers.

date

• Type Date or string
• Default new Date()

Date that is currently displayed on the calendar.

This value can be either a JavaScript Date object, or an ISO8601 date string like '2026-12-31'.

dateClick

• Type function
• Default undefined
• Requires Interaction plugin

Callback function that is triggered when the user clicks on a date or a time.

function (info) {}

info is an object with the following properties:

dateIncrement

• Type string, integer or object
• Default undefined

Defines the interval by which the displayed view is shifted when pressing the prev/next buttons or when the prev()/next() methods are called.

This should be a value that can be parsed into a Duration object.

If not specified, then equal to duration.

datesAboveResources

• Type boolean
• Default false

Determines whether the resource view should render the date headings above the resource headings.

datesSet

• Type function
• Default undefined

Callback function that is triggered when the date range of the calendar was originally set or changed by clicking the previous/next buttons, changing the view, manipulating the current date via the API, etc.

function (info) {}

info is an object with the following properties:

dayCellContent

• Type Content or function
• Default undefined

Defines the content that is rendered inside the day cell.

This value can be either a Content or a function that returns content:

function (arg) {
    // return Content
}

arg is an object with the following properties:

dayCellFormat

• Type object or function
• Default {day: 'numeric'}

Defines the text that is displayed inside the day cell in the dayGridMonth view.

This value can be either an object with options for the native JavaScript Intl.DateTimeFormat object, or a callback function that returns a Content with the formatted string:

function (date) {
  // return Content with the formatted date string
}

dayHeaderAriaLabelFormat

• Type object or function
• Default {dateStyle: 'long'}

Views override the default value as follows:

• dayGridMonth {weekday: 'long'}

Defines the text that is used inside the aria-label attribute in calendar column headings.

This value can be either an object with options for the native JavaScript Intl.DateTimeFormat object, or a callback function that returns formatted string:

function (date) {
    // return formatted date string
}

dayHeaderFormat

• Type object or function
• Default {weekday: 'short', month: 'numeric', day: 'numeric'}

Views override the default value as follows:

• dayGridDay {weekday: 'long'}
• dayGridMonth {weekday: 'short'}
• resourceTimelineMonth {weekday: 'short', day: 'numeric'}
• resourceTimelineYear {weekday: 'short', day: 'numeric'}
• timeGridDay {weekday: 'long'}

Defines the text that is displayed on the calendar’s column headings.

This value can be either an object with options for the native JavaScript Intl.DateTimeFormat object, or a callback function that returns a Content with the formatted string:

function (date) {
    // return Content with the formatted date string
}

dayMaxEvents

• Type boolean
• Default false

Determines the maximum number of stacked event levels for a given day in the dayGrid view.

If there are too many events, a link like +2 more is displayed.

Currently, only the value true is supported, which limits the number of events to the height of the day cell.

dayPopoverFormat

• Type object or function
• Default {month: 'long', day: 'numeric', year: 'numeric'}

Defines the date format of title of the popover created by the dayMaxEvents option.

This value can be either an object with options for the native JavaScript Intl.DateTimeFormat object, or a callback function that returns a Content with the formatted string:

function (date) {
    // return Content with the formatted date string
}

displayEventEnd

• Type boolean
• Default true

Views override the default value as follows:

• dayGridDay false
• dayGridMonth false
• dayGridWeek false
• resourceTimelineDay false
• resourceTimelineMonth false
• resourceTimelineWeek false
• resourceTimelineYear false

Determines whether to display an event’s end time.

dragConstraint

• Type function
• Default undefined
• Requires Interaction plugin

Callback function that limits the date/time range into which events are allowed to be dragged.

The function is triggered during dragging for each cursor movement and takes the same parameters as eventDrop. The function should return true if dragging to the new position is allowed, and false otherwise.

dragScroll

• Type boolean
• Default true
• Requires Interaction plugin

Determines whether the calendar should automatically scroll during the event drag-and-drop when the mouse crosses the edge.

duration

• Type string, integer or object
• Default {weeks: 1}

Views override the default value as follows:

• dayGridDay {days: 1}
• dayGridMonth {months: 1}
• listDay {days: 1}
• listMonth {months: 1}
• listYear {years: 1}
• resourceTimeGridDay {days: 1}
• resourceTimelineDay {days: 1}
• resourceTimelineMonth {months: 1}
• resourceTimelineYear {years: 1}
• timeGridDay {days: 1}

Sets the duration of a view.

This should be a value that can be parsed into a Duration object.

editable

• Type boolean
• Default false
• Requires Interaction plugin

Determines whether the events on the calendar can be dragged and resized (both at the same time).

If you don't need both, use the more specific eventStartEditable and eventDurationEditable instead.

events

• Type array
• Default []

Array of plain objects that will be parsed into Event objects and displayed on the calendar.

This option is not used if the eventSources option is provided.

eventAllUpdated

• Type function
• Default undefined

Callback function that is triggered when all events have finished updating.

This is an experimental feature and its behavior may change in the future. The function is called at the end of the cycle of rendering all events. The rendering occurs when new events are added, already displayed events are modified, or events are deleted.

function (info) { }

info is an object with the following properties:

eventBackgroundColor

• Type string
• Default undefined

Sets the default background color for events on the calendar.

You can use any of the CSS color formats such '#f00', '#ff0000', 'rgb(255,0,0)', or 'red'.

eventClassNames

• Type string, array or function
• Default undefined

Sets additional CSS classes for events.

This value can be either a string containing class names 'class-1 class-2 ...', an array of strings ['class-1', 'class-2', ...] or a function that returns any of the above formats:

function (info) {
    // return string or array
}

info is an object with the following properties:

eventClick

• Type function
• Default undefined

Callback function that is triggered when the user clicks an event.

function (info) { }

info is an object with the following properties:

eventColor

• Type string
• Default undefined

This is currently an alias for the eventBackgroundColor.

eventContent

• Type Content or function
• Default undefined

Defines the content that is rendered inside an event’s element.

This value can be either a Content or a function that returns content or undefined:

function (info) {
    // return Content or undefined
}

info is an object with the following properties:

In case the function returns undefined, the event will be rendered in the default way.

eventDidMount

• Type function
• Default undefined

Callback function that is triggered right after the element has been added to the DOM. If the event data changes, this is not called again.

function (info) { }

info is an object with the following properties:

eventDragMinDistance

• Type integer
• Default 5
• Requires Interaction plugin

Defines how many pixels the user’s mouse must move before the event dragging begins.

eventDragStart

• Type function
• Default undefined
• Requires Interaction plugin

Callback function that is triggered when the event dragging begins.

function (info) { }

info is an object with the following properties:

eventDragStop

• Type function
• Default undefined
• Requires Interaction plugin

Callback function that is triggered when the event dragging stops.

It is triggered before the event’s information has been modified (if moved to a new date/time) and before the eventDrop callback is triggered.

function (info) { }

info is an object with the following properties:

eventDrop

• Type function
• Default undefined
• Requires Interaction plugin

Callback function that is triggered when dragging stops, and the event has moved to a different day/time.

It is triggered after the event’s information has been modified and after the eventDragStop callback has been triggered.

function (info) { }

info is an object with the following properties:

eventDurationEditable

• Type boolean
• Default true
• Requires Interaction plugin

Determines whether calendar events can be resized.

eventFilter

• Type function
• Default undefined

A function for filtering the array of events before displaying them in the calendar. It allows, for example, to display only specific events for each view.

function (info) {
    // return true to keep the event, false to exclude it
}

info is an object with the following properties:

eventGap

• Type integer
• Default 1

Defines the vertical gap in pixels between events that are stacked on top of each other within the same day. Applies to DayGrid, the all-day section of TimeGrid/ResourceTimeGrid, and ResourceTimeline views.

eventLongPressDelay

• Type integer
• Default undefined
• Requires Interaction plugin

For touch devices, the amount of time (in milliseconds) the user must hold down a tap before the event becomes draggable/resizable.

If not specified, it falls back to longPressDelay.

eventMouseEnter

• Type function
• Default undefined

Callback function that is triggered when the user hovers over an event with the cursor (mouse pointer).

function (info) { }

info is an object with the following properties:

eventMouseLeave

• Type function
• Default undefined

Callback function that is triggered when the cursor (mouse pointer) is moved out of an event.

function (info) { }

info is an object with the following properties:

eventOrder

• Type function
• Default undefined

A function that determines the order in which events that visually intersect in the current view are displayed.

When eventOrder is not specified, events are ordered by start time with all-day events appearing first.

function (a, b) {
    // Return a negative value if 'a' should come before 'b'
    // Return a positive value if 'a' should come after 'b'
    // Return zero if 'a' and 'b' are equal
}

a and b are Event objects.

eventOrderStrict

• Type boolean
• Default false

Determines whether eventOrder is followed strictly in resourceTimeline views.

By default, the layout prioritizes compactness: an event is placed in the topmost free slot, which means it can move above earlier-ordered events when there is empty space above them. When set to true, events keep their vertical order — an event is never placed above another event that comes before it in eventOrder and overlaps it, even if free space is available.

This is useful, for example, when a parent event should always stay above its child events (order them so the parent comes first and enable this option).

eventResizableFromStart

• Type boolean
• Default false
• Requires Interaction plugin

Determines whether the event can be resized from its starting edge.

eventResize

• Type function
• Default undefined
• Requires Interaction plugin

Callback function that is triggered when resizing stops, and the duration of the event has changed.

It is triggered after the event’s information has been modified and after the eventResizeStop callback has been triggered.

function (info) { }

info is an object with the following properties:

eventResizeStart

• Type function
• Default undefined
• Requires Interaction plugin

Callback function that is triggered when the event resizing begins.

function (info) { }

info is an object with the following properties:

eventResizeStop

• Type function
• Default undefined
• Requires Interaction plugin

Callback function that is triggered when the event resizing stops.

It is triggered before the event’s information has been modified (if duration is changed) and before the eventResize callback is triggered.

function (info) { }

info is an object with the following properties:

eventSources

• Type EventSource[]
• Default []

Array of EventSource objects that will provide EventCalendar with data about events.

This option is used instead of the events option.

EventSource should be an object with one of the following sets of properties:

1. Fetch events from a URL

2. Execute custom function

function(fetchInfo, successCallback, failureCallback) { }

eventStartEditable

• Type boolean
• Default true
• Requires Interaction plugin

Determines whether the events on the calendar can be dragged.

eventTimeFormat

• Type object or function
• Default {hour: 'numeric', minute: '2-digit'}

Defines the time-text that is displayed on each event.

This value can be either an object with options for the native JavaScript Intl.DateTimeFormat object, or a callback function that returns a Content with the formatted string:

function (start, end) {
    // return Content with the formatted time string
}

eventTextColor

• Type string
• Default undefined

Sets the default text color for calendar events (except for list view).

You can use any of the CSS color formats such '#f00', '#ff0000', 'rgb(255,0,0)', or 'red'.

filterEventsWithResources

• Type boolean
• Default false

Determines whether events that do not belong to the current array of resources should be hidden in dayGrid/timeGrid/list views.

filterResourcesWithEvents

• Type boolean
• Default false

Determines whether resources with no events for the current range should be hidden in the resource view. Background events are not taken into account.

firstDay

• Type integer
• Default 0

The day that each week begins at, where Sunday is 0, Monday is 1, etc. Saturday is 6.

flexibleSlotTimeLimits

• Type boolean or object
• Default false

Determines whether slotMinTime and slotMaxTime should automatically expand when an event goes out of bounds.

If set to true, then the decision on whether to expand the limits will be made based on the analysis of currently displayed events, but excluding background events.

If you want background events not to be ignored, then instead of true you can pass an object with the following properties:

function(event) {
    // return true or false
}

headerToolbar

• Type object
• Default {start: 'title', center: '', end: 'today prev,next'}

Defines the buttons and title at the top of the calendar.

An object can be supplied with properties start,center,end. These properties contain strings with comma/space separated values. Values separated by a comma will be displayed adjacently. Values separated by a space will be displayed with a small gap in between. Strings can contain any of the following values:

height

• Type string
• Default undefined

Defines the height of the entire calendar.

This should be a valid CSS value like '100%' or '600px'.

hiddenDays

• Type array
• Default []

Exclude certain days-of-the-week from being displayed, where Sunday is 0, Monday is 1, etc. Saturday is 6.

highlightedDates

• Type array
• Default []

Array of dates that need to be highlighted in the calendar.

Each date can be either an ISO8601 date string like '2026-12-31', or a JavaScript Date object.

icons

• Type object
• Default {collapse: {html: '−'}, expand: {html: '+'}}

Defines icons used in some buttons, such as those for expanding nested resources in resourceTimeline views.

Each icon is specified as a Content value.

This option can be either a plain object with all necessary properties, or a callback function that receives default icons object and should return a new one:

function (icons) {
  // return new icons object
}

lazyFetching

• Type boolean
• Default true

Determines when event and resource fetching should occur.

When set to true (the default), the calendar will only fetch events when it absolutely needs to, minimizing HTTP requests. For example, say your calendar starts out in month view, in February. EventCalendar will fetch events for the entire month of February and store them in its internal storage. Then, say the user switches to week view and begins browsing the weeks in February. The calendar will avoid fetching events because it already has this information stored.

When set to false, the calendar will fetch events any time the current date changes (for example, as a result of the user clicking prev/next).

This also applies to resources if refetchResourcesOnNavigate is enabled.

listDayFormat

• Type object or function
• Default {weekday: 'long'}

Defines the text on the left side of the day headings in list view.

This value can be either an object with options for the native JavaScript Intl.DateTimeFormat object, or a callback function that returns a Content with the formatted string:

function (date) {
  // return Content with the formatted date string
}

listDaySideFormat

• Type object or function
• Default {year: 'numeric', month: 'long', day: 'numeric'}

Defines the text on the right side of the day headings in list view.

This value can be either an object with options for the native JavaScript Intl.DateTimeFormat object, or a callback function that returns a Content with the formatted string:

function (date) {
  // return Content with the formatted date string
}

loading

• Type function
• Default undefined

Callback function that is triggered when event or resource fetching starts/stops.

function (isLoading) { }

locale

• Type string
• Default undefined

Defines the locales parameter for the native JavaScript Intl.DateTimeFormat object that EventCalendar uses to format date and time strings in options such as dayHeaderFormat, eventTimeFormat, etc.

longPressDelay

• Type integer
• Default 1000

For touch devices, the amount of time (in milliseconds) the user must hold down a tap before the event becomes draggable/resizable or the date becomes selectable.

For a more granular configuration, see eventLongPressDelay and selectLongPressDelay.

monthHeaderFormat

• Type object or function
• Default {month: 'long'}

Defines the text that is displayed in month headings in resourceTimelineYear view.

This value can be either an object with options for the native JavaScript Intl.DateTimeFormat object, or a callback function that returns a Content with the formatted string:

function (date) {
  // return Content with the formatted date string
}

moreLinkContent

• Type Content or function
• Default undefined

Defines the text that is displayed instead of the default +2 more created by the dayMaxEvents option.

This value can be either a Content or a function that returns content:

function (arg) {
  // return Content
}

arg is an object with the following properties:

noEventsClick

• Type function
• Default undefined

Callback function that is triggered when the user clicks No events area in list view.

function (info) { }

info is an object with the following properties:

noEventsContent

• Type Content or function
• Default 'No events'

Defines the text that is displayed in list view when there are no events to display.

This value can be either a Content or a function that returns content:

function () {
  // return Content
}

nowIndicator

• Type boolean
• Default false

Enables a marker indicating the current time in timeGrid/resourceTimeGrid views.

pointer

• Type boolean
• Default false
• Requires Interaction plugin

Enables mouse cursor pointer in timeGrid/resourceTimeGrid and other views.

refetchResourcesOnNavigate

• Type boolean
• Default false

Determines whether to refetch resources when the user navigates to a different date.

resizeConstraint

• Type function
• Default undefined
• Requires Interaction plugin

Callback function that limits the date/time range within which the event is allowed to resize.

The function is triggered during resizing for each cursor movement and takes the same parameters as eventResize. The function should return true if the new size is allowed, and false otherwise.

resourceExpand

• Type function
• Default undefined

Callback function that is triggered when a resource with nested children is expanded or collapsed in resourceTimeline views.

function (info) { }

info is an object with the following properties:

resources

• Type array, object or function
• Default []

Defines the source of resource data displayed in resource views. It can be provided in one of three ways:

1. Array of plain objects

If the resources are predefined and do not change, then pass them as an array of plain objects. The provided plain objects will be parsed into Resource objects.

2. Fetch resources from a URL

To make the calendar load resources from a URL, specify resources option as an object with the following properties:

3. Execute custom function

You can also specify resources as a custom function that provides resource data.

function(fetchInfo, successCallback, failureCallback) { }

If refetchResourcesOnNavigate is enabled, the function will be called every time the user navigates to a different date. In this case, fetchInfo will be an object with the following properties (it is an empty object otherwise):

The successCallback function must be called by the custom function with an array of parsable Resource objects.

If there is any failure (e.g., if an AJAX request fails), then call the failureCallback instead. It accepts an argument with information about the failure.

Instead of calling successCallback and failureCallback, you may return the resulting array of resources or return a Promise (or thenable) object instead.

resourceLabelContent

• Type string, objector function
• Default undefined

Defines the content that is rendered inside an element with a resource title.

This value can be either a Content or a function that returns content:

function (info) {
    // return Content
}

info is an object with the following properties:

resourceLabelDidMount

• Type function
• Default undefined

Callback function that is triggered right after the element has been added to the DOM. If the resource data changes, this is not called again.

function (info) { }

info is an object with the following properties:

scrollTime

• Type string, integer or object
• Default '06:00:00'

Determines how far forward the scroll pane is initially scrolled.

This should be a value that can be parsed into a Duration object.

select

• Type function
• Default undefined
• Requires Interaction plugin

Callback function that is triggered when a date/time selection is made.

function (info) { }

info is an object with the following properties:

selectable

• Type boolean
• Default false
• Requires Interaction plugin

Determines whether the user is allowed to highlight multiple days or time slots by clicking and moving the pointer.

selectConstraint

• Type function
• Default undefined
• Requires Interaction plugin

Callback function that limits the date/time range that can be selected.

The function is triggered during selection for each cursor movement and takes the same parameters as select. The function should return true if the selected range is allowed, and false otherwise.

selectBackgroundColor

• Type string
• Default undefined
• Requires Interaction plugin

Sets the background color for the event indicating the current selection. See selectable.

You can use any of the CSS color formats such '#f00', '#ff0000', 'rgb(255,0,0)', or 'red'.

selectLongPressDelay

• Type integer
• Default undefined
• Requires Interaction plugin

For touch devices, the amount of time (in milliseconds) the user must hold down a tap before the date becomes selectable.

If not specified, it falls back to longPressDelay.

selectMinDistance

• Type integer
• Default 5
• Requires Interaction plugin

Defines how many pixels the user’s mouse must move before the selection begins.

slotDuration

• Type string, integer or object
• Default '00:30:00'

Views override the default value as follows:

• resourceTimelineMonth {days: 1}
• resourceTimelineYear {days: 1}

Defines the frequency for displaying time slots.

This should be a value that can be parsed into a Duration object.

slotEventOverlap

• Type boolean
• Default true

Determines whether events in the timeGrid/resourceTimeGrid views should visually overlap when they intersect in time.