Full-sized drag & drop event calendar with resource & timeline views
npm install @event-calendar/coreFull-sized drag & drop JavaScript event calendar with resource & timeline views:
* Lightweight (35kb br compressed)
* 100% human-coded
* Zero-dependency (standalone bundle)
* Used on over 70,000 websites with Bookly
Inspired by FullCalendar, it implements similar options.
 | :heavy_plus_sign: Get on the list |
- addEvent | - dateFromPoint |
core package:bash
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:
`js
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);
`$3
The first step is to install the EventCalendar core package:
`bash
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:
`html
`
The calendar is destroyed gracefully when the component containing it is destroyed.$3
This bundle contains a version of the calendar that includes all plugins and is prepared for use in the browser via the
Note
> Please note that the file paths contain an indication of a specific version of the library. You can remove this indication, then the latest version will be loaded:
>
`html
>
>
> `
> But it is recommended to always specify the version and explicitly update it if necessary, in order to avoid unpredictable problems when a new version of the library is released.Then initialize the calendar like this:
`js
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);
`$3
You can modify the calendar options after initialization using the setOption method.
`js
ec.setOption('slotDuration', '01:00');
`
In Svelte, you can simply update the original options object.
`html
`Options
$3
- 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:
`js
function (arg) {
// return Content
}
`
arg is an object with the following properties:
text
The default text
$3
- Type boolean
- Default trueDetermines 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.$3
- Type object or function
Default
{close: 'Close', dayGridDay: 'day', dayGridMonth: 'month', dayGridWeek: 'week', listDay: 'list', listMonth: 'list', listWeek: 'list', listYear: 'list', resourceTimeGridDay: 'resources', resourceTimeGridWeek: 'resources', resourceTimelineDay: 'timeline', resourceTimelineMonth: 'timeline', resourceTimelineWeek: 'timeline', 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'})
> - 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:
`js
function (text) {
// return new button text object
}
`
text
An object with default button text
$3
- Type string
- Default undefinedDefines 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.$3
- 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.
Example
`js
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:
text
The text to be display on the button itself. See Content
click
A callback function that is called when the button is clicked. Accepts one argument mouseEvent
active
If true, the button will appear pressed/active
This option can also be set as a callback function that receives default custom button object and should return a new one:
`js
function (customButtons) {
// return new custom buttons object
}
`
customButtons
An object with default custom buttons
$3
- Type boolean
- Default falseEnables 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.$3
- 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'.$3
- Type function
- Default undefined
- Requires Interaction pluginCallback function that is triggered when the user clicks on a date or a time.
`js
function (info) {}
`
info is an object with the following properties:
date
JavaScript Date object for the clicked date and time
dateStr
ISO8601 string representation of the date
allDay
true or false. Determines if the click has occurred in the all-day slot. Month and list views are also considered as all-day slots
dayEl
HTML element that represents the whole-day that was clicked on
jsEvent
JavaScript native event object with low-level information such as click coordinates
view
The current View object
resource
If the current view is a resource view, the Resource object that owns this date
$3
- Type boolean
- Default falseDetermines whether the resource view should render the date headings above the resource headings.
$3
- Type function
- Default undefinedCallback 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.
`js
function (info) {}
`
info is an object with the following properties:
start
JavaScript Date object for the beginning of the range the calendar needs events for
end
JavaScript Date object for the end of the range the calendar needs events for. Note: This value is exclusive
startStr
ISO8601 string representation of the start date
endStr
ISO8601 string representation of the end date
view
The current View object
$3
- 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:
`js
function (date) {
// return Content with the formatted date string
}
`
date
JavaScript Date object that needs to be formatted
$3
- 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:
`js
function (date) {
// return formatted date string
}
`
date
JavaScript Date object that needs to be formatted
$3
- 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'}
> - 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:
`js
function (date) {
// return Content with the formatted date string
}
`
date
JavaScript Date object that needs to be formatted
$3
- Type boolean
- Default falseDetermines 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.$3
- 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:
`js
function (date) {
// return Content with the formatted date string
}
`
$3
- Type boolean
- Default true
> Views override the default value as follows:
> - dayGridDay false
> - dayGridMonth false
> - dayGridWeek false
> - resourceTimelineDay false
> - resourceTimelineMonth false
> - resourceTimelineWeek falseDetermines whether to display an event’s end time.
$3
- Type function
- Default undefined
- Requires Interaction pluginCallback 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.$3
- Type boolean
- Default true
- Requires Interaction pluginDetermines whether the calendar should automatically scroll during the event drag-and-drop when the mouse crosses the edge.
$3
- 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}
> - timeGridDay {days: 1}Sets the duration of a view.
This should be a value that can be parsed into a Duration object.
$3
- Type boolean
- Default false
- Requires Interaction pluginDetermines 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.
$3
- 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.$3
- Type function
- Default undefinedCallback 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.
`js
function (info) { }
`
info is an object with the following properties:
view
The current View object
$3
- Type string
- Default undefinedSets 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'.$3
- Type string, array or function
- Default undefinedSets 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:`js
function (info) {
// return string or array
}
`
info is an object with the following properties:
event
The associated Event object
view
The current View object
$3
- Type function
- Default undefinedCallback function that is triggered when the user clicks an event.
`js
function (info) { }
`
info is an object with the following properties:
el
The HTML element for the event
event
The associated Event object
jsEvent
JavaScript native event object with low-level information such as click coordinates
view
The current View object
$3
- Type string
- Default undefinedThis is currently an alias for the
eventBackgroundColor.$3
- Type Content or function
- Default undefinedDefines 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:`js
function (info) {
// return Content or undefined
}
`
info is an object with the following properties:
event
The associated Event object
timeText
Formatted time of the event
view
The current View object
In case the function returns
undefined, the event will be rendered in the default way.$3
- Type function
- Default undefinedCallback function that is triggered right after the element has been added to the DOM. If the event data changes, this is not called again.
`js
function (info) { }
`
info is an object with the following properties:
el
The HTML element for the event
event
The associated Event object
timeText
Formatted time of the event
view
The current View object
$3
- Type integer
- Default 5
- Requires Interaction pluginDefines how many pixels the user’s mouse must move before the event dragging begins.
$3
- Type function
- Default undefined
- Requires Interaction pluginCallback function that is triggered when the event dragging begins.
`js
function (info) { }
`
info is an object with the following properties:
event
The associated Event object
jsEvent
JavaScript native event object with low-level information such as click coordinates
view
The current View object
$3
- Type function
- Default undefined
- Requires Interaction pluginCallback 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.
`js
function (info) { }
`
info is an object with the following properties:
event
The associated Event object
jsEvent
JavaScript native event object with low-level information such as click coordinates
view
The current View object
$3
- Type function
- Default undefined
- Requires Interaction pluginCallback 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.
`js
function (info) { }
`
info is an object with the following properties:
event
The associated Event object
oldEvent
An Event object that holds information about the event before the drop
oldResource
If the resource has changed, this is the Resource object the event came from. If the resource has not changed, this will be undefined
newResource
If the resource has changed, this is the Resource object the event went to. If the resource has not changed, this will be undefined
delta
A Duration object that represents the amount of time the event was moved by
revert
A function that, if called, reverts the event’s start/end date to the values before the drag
jsEvent
JavaScript native event object with low-level information such as click coordinates
view
The current View object
$3
- Type boolean
- Default true
- Requires Interaction pluginDetermines whether calendar events can be resized.
$3
- Type function
- Default undefinedA 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.
`js
function (info) {
// return true to keep the event, false to exclude it
}
`
info is an object with the following properties:
event
The current Event object being processed in the array
index
The index of the current event being processed in the array
events
The array of all events eventFilter was called upon
view
The current View object
$3
- Type integer
- Default undefined
- Requires Interaction pluginFor 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.
$3
- Type function
- Default undefinedCallback function that is triggered when the user hovers over an event with the cursor (mouse pointer).
`js
function (info) { }
`
info is an object with the following properties:
el
The HTML element for the event
event
The associated Event object
jsEvent
JavaScript native event object with low-level information such as click coordinates
view
The current View object
$3
- Type function
- Default undefinedCallback function that is triggered when the cursor (mouse pointer) is moved out of an event.
`js
function (info) { }
`
info is an object with the following properties:
el
The HTML element for the event
event
The associated Event object
jsEvent
JavaScript native event object with low-level information such as click coordinates
view
The current View object
$3
- Type function
- Default undefinedA 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.`js
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.$3
- Type boolean
- Default false
- Requires Interaction pluginDetermines whether the event can be resized from its starting edge.
$3
- Type function
- Default undefined
- Requires Interaction pluginCallback 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.
`js
function (info) { }
`
info is an object with the following properties:
event
The associated Event object
oldEvent
An Event object that holds information about the event before the resize
startDelta
A Duration object that represents the amount of time the event’s start date was moved by
endDelta
A Duration object that represents the amount of time the event’s end date was moved by
revert
A function that, if called, reverts the event’s end date to the values before the resize
jsEvent
JavaScript native event object with low-level information such as click coordinates
view
The current View object
$3
- Type function
- Default undefined
- Requires Interaction pluginCallback function that is triggered when the event resizing begins.
`js
function (info) { }
`
info is an object with the following properties:
event
The associated Event object
jsEvent
JavaScript native event object with low-level information such as click coordinates
view
The current View object
$3
- Type function
- Default undefined
- Requires Interaction pluginCallback 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.
`js
function (info) { }
`
info is an object with the following properties:
event
The associated Event object
jsEvent
JavaScript native event object with low-level information such as click coordinates
view
The current View object
$3
- 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
url
A URL from which the calendar will fetch an array of parsable Event objects in JSON format. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data:
start
Start date of the range the calendar needs events for
end
End date of the range the calendar needs events for
method
HTTP request method. Default 'GET'
extraParams
Other GET/POST data you want to send to the server. Can be a plain object or a function that returns an object. Default {}
#### 2. Execute custom function
events
A custom function that is executed whenever EventCalendar needs new event data.
`js
function(fetchInfo, successCallback, failureCallback) { }
`
fetchInfo is an object with the following properties:
start
JavaScript Date object for the beginning of the range the calendar needs events for
end
JavaScript Date object for the end of the range the calendar needs events for. Note: This value is exclusive
startStr
ISO8601 string representation of the start date
endStr
ISO8601 string representation of the end date
The successCallback function must be called by the custom function with an array of parsable Event 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 events or return a Promise (or thenable) object instead.
$3
- Type boolean
- Default true
- Requires Interaction pluginDetermines whether the events on the calendar can be dragged.
$3
- 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:
`js
function (start, end) {
// return Content with the formatted time string
}
`
start
JavaScript Date object containing the beginning of the time span to be formatted
end
JavaScript Date object containing the end of the time span to be formatted
$3
- Type string
- Default undefinedSets 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'.$3
- Type boolean
- Default falseDetermines whether events that do not belong to the current array of resources should be hidden in
dayGrid/timeGrid/list views.$3
- Type boolean
- Default falseDetermines whether resources with no events for the current range should be hidden in the resource view. Background events are not taken into account.
$3
- Type integer
- Default 0The day that each week begins at, where Sunday is
0, Monday is 1, etc. Saturday is 6.$3
- Type boolean or object
- Default falseDetermines 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:
eventFilter
A function to determine whether a given event should be taken into account or not.
`js
function(event) {
// return true or false
}
`
event
Event object to be analyzed.
The function must return true to have this event counted, or false to ignore it
$3
- 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:
title
A text containing the current month/week/day
prev
A button for moving the calendar back one month/week/day
next
A button for moving the calendar forward one month/week/day
today
A button for moving the calendar to the current month/week/day
_a view name like_ dayGridMonth
A button that will switch the calendar to a specific view
$3
- Type string
- Default undefinedDefines the height of the entire calendar.
This should be a valid CSS value like
'100%' or '600px'.$3
- Type array
- Default []Exclude certain days-of-the-week from being displayed, where Sunday is
0, Monday is 1, etc. Saturday is 6.$3
- 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.$3
- Type boolean
- Default trueDetermines 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.
$3
- 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:
`js
function (date) {
// return Content with the formatted date string
}
`
date
JavaScript Date object that needs to be formatted
$3
- 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:
`js
function (date) {
// return Content with the formatted date string
}
`
date
JavaScript Date object that needs to be formatted
$3
- Type function
- Default undefinedCallback function that is triggered when event or resource fetching starts/stops.
`js
function (isLoading) { }
`
isLoading
true when the calendar begins fetching events or resources, false when it’s done.
$3
- Type string
- Default undefinedDefines 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.$3
- Type integer
- Default 1000For 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.
$3
- Type Content or function
- Default undefinedDefines 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:
`js
function (arg) {
// return Content
}
`
arg is an object with the following properties:
num
The number of hidden events
text
The default text like +2 more
$3
- Type function
- Default undefinedCallback function that is triggered when the user clicks _No events_ area in list view.
`js
function (info) { }
`
info is an object with the following properties:
jsEvent
JavaScript native event object with low-level information such as click coordinates
view
The current View object
$3
- 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:
`js
function () {
// return Content
}
`$3
- Type boolean
- Default falseEnables a marker indicating the current time in
timeGrid/resourceTimeGrid views.$3
- Type boolean
- Default false
- Requires Interaction pluginEnables mouse cursor pointer in
timeGrid/resourceTimeGrid and other views.$3
- Type boolean
- Default falseDetermines whether to refetch resources when the user navigates to a different date.
$3
- Type function
- Default undefined
- Requires Interaction pluginCallback 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.$3
- 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:
url
A URL from which the calendar will fetch an array of parsable Resource objects in JSON format. If refetchResourcesOnNavigate is enabled then HTTP requests with the following parameters will be sent to the URL whenever the user navigates to a different date:
start
Start date of the range the calendar needs resources for
end
End date of the range the calendar needs resources for
method
HTTP request method. Default 'GET'
extraParams
Other GET/POST data you want to send to the server. Can be a plain object or a function that returns an object. Default {}
#### 3. Execute custom function
You can also specify
resources as a custom function that provides resource data.
`js
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):
start
JavaScript Date object for the beginning of the range the calendar needs resources for
end
JavaScript Date object for the end of the range the calendar needs resources for. Note: This value is exclusive
startStr
ISO8601 string representation of the start date
endStr
ISO8601 string representation of the end date
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.$3
- Type string, objector function
- Default undefinedDefines 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:
`js
function (info) {
// return Content
}
`
info is an object with the following properties:
resource
The associated Resource object
date
If it is a column that is within a specific date, this will be a Date object
$3
- Type function
- Default undefinedCallback function that is triggered right after the element has been added to the DOM. If the resource data changes, this is not called again.
`js
function (info) { }
`
info is an object with the following properties:
el
The HTML element for the label
resource
The associated Resource object
date
If it is a column that is within a specific date, this will be a Date object
$3
- 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.
$3
- Type function
- Default undefined
- Requires Interaction pluginCallback function that is triggered when a date/time selection is made.
`js
function (info) { }
`
info is an object with the following properties:
start
JavaScript Date object indicating the start of the selection
end
JavaScript Date object indicating the end of the selection
startStr
ISO8601 string representation of the start date
endStr
ISO8601 string representation of the end date
allDay
true or false. Determines if the selection has occurred in the all-day slot
jsEvent
JavaScript native event object with low-level information such as click coordinates
view
The current View object
resource
If the current view is a resource view, the Resource object that was selected
$3
- Type boolean
- Default false
- Requires Interaction pluginDetermines whether the user is allowed to highlight multiple days or time slots by clicking and moving the pointer.
$3
- Type function
- Default undefined
- Requires Interaction pluginCallback 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.$3
- Type string
- Default undefined
- Requires Interaction pluginSets 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'.$3
- Type integer
- Default undefined
- Requires Interaction pluginFor 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.
$3
- Type integer
- Default 5
- Requires Interaction pluginDefines how many pixels the user’s mouse must move before the selection begins.
$3
- Type string, integer or object
- Default '00:30:00'
> Views override the default value as follows:
> - resourceTimelineMonth {days: 1}Defines the frequency for displaying time slots.
This should be a value that can be parsed into a Duration object.
$3
- Type boolean
- Default trueDetermines whether events in the
timeGrid/resourceTimeGrid views should visually overlap when they intersect in time.If set to
false, then intersecting events will be placed next to each other.$3
- Type integer
- Default 24Defines the time slot height in pixels in the
timeGrid/resourceTimeGrid views.$3
- Type object or function
- Default {hour: 'numeric', minute: '2-digit'}Defines the text that will be displayed within a time slot.
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:
`js
function (time) {
// return Content with the formatted time string
}
`
time
JavaScript Date object that needs to be formatted
$3
- Type string, integer or object
- Default undefinedThe interval at which slot labels should be displayed in
timeGrid/resourceTimeline views.This should be a value that can be parsed into a Duration object.
If not specified, then if slotDuration is less than 1 hour, the interval is considered to be twice as long, i.e. the labels are displayed every other time.
If the interval is set to zero, then labels are displayed for all slots, including the very first one, which is not normally displayed in
timeGrid views.$3
- Type string, integer or object
- Default '24:00:00'Defines the last time slot that will be displayed for each day.
This should be a value that can be parsed into a Duration object.
$3
- Type string, integer or object
- Default '00:00:00'Defines the first time slot that will be displayed for each day.
This should be a value that can be parsed into a Duration object.
$3
- Type integer
- Default 32Defines the time slot width in pixels in
resourceTimeline views.$3
- Type string, integer or object
- Default undefinedDefines the step for the time axis along which an event is dragged, resized or selection is made.
This should be a value that can be parsed into a Duration object.
If not specified, then equal to slotDuration.
$3
- Type object or function
Default
'{allDay: 'ec-all-day', active: 'ec-active', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', colHead: 'ec-col-head', day: 'ec-day', dayHead: 'ec-day-head', disabled: 'ec-disabled', event: 'ec-event', eventBody: 'ec-event-body', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', grid: 'ec-grid', header: 'ec-header', hidden: 'ec-hidden', highlight: 'ec-highlight', icon: 'ec-icon', main: 'ec-main', noIeb: 'ec-no-ieb', noBeb: 'ec-no-beb', today: 'ec-today', title: 'ec-title', toolbar: 'ec-toolbar', view: 'ec-list ec-week-view', weekdays: ['ec-sun', ec-mon', ec-tue', ec-wed', ec-thu', ec-fri', ec-sat'], draggable: 'ec-draggable', ghost: 'ec-ghost', preview: 'ec-preview', pointer: 'ec-pointer', resizer: 'ec-resizer', start: 'ec-start', dragging: 'ec-dragging', resizingY: 'ec-resizing-y', resizingX: 'ec-resizing-x', selecting: 'ec-selecting', uniform: 'ec-uniform', dayFoot: 'ec-day-foot', otherMonth: 'ec-other-month', popup: 'ec-popup', weekNumber: 'ec-week-number', daySide: 'ec-day-side', eventTag: 'ec-event-tag', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', sidebar: 'ec-sidebar', slot: 'ec-slot', colGroup: 'ec-col-group', expander: 'ec-expander', rowHead: 'ec-row-head', slots: 'ec-slots}'
> Views override the default value as follows:
> - dayGridDay theme => ({...theme, view: 'ec-day-grid ec-day-view'})
> - dayGridMonth theme => ({...theme, view: 'ec-day-grid ec-month-view'})
> - dayGridWeek theme => ({...theme, view: 'ec-day-grid ec-week-view'})
> - listDay theme => ({...theme, view: 'ec-list ec-day-view'})
> - listMonth theme => ({...theme, view: 'ec-list ec-month-view'})
> - listWeek theme => ({...theme, view: 'ec-list ec-week-view'})
> - listYear theme => ({...theme, view: 'ec-list ec-year-view'})
> - resourceTimeGridDay theme => ({...theme, view: 'ec-resource ec-time-grid ec-day-view'})
> - resourceTimeGridWeek theme => ({...theme, view: 'ec-resource ec-time-grid ec-week-view'})
> - resourceTimelineDay theme => ({...theme, view: 'ec-resource ec-timeline ec-day-view'})
> - resourceTimelineMonth theme => ({...theme, view: 'ec-resource ec-timeline ec-month-view'})
> - resourceTimelineWeek theme => ({...theme, view: 'ec-resource ec-timeline ec-week-view'})
> - timeGridDay theme => ({...theme, view: 'ec-time-grid ec-day-view'})
> - timeGridWeek theme => ({...theme, view: 'ec-time-grid ec-week-view'})
Defines the CSS classes that EventCalendar uses to generate HTML markup.
This value can be either a plain object with all necessary properties, or a callback function that receives default theme object and should return a new one:
`js
function (theme) {
// return actual theme object
}
`
theme
An object with default CSS classes
$3
- Type object or function
- Default {year: 'numeric', month: 'short', day: 'numeric'}
> Views override the default value as follows:
> - dayGridMonth {year: 'numeric', month: 'long'}
> - timeGridDay {year: 'numeric', month: 'long', day: 'numeric'}Defines the text that is displayed in the header toolbar’s title.
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:
`js
function (start, end) {
// return Content with the formatted date string
}
`
start
JavaScript Date object containing the beginning of the time span to be formatted
end
JavaScript Date object containing the end of the time span to be formatted
$3
- Type function
- Default undefined
- Requires Interaction pluginCallback function that is triggered when the current selection is cleared.
A selection can be cleared for a number of reasons:
- The user clicks away from the current selection (this does not happen when unselectAuto is
false).
- The user makes a new selection. The unselect callback will be fired before the new selection occurs.
- The user navigates forward or backward in the current view, or switches to a new view.
- The unselect method is called via the API.`js
function (info) { }
`
info is an object with the following properties:
jsEvent
JavaScript native event object with low-level information such as click coordinates.
If unselect has been triggered via the unselect method, jsEvent will be undefined
view
The current View object
$3
- Type boolean
- Default true
- Requires Interaction pluginDetermines whether clicking elsewhere on the page will clear the current selection. See selectable.
$3
- Type string
- Default ''
- Requires Interaction pluginA CSS selector that specifies elements that will ignore the unselectAuto option.
Clicking on elements that match this CSS selector will prevent the current selection from being cleared (because of the unselectAuto option).
$3
- Type object
- Default undefinedIf set, the calendar will allow navigation only within the specified date range. Navigation buttons will be grayed out to prevent the user from navigating to an invalid range.
The range should be an object with the following properties:
start
string or Date This should be either an ISO8601 date string like '2026-12-31', or a JavaScript Date object holding the range start date
end
string or Date This should be either an ISO8601 date string like '2026-12-31', or a JavaScript Date object holding the range end date
It is not necessary to specify both properties. The range may have only
start and no end, or vice versa.$3
- Type string
- Default 'timeGridWeek'The view that is displayed in the calendar.
The following values are available:
-
'dayGridDay'
- 'dayGridWeek'
- 'dayGridMonth'
- 'listDay'
- 'listWeek'
- 'listMonth'
- 'listYear'
- 'resourceTimeGridDay'
- 'resourceTimeGridWeek'
- 'resourceTimelineDay'
- 'resourceTimelineWeek'
- 'resourceTimelineMonth'
- 'timeGridDay'
- 'timeGridWeek'$3
- Type function
- Default undefinedCallback function that is triggered right after the view has been added to the DOM.
`js
function (info) { }
`
info is an object with the following properties:
view
The mounted View object
$3
- Type object
- Default {}You can specify options that apply only to specific views. To do so provide separate options objects within the
views option, keyed by the name of the view.If you want to create a custom view, you can use the
type property to inherit options from a standard view.`js
views: {
resourceTimelineThreeDays: {
type: 'resourceTimelineDay',
duration: {days: 3}
}
}
`
$3
- Type Content or function
- Default undefinedDefines the text that is displayed in place of the default week number (such as
W01).This value can be either a Content or a function that returns content:
`js
function (arg) {
// return Content
}
`
arg is an object with the following properties:
date
JavaScript Date object containing the day within which the week number will be displayed
week
Calculated week number
$3
- Type boolean
- Default falseDetermines whether week numbers should be displayed in the
dayGrid view.The numbering of weeks depends on the value of firstDay. When
firstDay is 0, the Western system is used. Any other value uses the ISO system.Methods
Methods allow you to manipulate EventCalendar after initialization. They are accessible from the calendar instance.In Svelte, methods are available from a component instance:
``html