@event-calendar/core
Version:
Full-sized drag & drop event calendar with resource & timeline views
2,168 lines (1,721 loc) • 82.8 kB
Markdown
# EventCalendar [](https://www.jsdelivr.com/package/npm/@event-calendar/build) [](https://www.npmjs.com/package/@event-calendar/core)
See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
Full-sized drag & drop JavaScript event calendar with resource & timeline views:
* Lightweight (35kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
* Feature-rich, performant, and with minimal DOM structure (thanks to [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout))
* Zero-dependency (standalone bundle)
* Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar options.
### Featured sponsors
<table>
<tr>
<td>
[](https://github.com/steveb85)
</td>
<td>
:heavy_plus_sign: [Get on the list](https://github.com/sponsors/vkurko)
</td>
</tr>
</table>
## Table of contents
- [Usage](#usage)
- [JavaScript module](#javascript-module)
- [Svelte 5 component](#svelte-5-component)
- [Standalone bundle](#standalone-bundle)
- [Modifying options after initialization](#modifying-options-after-initialization)
- [Options](#options)
<table>
<tr><td>
- [allDayContent](#alldaycontent)
- [allDaySlot](#alldayslot)
- [buttonText](#buttontext)
- [columnWidth](#columnwidth)
- [customButtons](#custombuttons)
- [customScrollbars](#customscrollbars)
- [date](#date)
- [dateClick](#dateclick)
- [datesAboveResources](#datesaboveresources)
- [datesSet](#datesset)
- [dayCellFormat](#daycellformat)
- [dayHeaderAriaLabelFormat](#dayheaderarialabelformat)
- [dayHeaderFormat](#dayheaderformat)
- [dayMaxEvents](#daymaxevents)
- [dayPopoverFormat](#daypopoverformat)
- [displayEventEnd](#displayeventend)
- [dragConstraint](#dragconstraint)
- [dragScroll](#dragscroll)
- [duration](#duration)
- [editable](#editable)
- [events](#events)
- [eventAllUpdated](#eventallupdated)
- [eventBackgroundColor](#eventbackgroundcolor)
- [eventClassNames](#eventclassnames)
- [eventClick](#eventclick)
- [eventColor](#eventcolor)
- [eventContent](#eventcontent)
- [eventDidMount](#eventdidmount)
- [eventDragMinDistance](#eventdragmindistance)
- [eventDragStart](#eventdragstart)
- [eventDragStop](#eventdragstop)
- [eventDrop](#eventdrop)
- [eventDurationEditable](#eventdurationeditable)
</td><td>
- [eventFilter](#eventfilter)
- [eventLongPressDelay](#eventlongpressdelay)
- [eventMouseEnter](#eventmouseenter)
- [eventMouseLeave](#eventmouseleave)
- [eventOrder](#eventorder)
- [eventResizableFromStart](#eventresizablefromstart)
- [eventResize](#eventresize)
- [eventResizeStart](#eventresizestart)
- [eventResizeStop](#eventresizestop)
- [eventSources](#eventsources)
- [eventStartEditable](#eventstarteditable)
- [eventTextColor](#eventtextcolor)
- [eventTimeFormat](#eventtimeformat)
- [filterEventsWithResources](#filtereventswithresources)
- [filterResourcesWithEvents](#filterresourceswithevents)
- [firstDay](#firstday)
- [flexibleSlotTimeLimits](#flexibleslottimelimits)
- [headerToolbar](#headertoolbar)
- [height](#height)
- [hiddenDays](#hiddendays)
- [highlightedDates](#highlighteddates)
- [icons](#icons)
- [lazyFetching](#lazyfetching)
- [listDayFormat](#listdayformat)
- [listDaySideFormat](#listdaysideformat)
- [loading](#loading)
- [locale](#locale)
- [longPressDelay](#longpressdelay)
- [moreLinkContent](#morelinkcontent)
- [noEventsClick](#noeventsclick)
- [noEventsContent](#noeventscontent)
- [nowIndicator](#nowindicator)
- [pointer](#pointer)
</td><td>
- [refetchResourcesOnNavigate](#refetchresourcesonnavigate)
- [resizeConstraint](#resizeconstraint)
- [resourceExpand](#resourceexpand)
- [resources](#resources)
- [resourceLabelContent](#resourcelabelcontent)
- [resourceLabelDidMount](#resourcelabeldidmount)
- [scrollTime](#scrolltime)
- [select](#select)
- [selectable](#selectable)
- [selectBackgroundColor](#selectbackgroundcolor)
- [selectConstraint](#selectconstraint)
- [selectLongPressDelay](#selectlongpressdelay)
- [selectMinDistance](#selectmindistance)
- [slotDuration](#slotduration)
- [slotEventOverlap](#sloteventoverlap)
- [slotHeight](#slotheight)
- [slotLabelFormat](#slotlabelformat)
- [slotLabelInterval](#slotlabelinterval)
- [slotMaxTime](#slotmaxtime)
- [slotMinTime](#slotmintime)
- [slotWidth](#slotwidth)
- [snapDuration](#snapduration)
- [theme](#theme)
- [titleFormat](#titleformat)
- [unselect](#unselect)
- [unselectAuto](#unselectauto)
- [unselectCancel](#unselectcancel)
- [validRange](#validrange)
- [view](#view)
- [viewDidMount](#viewdidmount)
- [views](#views)
- [weekNumberContent](#weeknumbercontent)
- [weekNumbers](#weeknumbers)
</td></tr>
</table>
- [Methods](#methods)
<table>
<tr><td>
- [getOption](#getoption-name-)
- [setOption](#setoption-name-value-)
</td><td>
- [addEvent](#addevent-event-)
- [getEventById](#geteventbyid-id-)
- [getEvents](#getevents)
- [removeEventById](#removeeventbyid-id-)
- [updateEvent](#updateevent-event-)
</td><td>
- [refetchEvents](#refetchevents)
- [refetchResources](#refetchresources)
</td><td>
- [dateFromPoint](#datefrompoint-x-y-)
- [getView](#getview)
- [next](#next)
- [prev](#prev)
- [unselect](#unselect-1)
</td></tr>
</table>
- [Content](#content)
- [Event object](#event-object)
- [Parsing event from a plain object](#parsing-event-from-a-plain-object)
- [Duration object](#duration-object)
- [Parsing duration from input values](#parsing-duration-from-input-values)
- [Resource object](#resource-object)
- [Parsing resource from a plain object](#parsing-resource-from-a-plain-object)
- [View object](#view-object)
- [Theming](#theming)
- [Browser support](#browser-support)
## Usage
### JavaScript module
The first step is to install the EventCalendar `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);
```
### Svelte 5 component
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
<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:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.4.0/dist/event-calendar.min.css">
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.4.0/dist/event-calendar.min.js"></script>
```
<details>
<summary>Note</summary>
> 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
> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build/dist/event-calendar.min.css">
> <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build/dist/event-calendar.min.js"></script>
> ```
> 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.
</details>
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);
```
### Modifying options after initialization
You can modify the calendar options after initialization using the [setOption](#setoption-name-value-) method.
```js
ec.setOption('slotDuration', '01:00');
```
In Svelte, you can simply update the original `options` object.
```html
<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](#content) or a function that returns content:
```js
function (arg) {
// return Content
}
```
`arg` is an object with the following properties:
<table>
<tr>
<td>
`text`
</td>
<td>
The default text
</td>
</tr>
</table>
### 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`
<ul>
<li>
<details>
<summary>Default</summary>
`{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'})`
</details>
</li>
</ul>
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
}
```
<table>
<tr>
<td>
`text`
</td>
<td>An object with default button text</td>
</tr>
</table>
### columnWidth
- Type `string`
- Default `undefined`
Defines the column width in `timeGrid`/`resourceTimeGrid` views.
This option accepts a CSS [length](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns#values) 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](#headertoolbar).
First, specify the custom buttons as key-value pairs. Then reference them from the `headerToolbar` option.
<details>
<summary>Example</summary>
```js
let options = {
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
start: 'title myCustomButton',
center: '',
end: 'today prev,next'
}
};
```
</details>
Each `customButton` entry accepts the following properties:
<table>
<tr>
<td>
`text`
</td>
<td>
The text to be display on the button itself. See [Content](#content)
</td>
</tr>
<tr>
<td>
`click`
</td>
<td>A callback function that is called when the button is clicked. Accepts one argument <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent">mouseEvent</a></td>
</tr>
<tr>
<td>
`active`
</td>
<td>
If `true`, the button will appear pressed/active
</td>
</tr>
</table>
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
}
```
<table>
<tr>
<td>
`customButtons`
</td>
<td>An object with default custom buttons</td>
</tr>
</table>
### customScrollbars
- Type `boolean`
- Default `false`
Enables scrollbars styling, which in turn prevents the scrollbars from being hidden in [supported](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-scrollbar#browser_compatibility) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-scrollbar#browser_compatibility) 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.
```js
function (info) {}
```
`info` is an object with the following properties:
<table>
<tr>
<td>
`date`
</td>
<td>JavaScript Date object for the clicked date and time</td>
</tr>
<tr>
<td>
`dateStr`
</td>
<td>ISO8601 string representation of the date</td>
</tr>
<tr>
<td>
`allDay`
</td>
<td>
`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</td>
</tr>
<tr>
<td>
`dayEl`
</td>
<td>HTML element that represents the whole-day that was clicked on</td>
</tr>
<tr>
<td>
`jsEvent`
</td>
<td>JavaScript native event object with low-level information such as click coordinates</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
<tr>
<td>
`resource`
</td>
<td>
If the current view is a resource view, the [Resource](#resource-object) object that owns this date
</td>
</tr>
</table>
### 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.
```js
function (info) {}
```
`info` is an object with the following properties:
<table>
<tr>
<td>
`start`
</td>
<td>JavaScript Date object for the beginning of the range the calendar needs events for</td>
</tr>
<tr>
<td>
`end`
</td>
<td>JavaScript Date object for the end of the range the calendar needs events for. Note: This value is exclusive</td>
</tr>
<tr>
<td>
`startStr`
</td>
<td>ISO8601 string representation of the start date</td>
</tr>
<tr>
<td>
`endStr`
</td>
<td>ISO8601 string representation of the end date</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
### 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
```js
function (date) {
// return Content with the formatted date string
}
```
<table>
<tr>
<td>
`date`
</td>
<td>JavaScript Date object that needs to be formatted</td>
</tr>
</table>
### 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns formatted string:
```js
function (date) {
// return formatted date string
}
```
<table>
<tr>
<td>
`date`
</td>
<td>JavaScript Date object that needs to be formatted</td>
</tr>
</table>
### 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'}`
> - 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
```js
function (date) {
// return Content with the formatted date string
}
```
<table>
<tr>
<td>
`date`
</td>
<td>JavaScript Date object that needs to be formatted</td>
</tr>
</table>
### 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](#daymaxevents) option.
This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
```js
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`
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](#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}`
> - timeGridDay `{days: 1}`
Sets the duration of a view.
This should be a value that can be parsed into a [Duration](#duration-object) 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](#eventstarteditable) and [eventDurationEditable](#eventdurationeditable) instead.
### events
- Type `array`
- Default `[]`
Array of plain objects that will be [parsed](#parsing-event-from-a-plain-object) into [Event](#event-object) 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.
```js
function (info) { }
```
`info` is an object with the following properties:
<table>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
### 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:
```js
function (info) {
// return string or array
}
```
`info` is an object with the following properties:
<table>
<tr>
<td>
`event`
</td>
<td>
The associated [Event](#event-object) object
</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
### eventClick
- Type `function`
- Default `undefined`
Callback function that is triggered when the user clicks an event.
```js
function (info) { }
```
`info` is an object with the following properties:
<table>
<tr>
<td>
`el`
</td>
<td>The HTML element for the event</td>
</tr>
<tr>
<td>
`event`
</td>
<td>
The associated [Event](#event-object) object
</td>
</tr>
<tr>
<td>
`jsEvent`
</td>
<td>JavaScript native event object with low-level information such as click coordinates</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
### 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](#content) or a function that returns content or `undefined`:
```js
function (info) {
// return Content or undefined
}
```
`info` is an object with the following properties:
<table>
<tr>
<td>
`event`
</td>
<td>
The associated [Event](#event-object) object
</td>
</tr>
<tr>
<td>
`timeText`
</td>
<td>Formatted time of the event</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
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.
```js
function (info) { }
```
`info` is an object with the following properties:
<table>
<tr>
<td>
`el`
</td>
<td>The HTML element for the event</td>
</tr>
<tr>
<td>
`event`
</td>
<td>
The associated [Event](#event-object) object
</td>
</tr>
<tr>
<td>
`timeText`
</td>
<td>Formatted time of the event</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
### 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.
```js
function (info) { }
```
`info` is an object with the following properties:
<table>
<tr>
<td>
`event`
</td>
<td>
The associated [Event](#event-object) object
</td>
</tr>
<tr>
<td>
`jsEvent`
</td>
<td>JavaScript native event object with low-level information such as click coordinates</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
### 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](#eventdrop) callback is triggered.
```js
function (info) { }
```
`info` is an object with the following properties:
<table>
<tr>
<td>
`event`
</td>
<td>
The associated [Event](#event-object) object
</td>
</tr>
<tr>
<td>
`jsEvent`
</td>
<td>JavaScript native event object with low-level information such as click coordinates</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
### 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](#eventdragstop) callback has been triggered.
```js
function (info) { }
```
`info` is an object with the following properties:
<table>
<tr>
<td>
`event`
</td>
<td>
The associated [Event](#event-object) object
</td>
</tr>
<tr>
<td>
`oldEvent`
</td>
<td>
An [Event](#event-object) object that holds information about the event before the drop
</td>
</tr>
<tr>
<td>
`oldResource`
</td>
<td>
If the resource has changed, this is the [Resource](#resource-object) object the event came from. If the resource has not changed, this will be undefined
</td>
</tr>
<tr>
<td>
`newResource`
</td>
<td>
If the resource has changed, this is the [Resource](#resource-object) object the event went to. If the resource has not changed, this will be undefined
</td>
</tr>
<tr>
<td>
`delta`
</td>
<td>
A [Duration](#duration-object) object that represents the amount of time the event was moved by
</td>
</tr>
<tr>
<td>
`revert`
</td>
<td>
A function that, if called, reverts the event’s start/end date to the values before the drag
</td>
</tr>
<tr>
<td>
`jsEvent`
</td>
<td>JavaScript native event object with low-level information such as click coordinates</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
### 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.
```js
function (info) {
// return true to keep the event, false to exclude it
}
```
`info` is an object with the following properties:
<table>
<tr>
<td>
`event`
</td>
<td>
The current [Event](#event-object) object being processed in the array
</td>
</tr>
<tr>
<td>
`index`
</td>
<td>The index of the current event being processed in the array</td>
</tr>
<tr>
<td>
`events`
</td>
<td>
The array of all events `eventFilter` was called upon
</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
### 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](#longpressdelay).
### eventMouseEnter
- Type `function`
- Default `undefined`
Callback 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:
<table>
<tr>
<td>
`el`
</td>
<td>The HTML element for the event</td>
</tr>
<tr>
<td>
`event`
</td>
<td>
The associated [Event](#event-object) object
</td>
</tr>
<tr>
<td>
`jsEvent`
</td>
<td>JavaScript native event object with low-level information such as click coordinates</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
### eventMouseLeave
- Type `function`
- Default `undefined`
Callback 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:
<table>
<tr>
<td>
`el`
</td>
<td>The HTML element for the event</td>
</tr>
<tr>
<td>
`event`
</td>
<td>
The associated [Event](#event-object) object
</td>
</tr>
<tr>
<td>
`jsEvent`
</td>
<td>JavaScript native event object with low-level information such as click coordinates</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
### 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.
```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](#event-object) objects.
### 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](#eventresizestop) callback has been triggered.
```js
function (info) { }
```
`info` is an object with the following properties:
<table>
<tr>
<td>
`event`
</td>
<td>
The associated [Event](#event-object) object
</td>
</tr>
<tr>
<td>
`oldEvent`
</td>
<td>
An [Event](#event-object) object that holds information about the event before the resize
</td>
</tr>
<tr>
<td>
`startDelta`
</td>
<td>
A [Duration](#duration-object) object that represents the amount of time the event’s start date was moved by
</td>
</tr>
<tr>
<td>
`endDelta`
</td>
<td>
A [Duration](#duration-object) object that represents the amount of time the event’s end date was moved by
</td>
</tr>
<tr>
<td>
`revert`
</td>
<td>
A function that, if called, reverts the event’s end date to the values before the resize
</td>
</tr>
<tr>
<td>
`jsEvent`
</td>
<td>JavaScript native event object with low-level information such as click coordinates</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
### eventResizeStart
- Type `function`
- Default `undefined`
- Requires `Interaction` plugin
Callback function that is triggered when the event resizing begins.
```js
function (info) { }
```
`info` is an object with the following properties:
<table>
<tr>
<td>
`event`
</td>
<td>
The associated [Event](#event-object) object
</td>
</tr>
<tr>
<td>
`jsEvent`
</td>
<td>JavaScript native event object with low-level information such as click coordinates</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
### 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](#eventresize) callback is triggered.
```js
function (info) { }
```
`info` is an object with the following properties:
<table>
<tr>
<td>
`event`
</td>
<td>
The associated [Event](#event-object) object
</td>
</tr>
<tr>
<td>
`jsEvent`
</td>
<td>JavaScript native event object with low-level information such as click coordinates</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
### 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
<table>
<tr>
<td>
`url`
</td>
<td>
A URL from which the calendar will fetch an array of [parsable](#parsing-event-from-a-plain-object) [Event](#event-object) objects in JSON format. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data:
<table>
<tr>
<td>
`start`
</td>
<td>
Start date of the range the calendar needs events for
</td>
</tr>
<tr>
<td>
`end`
</td>
<td>
End date of the range the calendar needs events for
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
`method`
</td>
<td>
HTTP request method. Default `'GET'`
</td>
</tr>
<tr>
<td>
`extraParams`
</td>
<td>
Other GET/POST data you want to send to the server. Can be a plain object or a function that returns an object. Default `{}`
</td>
</tr>
</table>
#### 2. Execute custom function
<table>
<tr>
<td>
`events`
</td>
<td>
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:
<table>
<tr>
<td>
`start`
</td>
<td>JavaScript Date object for the beginning of the range the calendar needs events for</td>
</tr>
<tr>
<td>
`end`
</td>
<td>JavaScript Date object for the end of the range the calendar needs events for. Note: This value is exclusive</td>
</tr>
<tr>
<td>
`startStr`
</td>
<td>ISO8601 string representation of the start date</td>
</tr>
<tr>
<td>
`endStr`
</td>
<td>ISO8601 string representation of the end date</td>
</tr>
</table>
The `successCallback` function must be called by the custom function with an array of [parsable](#parsing-event-from-a-plain-object) [Event](#event-object) 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) (or [thenable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve)) object instead.
</td>
</tr>
</table>
### 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
```js
function (start, end) {
// return Content with the formatted time string
}
```
<table>
<tr>
<td>
`start`
</td>
<td>JavaScript Date object containing the beginning of the time span to be formatted</td>
</tr>
<tr>
<td>
`end`
</td>
<td>JavaScript Date object containing the end of the time span to be formatted</td>
</tr>
</table>
### 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](#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](#slotmintime) and [slotMaxTime](#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:
<table>
<tr>
<td>
`eventFilter`
</td>
<td>
A function to determine whether a given event should be taken into account or not.
```js
function(event) {
// return true or false
}
```
<table>
<tr>
<td>
`event`
</td>
<td>
[Event](#event-object) object to be analyzed.
The function must return `true` to have this event counted, or `false` to ignore it
</td>
</tr>
</table>
</td>
</tr>
</table>
### 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:
<table>
<tr>
<td>
`title`
</td>
<td>A text containing the current month/week/day</td>
</tr>
<tr>
<td>
`prev`
</td>
<td>A button for moving the calendar back one month/week/day</td>
</tr>
<tr>
<td>
`next`
</td>
<td>A button for moving the calendar forward one month/week/day</td>
</tr>
<tr>
<td>
`today`
</td>
<td>A button for moving the calendar to the current month/week/day</td>
</tr>
<tr>
<td>
_a view name like_ `dayGridMonth`
</td>
<td>A button that will switch the calendar to a specific view</td>
</tr>
</table>
### 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](#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:
```js
function (icons) {
// return new icons object
}
```
<table>
<tr>
<td>
`icons`
</td>
<td>An object with default icons</td>
</tr>
</table>
### 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](#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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
```js
function (date) {
// return Content with the formatted date string
}
```
<table>
<tr>
<td>
`date`
</td>
<td>JavaScript Date object that needs to be formatted</td>
</tr>
</table>
### 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
```js
function (date) {
// return Content with the formatted date string
}
```
<table>
<tr>
<td>
`date`
</td>
<td>JavaScript Date object that needs to be formatted</td>
</tr>
</table>
### loading
- Type `function`
- Default `undefined`
Callback function that is triggered when event or resource fetching starts/stops.
```js
function (isLoading) { }
```
<table>
<tr>
<td>
`isLoading`
</td>
<td>
`true` when the calendar begins fetching events or resources, `false` when it’s done.
</td>
</tr>
</table>
### locale
- Type `string`
- Default `undefined`
Defines the `locales` parameter for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#locales) object that EventCalendar uses to format date and time strings in options such as [dayHeaderFormat](#dayheaderformat), [eventTimeFormat](#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](#eventlongpressdelay) and [selectLongPressDelay](#selectlongpressdelay).
### moreLinkContent
- Type `Content` or `function`
- Default `undefined`
Defines the text that is displayed instead of the default `+2 more` created by the [dayMaxEvents](#daymaxevents) option.
This value can be either a [Content](#content) or a function that returns content:
```js
function (arg) {
// return Content
}
```
`arg` is an object with the following properties:
<table>
<tr>
<td>
`num`
</td>
<td>The number of hidden events</td>
</tr>
<tr>
<td>
`text`
</td>
<td>
The default text like `+2 more`
</td>
</tr>
</table>
### noEventsClick
- Type `function`
- Default `undefined`
Callback 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:
<table>
<tr>
<td>
`jsEvent`
</td>
<td>JavaScript native event object with low-level information such as click coordinates</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
### 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](#content) or a function that returns content:
```js
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](#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](#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.
```js
function (info) { }
```
`info` is an object with the following properties:
<table>
<tr>
<td>
`resource`
</td>
<td>
The associated [Resource](#resource-object) object
</td>
</tr>
<tr>
<td>
`jsEvent`
</td>
<td>JavaScript native event object with low-level information such as click coordinates</td>
</tr>
<tr>
<td>
`view`
</td>
<td>
The current [View](#view-object) object
</td>
</tr>
</table>
### 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]((#parsing-resource-from-a-plain-object)) into [Resource](#resource-object) 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:
<table>
<tr>
<td>
`url`
</td>
<td>
A URL from which the calendar will fetch an array of [parsable](#parsing-resource-from-a-plain-object) [Resource](#resource-object) objects in JSON format. If [refetchResourcesOnNavigate](#refetchresourcesonnavigate) is enabled then HTTP requests with the following parameters will be sent to the URL whenever the user navigates to a different date:
<table>
<tr>
<td>
`start`
</td>
<td>
Start date of the range the calendar needs resources for
</td>
</tr>
<tr>
<td>
`end`
</td>
<td>
End date of the range the calendar needs resources for
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
`method`
</td>
<td>
HTTP request method. Default `'GET'`
</td>
</tr>
<tr>
<td>
`extraParams`
</td>
<td>
Other GET/POST data you want to send to the server. Can be a plain object or a function that returns an object. Default `{}`
</td>
</tr>
</table>
#### 3. Execute custom function
You can also specify `resources` as a custom function that provides resource data.
```js
function(fetchInfo, successCallback, failureCallback) { }
`