Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vkurko/calendar
Full-sized drag & drop JavaScript event calendar with resource view
https://github.com/vkurko/calendar
calendar event full-sized resource
Last synced: about 2 months ago
JSON representation
Full-sized drag & drop JavaScript event calendar with resource view
- Host: GitHub
- URL: https://github.com/vkurko/calendar
- Owner: vkurko
- License: mit
- Created: 2020-07-03T12:31:01.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-22T09:49:06.000Z (4 months ago)
- Last Synced: 2024-05-22T10:57:48.565Z (4 months ago)
- Topics: calendar, event, full-sized, resource
- Language: Svelte
- Homepage: https://vkurko.github.io/calendar/
- Size: 828 KB
- Stars: 903
- Watchers: 18
- Forks: 78
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Event Calendar [](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)
* Zero-dependency (pre-built bundle)
* Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options.
## Table of contents
- [Usage](#usage)
- [Svelte component / ES6 module](#svelte-component--es6-module)
- [Pre-built browser ready bundle](#pre-built-browser-ready-bundle)
- [Modifying options after initialization](#modifying-options-after-initialization)
- [Options](#options)
- [allDayContent](#alldaycontent)
- [allDaySlot](#alldayslot)
- [buttonText](#buttontext)
- [customButtons](#custombuttons)
- [date](#date)
- [dateClick](#dateclick)
- [datesAboveResources](#datesaboveresources)
- [datesSet](#datesset)
- [dayCellFormat](#daycellformat)
- [dayHeaderAriaLabelFormat](#dayheaderarialabelformat)
- [dayHeaderFormat](#dayheaderformat)
- [dayMaxEvents](#daymaxevents)
- [dayPopoverFormat](#daypopoverformat)
- [displayEventEnd](#displayeventend)
- [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)
- [eventLongPressDelay](#eventlongpressdelay)
- [eventMouseEnter](#eventmouseenter)
- [eventMouseLeave](#eventmouseleave)
- [eventResize](#eventresize)
- [eventResizeStart](#eventresizestart)
- [eventResizeStop](#eventresizestop)
- [eventSources](#eventsources)
- [eventStartEditable](#eventstarteditable)
- [eventTextColor](#eventtextcolor)
- [eventTimeFormat](#eventtimeformat)
- [filterResourcesWithEvents](#filterresourceswithevents)
- [firstDay](#firstday)
- [flexibleSlotTimeLimits](#flexibleslottimelimits)
- [headerToolbar](#headertoolbar)
- [height](#height)
- [hiddenDays](#hiddendays)
- [highlightedDates](#highlighteddates)
- [lazyFetching](#lazyfetching)
- [listDayFormat](#listdayformat)
- [listDaySideFormat](#listdaysideformat)
- [loading](#loading)
- [locale](#locale)
- [longPressDelay](#longpressdelay)
- [moreLinkContent](#morelinkcontent)
- [noEventsClick](#noeventsclick)
- [noEventsContent](#noeventscontent)
- [nowIndicator](#nowindicator)
- [pointer](#pointer)
- [resources](#resources)
- [resourceLabelContent](#resourcelabelcontent)
- [resourceLabelDidMount](#resourcelabeldidmount)
- [select](#select)
- [selectable](#selectable)
- [selectBackgroundColor](#selectbackgroundcolor)
- [selectLongPressDelay](#selectlongpressdelay)
- [selectMinDistance](#selectmindistance)
- [scrollTime](#scrolltime)
- [slotDuration](#slotduration)
- [slotEventOverlap](#sloteventoverlap)
- [slotHeight](#slotheight)
- [slotLabelFormat](#slotlabelformat)
- [slotMaxTime](#slotmaxtime)
- [slotMinTime](#slotmintime)
- [slotWidth](#slotwidth)
- [theme](#theme)
- [titleFormat](#titleformat)
- [unselect](#unselect)
- [unselectAuto](#unselectauto)
- [unselectCancel](#unselectcancel)
- [view](#view)
- [viewDidMount](#viewdidmount)
- [views](#views)
- [Methods](#methods)
- [getOption](#getoption-name-)
- [setOption](#setoption-name-value-)
- [addEvent](#addevent-event-)
- [getEventById](#geteventbyid-id-)
- [getEvents](#getevents)
- [removeEventById](#removeeventbyid-id-)
- [updateEvent](#updateevent-event-)
- [refetchEvents](#refetchevents)
- [dateFromPoint](#datefrompoint-x-y-)
- [destroy](#destroy)
- [getView](#getview)
- [next](#next)
- [prev](#prev)
- [unselect](#unselect-1)
- [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
### Svelte component / ES6 module
The first step is to install the Event Calendar `core` package:
```bash
npm install --save-dev @event-calendar/core
```
Then install any additional plugins you plan to use:
```bash
npm install --save-dev @event-calendar/time-grid
```
You must use at least one plugin that provides a view. The following plugins are currently available:
* `@event-calendar/day-grid`
* `@event-calendar/list`
* `@event-calendar/resource-timeline`
* `@event-calendar/resource-time-grid`
* `@event-calendar/time-grid`
* `@event-calendar/interaction` (doesn't provide a view)
Then, in your Svelte component, use the calendar something like this:
```html
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
let plugins = [TimeGrid];
let options = {
view: 'timeGridWeek',
events: [
// your list of events
]
};
```
Or in ES6 module:
```js
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
let ec = new Calendar({
target: document.getElementById('ec'),
props: {
plugins: [TimeGrid],
options: {
view: 'timeGridWeek',
events: [
// your list of events
]
}
}
});
```
The CSS is located at `@event-calendar/core/index.css`. If your build tool supports CSS processing, you can import it like this:
```js
import '@event-calendar/core/index.css';
```
### Pre-built browser ready bundle
Include the following lines of code in the `` section of your page:
```html
```
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 with something like this:
```js
let ec = new EventCalendar(document.getElementById('ec'), {
view: 'timeGridWeek',
events: [
// your list of events
]
});
```
### 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
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
let plugins = [TimeGrid];
let options = {
view: 'timeGridWeek'
};
function updateOptions() {
options.slotDuration = '01:00';
}
Change slot duration
```
## 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:
`text`
The default text
### allDaySlot
- Type `boolean`
- Default `true`
Determines whether the `all-day` slot is displayed at the top of the calendar.
When hidden with `false`, all-day events will not be displayed in `timeGrid`/`resourceTimeGrid` views.
### buttonText
- Type `object` or `function`
- Default `{close: 'Close', dayGridMonth: 'month', 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:
> - dayGridMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
> - 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
### customButtons
- Type `object`
- 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.
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](#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
### 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 `'2022-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:
`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](#view-object) object
`resource`
If the current view is a resource view, the [Resource](#resource-object) object that owns this date
### 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:
`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](#view-object) object
### dayCellFormat
- Type `object` or `function`
- Default `{day: 'numeric'}`
Defines the text that is displayed inside the day cell in the `dayGrid` 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
}
```
`date`
JavaScript Date object that needs to be formatted
### 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
}
```
`date`
JavaScript Date object that needs to be formatted
### dayHeaderFormat
- Type `object` or `function`
- Default `{weekday: 'short', month: 'numeric', day: 'numeric'}`
> Views override the default value as follows:
> - 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
}
```
`date`
JavaScript Date object that needs to be formatted
### 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:
> - dayGridMonth `false`
> - resourceTimelineDay `false`
> - resourceTimelineMonth `false`
> - resourceTimelineWeek `false`
Determines whether to display an event’s end time.
### 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:
> - 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 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:
`view`
The current [View](#view-object) object
### 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:
`event`
The associated [Event](#event-object) object
`view`
The current [View](#view-object) object
### 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:
`el`
The HTML element for the event
`event`
The associated [Event](#event-object) object
`jsEvent`
JavaScript native event object with low-level information such as click coordinates
`view`
The current [View](#view-object) object
### 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:
`event`
The associated [Event](#event-object) object
`timeText`
Formatted time of the event
`view`
The current [View](#view-object) object
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:
`el`
The HTML element for the event
`event`
The associated [Event](#event-object) object
`timeText`
Formatted time of the event
`view`
The current [View](#view-object) object
### 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:
`event`
The associated [Event](#event-object) object
`jsEvent`
JavaScript native event object with low-level information such as click coordinates
`view`
The current [View](#view-object) object
### 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:
`event`
The associated [Event](#event-object) object
`jsEvent`
JavaScript native event object with low-level information such as click coordinates
`view`
The current [View](#view-object) object
### 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:
`event`
The associated [Event](#event-object) object
`oldEvent`
An [Event](#event-object) object that holds information about the event before the drop
`oldResource`
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
`newResource`
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
`delta`
A [Duration](#duration-object) 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](#view-object) object
### eventDurationEditable
- Type `boolean`
- Default `true`
- Requires `Interaction` plugin
Determines whether calendar events can be resized.
### 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:
`el`
The HTML element for the event
`event`
The associated [Event](#event-object) object
`jsEvent`
JavaScript native event object with low-level information such as click coordinates
`view`
The current [View](#view-object) object
### 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:
`el`
The HTML element for the event
`event`
The associated [Event](#event-object) object
`jsEvent`
JavaScript native event object with low-level information such as click coordinates
`view`
The current [View](#view-object) object
### 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:
`event`
The associated [Event](#event-object) object
`oldEvent`
An [Event](#event-object) object that holds information about the event before the resize
`endDelta`
A [Duration](#duration-object) 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](#view-object) object
### 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:
`event`
The associated [Event](#event-object) object
`jsEvent`
JavaScript native event object with low-level information such as click coordinates
`view`
The current [View](#view-object) object
### 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:
`event`
The associated [Event](#event-object) object
`jsEvent`
JavaScript native event object with low-level information such as click coordinates
`view`
The current [View](#view-object) object
### eventSources
- Type `EventSource[]`
- Default `[]`
Array of EventSource objects that will provide the Event Calendar 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 that the calendar will fetch [Event](#event-object) objects from. 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 the Event Calendar 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](#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.
### 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
}
```
`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
### eventTextColor
- Type `string`
- Default `undefined`
Sets the default text color for events on the calendar.
You can use any of the CSS color formats such `'#f00'`, `'#ff0000'`, `'rgb(255,0,0)'`, or `'red'`.
### filterResourcesWithEvents
- Type `boolean`
- Default `false`
Determines whether resources with no events for the current range should be hidden in the resource view.
### 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:
`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](#event-object) object to be analyzed.
The function must return `true` to have this event counted, or `false` to ignore it
### 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:
`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
### 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 `'2022-12-31'`, or a JavaScript Date object.
### lazyFetching
- Type `boolean`
- Default `true`
Determines when event 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. The Event Calendar 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 view is switched, or any time the current date changes (for example, as a result of the user clicking prev/next).
### 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
}
```
`date`
JavaScript Date object that needs to be formatted
### 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
}
```
`date`
JavaScript Date object that needs to be formatted
### loading
- Type `function`
- Default `undefined`
Callback function that is triggered when event fetching starts/stops.
```js
function (isLoading) { }
```
`isLoading`
`true` when the calendar begins fetching events, `false` when it’s done.
### 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 the Event Calendar 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:
`num`
The number of hidden events
`text`
The default text like `+2 more`
### 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:
`jsEvent`
JavaScript native event object with low-level information such as click coordinates
`view`
The current [View](#view-object) object
### 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.
### resources
- Type `array`
- Default `[]`
Array of plain objects that will be parsed into [Resource](#resource-object) objects for displaying in the resource view.
### resourceLabelContent
- Type `string`, `object`or `function`
- Default `undefined`
Defines the content that is rendered inside an element with a resource title.
This value can be either a [Content](#content) or a function that returns content:
```js
function (info) {
// return Content
}
```
`info` is an object with the following properties:
`resource`
The associated [Resource](#resource-object) object
`date`
If it is a column that is within a specific date, this will be a Date object
### resourceLabelDidMount
- Type `function`
- Default `undefined`
Callback function that is triggered right after the element has been added to the DOM. If the resource data changes, this is not called again.
```js
function (info) { }
```
`info` is an object with the following properties:
`el`
The HTML element for the label
`resource`
The associated [Resource](#resource-object) object
`date`
If it is a column that is within a specific date, this will be a Date object
### select
- Type `function`
- Default `undefined`
- Requires `Interaction` plugin
Callback 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](#view-object) object
`resource`
If the current view is a resource view, the [Resource](#resource-object) object that was selected
### selectable
- Type `boolean`
- Default `false`
- Requires `Interaction` plugin
Determines whether the user is allowed to highlight multiple days or time slots by clicking and moving the pointer.
### selectBackgroundColor
- Type `string`
- Default `undefined`
- Requires `Interaction` plugin
Sets the background color for the event indicating the current selection. See [selectable](#selectable).
You can use any of the CSS color formats such `'#f00'`, `'#ff0000'`, `'rgb(255,0,0)'`, or `'red'`.
### selectLongPressDelay
- Type `integer`
- Default `undefined`
- Requires `Interaction` plugin
For touch devices, the amount of time (in milliseconds) the user must hold down a tap before the date becomes selectable.
If not specified, it falls back to [longPressDelay](#longpressdelay).
### selectMinDistance
- Type `integer`
- Default `5`
- Requires `Interaction` plugin
Defines how many pixels the user’s mouse must move before the selection begins.
### scrollTime
- Type `string`, `integer` or `object`
- Default `'06:00:00'`
Determines how far forward the scroll pane is initially scrolled.
This should be a value that can be parsed into a [Duration](#duration-object) object.
### slotDuration
- 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](#duration-object) object.
### slotEventOverlap
- Type `boolean`
- Default `true`
Determines 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.
### slotHeight
- Type `integer`
- Default `24`
Defines the time slot height in pixels in the `timeGrid`/`resourceTimeGrid` views. When changing the setting, you must additionally override the following CSS styles:
```css
.ec-time-grid .ec-time, .ec-time-grid .ec-line {
height: 24px; /* override this value */
}
```
### slotLabelFormat
- 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](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 (time) {
// return Content with the formatted time string
}
```
`time`
JavaScript Date object that needs to be formatted
### slotMaxTime
- 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](#duration-object) object.
### slotMinTime
- 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](#duration-object) object.
### slotWidth
- Type `integer`
- Default `72`
Defines the time slot width in pixels in `ResourceTimeline` views. When changing the setting, you must additionally override the following CSS styles:
```css
.ec-timeline .ec-time, .ec-timeline .ec-line {
width: 72px; /* override this value */
}
```
### theme
- 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', compact: 'ec-compact', container: 'ec-container', content: 'ec-content', day: 'ec-day', dayHead: 'ec-day-head', dayFoot: 'ec-day-foot', days: 'ec-days', daySide: 'ec-day-side', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', main: 'ec-main', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', today: 'ec-today', time: 'ec-time', times: 'ec-times', title: 'ec-title', toolbar: 'ec-toolbar', view: 'ec-timeline ec-resource-week-view', weekdays: ['ec-sun', 'ec-mon', 'ec-tue', 'ec-wed', 'ec-thu', 'ec-fri', 'ec-sat'], withScroll: 'ec-with-scroll', uniform: 'ec-uniform'}`
> Views override the default value as follows:
> - dayGridMonth `theme => ({...theme, view: 'ec-day-grid ec-month-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-time-grid ec-resource-day-view'})`
> - resourceTimeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-resource-week-view'})`
> - resourceTimelineDay `theme => ({...theme, view: 'ec-timeline ec-resource-day-view'})`
> - resourceTimelineMonth `theme => ({...theme, view: 'ec-timeline ec-resource-month-view'})`
> - resourceTimelineWeek `theme => ({...theme, view: 'ec-timeline ec-resource-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 the Event Calendar 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
### titleFormat
- 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](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 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
### unselect
- Type `function`
- Default `undefined`
- Requires `Interaction` plugin
Callback 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](#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](#unselect-1) 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](#unselect-1) method, jsEvent will be `undefined`
`view`
The current [View](#view-object) object
### unselectAuto
- Type `boolean`
- Default `true`
- Requires `Interaction` plugin
Determines whether clicking elsewhere on the page will clear the current selection. See [selectable](#selectable).
### unselectCancel
- Type `string`
- Default `''`
- Requires `Interaction` plugin
A CSS selector that specifies elements that will ignore the [unselectAuto](#unselectauto) option.
Clicking on elements that match this CSS selector will prevent the current selection from being cleared (because of the [unselectAuto](#unselectauto) option).
### view
- Type `string`
- Default `'resourceTimeGridWeek'`
The view that is displayed in the calendar. Can be `'dayGridMonth'`, `'listDay'`, `'listWeek'`, `'listMonth'`, `'listYear'`, `'resourceTimeGridDay'`, `'resourceTimeGridWeek'`, `'resourceTimelineDay'`, `'resourceTimelineWeek'`, `'resourceTimelineMonth'`, `'timeGridDay'` or `'timeGridWeek'`.
### viewDidMount
- Type `function`
- Default `undefined`
Callback 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](#view-object) object
### views
- 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.
## Methods
Methods allow you to manipulate the Event Calendar after initialization. They are accessible from the calendar instance.
In Svelte, methods are available from a component instance:
```html
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
let ec;
let plugins = [TimeGrid];
let options = {
view: 'timeGridWeek',
eventSources: [{events: function() {
console.log('fetching...');
return [];
}}]
};
function invokeMethod() {
ec.refetchEvents();
}
Refetch events
```
### getOption( name )
- Parameters
- `name` `string` The option name
- Return value `mixed` or `undefined`
This method allows you to get the current value of any calendar option.
```js
// E.g. Get current date
let date = ec.getOption('date');
```
### setOption( name, value )
- Parameters
- `name` `string` The option name
- `value` `mixed` The new option value
- Return value `EventCalendar` The calendar instance for chaining
This method allows you to set new value to any calendar option.
```js
// E.g. Change the current date
ec.setOption('date', new Date());
```
### addEvent( event )
- Parameters
- `event` `object` A plain object that will be parsed into an [Event](#event-object) object
- Return value [Event](#event-object) object or `null`
Adds a new event to the calendar.
### getEventById( id )
- Parameters
- `id` `string|integer` The ID of the event
- Return value [Event](#event-object) object or `null`
Returns a single event with the matching `id`.
### getEvents()
- Return value `Event[]` Array of [Event](#event-object) objects
Returns an array of events that the calendar has in memory.
### removeEventById( id )
- Parameters
- `id` `string|integer` The ID of the event
- Return value `EventCalendar` The calendar instance for chaining
Removes a single event with the matching `id`.
### updateEvent( event )
- Parameters
- `event` `object` A plain object or [Event](#event-object) object
- Return value `EventCalendar` The calendar instance for chaining
Updates a single event with the matching `event`.`id`.
### refetchEvents()
- Return value `EventCalendar` The calendar instance for chaining
Refetches events from all sources.
### dateFromPoint( x, y )
- Return value `object` or `null`
Returns an `info` object with data as if the [dateClick](#dateclick) event had fired for that point.
`info` object contains the following properties:
`date`
JavaScript Date object for the date and time
`allDay`
`true` or `false`. Determines if the point is 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 contains the point
`resource`
If the current view is a resource view, the [Resource](#resource-object) object that owns this date
Using this method, you can, for example, find out on which day a click occurred inside a multi-day event. To do this, inside [eventClick](#eventclick), pass the `jsEvent.clientX` and `jsEvent.clientY` coordinates to `dateFromPoint` and get the desired date.
### destroy()
- Return value `undefined`
Destroys the calendar, removing all DOM elements, event handlers, and internal data.
### getView()
- Return value `View`
Returns the [View](#view-object) object for the current view.
### next()
- Return value `EventCalendar` The calendar instance for chaining
Moves the current calendar date forward by 1 day/week/month (depending on the current view).
### prev()
- Return value `EventCalendar` The calendar instance for chaining
Moves the current calendar date backward by 1 day/week/month (depending on the current view).
### unselect()
- Return value `EventCalendar` The calendar instance for chaining
Clears the current selection. See [selectable](#selectable).
## Content
The content value can be presented in the following forms:
* a string containing text `'some text'`
* an object containing the HTML string `{html: '
some HTML
'}`
* an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}`
## Event object
This is a JavaScript object that the Event Calendar uses to store information about a calendar event.
Here are all properties that exist in Event object:
`id`
A unique string identifier of the event
`resourceIds`
An array of resource IDs that the event is associated with
`allDay`
`true` or `false`. Determines if the event is shown in the `all-day` slot
`start`
JavaScript Date object holding the event’s start time
`end`
JavaScript Date object holding the event’s end time
`title`
`Content` The text appearing on the event. See [Content](#content)
`editable`
`true`, `false` or `undefined`. The value overriding the [editable](#editable) setting for this specific event
`startEditable`
`true`, `false` or `undefined`. The value overriding the [eventStartEditable](#eventstarteditable) setting for this specific event
`durationEditable`
`true`, `false` or `undefined`. The value overriding the [eventDurationEditable](#eventdurationeditable) setting for this specific event
`display`
The rendering type of the event. Can be `'auto'` or `'background'`
In addition, in your callback functions, you may get the `'ghost'`, `'preview'` and `'pointer'` for this property, which are internal values and are used, for example, to display events during drag-and-drop operations
`backgroundColor`
The [eventBackgroundColor](#eventbackgroundcolor) override for this specific event
`textColor`
The [eventTextColor](#eventtextcolor) override for this specific event
`classNames`
An array of additional CSS classes for this specific event
`styles`
An array of additional inline styling declarations for this specific event
`extendedProps`
A plain object holding miscellaneous properties specified during parsing in the explicitly given `extendedProps` field
### Parsing event from a plain object
When Event Calendar receives an array of plain event’s objects either from the `events` option or as a result of an HTTP request to a URL of an event source, it parses the input objects into proper Event objects.
Here are all admissible fields for the event’s input object:
`id`
`string` or `integer` A unique identifier of the event. Default `auto-generated value`
`allDay`
`boolean` Determines if the event is shown in the all-day slot. Defaults to `true` if `start` and `end` are both passed without a time part, `false` otherwise
`start`
`string` or `Date` This should be either an ISO8601 datetime string like `'2022-12-31 09:00:00'`, or a JavaScript Date object holding the event’s start time
`end`
`string` or `Date` This should be either an ISO8601 datetime string like `'2022-12-31 13:00:00'`, or a JavaScript Date object holding the event’s end time
`title`
`Content` The text that will appear on the event. See [Content](#content). Default `''`
`editable`
`boolean` Overrides the master [editable](#editable) option for this single event. Default `undefined`
`startEditable`
`boolean` Overrides the master [eventStartEditable](#eventstarteditable) option for this single event. Default `undefined`
`durationEditable`
`boolean` Overrides the master [eventDurationEditable](#eventdurationeditable) option for this single event. Default `undefined`
`resourceIds` or `resourceId`
`string`, `integer` or `array` An ID of a resource or an array of resource IDs that the event is associated with. Default `[]`
`display`
`string` The rendering type of the event. Can be `'auto'` or `'background'`. Default `'auto'`
`backgroundColor`
`string` Sets the event’s background color just like the calendar-wide [eventBackgroundColor](#eventbackgroundcolor) option. Default `undefined`
`textColor`
`string` Sets the event’s text color just like the calendar-wide [eventTextColor](#eventtextcolor) option. Default `undefined`
`color`
`string` This is currently an alias for the `backgroundColor` field. Default `undefined`
`classNames` or `className`
`string` or `array` Sets additional CSS classes for this single event. See [eventClassNames](#eventclassnames). Default `[]`
`styles` or `style`
`string` or `array` Sets additional inline styling declarations for this single event. This value can be either a string containing styles `'font-size: 24px; border-radius: 4px; ...'` or an array of strings `['font-size: 24px', 'border-radius: 4px', ...]`. Default `[]`
`extendedProps`
`object` A plain object with any miscellaneous properties. It will be directly transferred to the `extendedProps` property of the Event object. Default `{}`
## Duration object
This is a JavaScript object that the Event Calendar uses to store information about a period of time, like _30 minutes_ or _1 day and 6 hours_.
Here are all properties that exist in Duration object:
`years`
The number of years in duration
`months`
The number of months in duration
`days`
The number of days in duration
`seconds`
The number of seconds in duration. If you want hours and minutes, you need to do division on this property
`inWeeks`
Determines whether the duration represents a time period in weeks. This value is set during parsing the input data
### Parsing duration from input values
When Event Calendar receives a value for options like `duration`, `scrollTime`, `slotDuration` and others, it parses it into a proper Duration object.
The admissible input value can be specified in one of three formats:
- an object with any of the following keys: `year`, `years`, `month`, `months`, `day`, `days`, `minute`, `minutes`, `second`, `seconds`
- a string in the format `hh:mm:ss` or `hh:mm`. For example, `'05:00'` specifies 5 hours
- an integer specifying the total number of seconds
## Resource object
This is a JavaScript object that the Event Calendar uses to store information about a resource. Calendar events can be associated with resources and displayed separately using the resource view.
Here are all properties that exist in Resource object:
`id`
The unique string identifier for the resource
`title`
The title of the resource. See [Content](#content)
`eventBackgroundColor`
Default background color for this resource's events
`eventTextColor`
Default text color for this resource's events
### Parsing resource from a plain object
When Event Calendar receives an array of plain resource’s objects for the `resources` option, it parses the input objects into proper Resource objects.
Here are all admissible fields for the resource’s input object:
`id`
`integer` or `string` Uniquely identifies the resource. [Event](#event-object) objects with a corresponding `resourceIds` field will be linked to this resource. Will be coerced into a `string`
`title`
`Content` Text that will be displayed on the resource when it is rendered. See [Content](#content). Default `''`
`eventBackgroundColor`
`string` Sets the default background color for this resource's events just like the calendar-wide [eventBackgroundColor](#eventbackgroundcolor) option. Default `undefined`
`eventTextColor`
`string` Sets the default text color for this resource's events just like the calendar-wide [eventTextColor](#eventtextcolor) option. Default `undefined`
## View object
A View object contains information about a calendar view, such as title and date range.
Here are all properties that exist in View object:
`type`
Name of the view
`title`
Title text that is displayed at the top of the header toolbar
`currentStart`
JavaScript Date that is the start of the interval the view is trying to represent. For example, in month view, this will be the first day of the month. This value disregards hidden days
`currentEnd`
JavaScript Date that is the end of the interval the view is trying to represent. Note: This value is exclusive. For example, in month view, this will be the day after the last day of the month. This value disregards hidden days
`activeStart`
JavaScript Date that is the first visible day. In month view, this value is often before the 1st day of the month, because most months do not begin on the first day-of-week
`activeEnd`
JavaScript Date that is the last visible day. Note: This value is exclusive
## Theming
The library provides a built-in dark theme. You can activate it by adding the `ec-dark` CSS class to any parent element of the calendar, e.g. ``.
If you want the dark theme to be activated automatically based on the [preferred color scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme), then use the `ec-auto-dark` CSS class instead.
Please note that the dark theme does not change the background and font color in the calendar. These are assumed to be set by the page styles, and the calendar inherits these styles.
If you do need to set the background or font color of the calendar, use local CSS variables for this:
```css
.ec {
--ec-bg-color: #22272e;
--ec-text-color: #adbac7;
}
```
A list of all available CSS variables can be found [here](packages/core/src/styles/theme.scss).
## Browser support
The latest versions of Chrome, Firefox, Safari, and Edge are supported.
> The library is compiled to support browsers that match the following browserslist configuration: `defaults and supports fetch`. You can see the resulting list [here](https://browsersl.ist/#q=defaults+and+supports+fetch).