### Install EventCalendar Core Package

Source: https://context7.com/vkurko/calendar/llms.txt

This command installs the core EventCalendar package as a development dependency. This is the first step to using the library in your project.

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

--------------------------------

### Fetch Resources from URL Configuration

Source: https://github.com/vkurko/calendar/blob/master/packages/build/README.md

Configures the calendar to fetch resource data from a specified URL. Supports GET or POST methods and allows sending extra parameters.

```javascript
{
  url: 'your_resource_url',
  method: 'GET',
  extraParams: {
    customParam: 'value'
  }
}
```

--------------------------------

### Event Sources: Fetching Events from URL

Source: https://github.com/vkurko/calendar/blob/master/README.md

Configure the calendar to fetch event data from a specified URL. The calendar sends GET/POST requests with start and end date parameters. Additional parameters can be included via extraParams. The default method is 'GET'.

```javascript
{
  url: 'api/events',
  method: 'POST',
  extraParams: {
    custom_param: 'value'
  }
}
```

--------------------------------

### Create Calendar Instance with JavaScript Module

Source: https://context7.com/vkurko/calendar/llms.txt

Demonstrates how to create and mount a new EventCalendar instance using its JavaScript module API. It includes essential plugins like TimeGrid, DayGrid, and Interaction, and configures various calendar options such as view, header toolbar, and event handling. The example also shows how to destroy the calendar instance later.

```javascript
import {createCalendar, destroyCalendar, TimeGrid, DayGrid, Interaction} from '@event-calendar/core';
import '@event-calendar/core/index.css';

// Create a calendar with TimeGrid view and drag-drop support
let ec = createCalendar(
    document.getElementById('ec'),
    [TimeGrid, DayGrid, Interaction],
    {
        view: 'timeGridWeek',
        headerToolbar: {
            start: 'prev,next today',
            center: 'title',
            end: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        editable: true,
        selectable: true,
        events: [
            {
                id: '1',
                title: 'Team Meeting',
                start: '2024-01-15 09:00:00',
                end: '2024-01-15 10:30:00',
                backgroundColor: '#3788d8'
            },
            {
                id: '2',
                title: 'Lunch Break',
                start: '2024-01-15 12:00:00',
                end: '2024-01-15 13:00:00',
                backgroundColor: '#10b981'
            }
        ],
        eventClick: function(info) {
            console.log('Event clicked:', info.event.title);
        },
        dateClick: function(info) {
            console.log('Date clicked:', info.dateStr);
        }
    }
);

// Later, destroy the calendar
destroyCalendar(ec);
```

--------------------------------

### Loading Callback Function

Source: https://github.com/vkurko/calendar/blob/master/packages/build/README.md

A callback function triggered when event or resource fetching starts or stops. It receives a boolean indicating the loading state.

```javascript
function (isLoading) { }
```

--------------------------------

### Callback Function Example - viewDidMount

Source: https://github.com/vkurko/calendar/blob/master/packages/core/README.md

This snippet demonstrates the structure of a callback function for the 'viewDidMount' option. This function is executed after a calendar view is added to the DOM, providing access to the mounted view object.

```javascript
function (info) { 
  // Access the mounted view object via info.view
}
```

--------------------------------

### Use EventCalendar as a Svelte 5 Component

Source: https://context7.com/vkurko/calendar/llms.txt

Shows how to integrate EventCalendar as a Svelte 5 component, enabling reactive options binding. The calendar automatically updates when its options change, and it is properly destroyed when the parent component unmounts. This example includes plugins and demonstrates adding events dynamically.

```svelte
<script>
    import {Calendar, TimeGrid, DayGrid, List, Interaction} from '@event-calendar/core';

    let ec = $state();
    let options = $state({
        view: 'timeGridWeek',
        headerToolbar: {
            start: 'prev,next today',
            center: 'title',
            end: 'dayGridMonth,timeGridWeek,listWeek'
        },
        editable: true,
        events: [
            {
                id: '1',
                title: 'Project Review',
                start: '2024-01-20 14:00:00',
                end: '2024-01-20 15:00:00'
            }
        ],
        eventDrop: function(info) {
            console.log('Event moved to:', info.event.start);
        },
        select: function(info) {
            // Create new event from selection
            options.events = [...options.events, {
                id: String(Date.now()),
                title: 'New Event',
                start: info.startStr,
                end: info.endStr
            }];
        }
    });

    function addEvent() {
        ec.addEvent({
            id: String(Date.now()),
            title: 'Dynamic Event',
            start: new Date(),
            end: new Date(Date.now() + 3600000)
        });
    }
</script>

<button onclick={addEvent}>Add Event</button>
<Calendar bind:this={ec} plugins={[TimeGrid, DayGrid, List, Interaction]} {{options}} />
```

--------------------------------

### Event Sources: Executing Custom Function

Source: https://github.com/vkurko/calendar/blob/master/README.md

Provide a custom function to dynamically fetch event data. This function receives fetchInfo (start, end, startStr, endStr) and should call successCallback with event data or failureCallback on error. Alternatively, it can return an array of events or a Promise.

```javascript
function(fetchInfo, successCallback, failureCallback) {
  // fetch events based on fetchInfo.start and fetchInfo.end
  // call successCallback(events) or failureCallback(error)
}
```

--------------------------------

### eventStartEditable

Source: https://github.com/vkurko/calendar/blob/master/packages/build/README.md

Determines if events on the calendar can be dragged to a new start time.

```APIDOC
## eventStartEditable

### Description
Determines whether the events on the calendar can be dragged to a new start time. Requires the `Interaction` plugin.

### Method
Configuration Option

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "eventStartEditable": false
}
```

### Response
#### Success Response (N/A)
This is a configuration option.
```

--------------------------------

### Initialize EventCalendar in JavaScript Module

Source: https://github.com/vkurko/calendar/blob/master/packages/build/README.md

Demonstrates how to import and initialize the EventCalendar in a JavaScript module. It shows the creation of a calendar instance, the use of plugins like TimeGrid, and the destruction of the calendar when no longer needed.

```javascript
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);
```

--------------------------------

### Get Current View

Source: https://github.com/vkurko/calendar/blob/master/packages/build/README.md

Retrieves the current view object of the calendar.

```APIDOC
## GET /view

### Description
Returns the [View](#view-object) object for the current view.

### Method
GET

### Endpoint
`/view`

### Response
#### Success Response (200)
- **view** (object) - The current view object.

#### Response Example
```json
{
  "type": "dayGridMonth",
  "title": "October 2023"
}
```
```

--------------------------------

### Get All Events

Source: https://github.com/vkurko/calendar/blob/master/packages/build/README.md

Retrieves an array of all events currently stored in the calendar.

```APIDOC
## GET /events

### Description
Returns an array of events that the calendar has in memory.

### Method
GET

### Endpoint
`/events`

### Response
#### Success Response (200)
- **events** (array) - An array of event objects.

#### Response Example
```json
[
  {
    "id": "123",
    "title": "Meeting",
    "start": "2023-10-27T10:00:00Z",
    "end": "2023-10-27T11:00:00Z"
  },
  {
    "id": "456",
    "title": "Lunch",
    "start": "2023-10-27T12:00:00Z",
    "end": "2023-10-27T13:00:00Z"
  }
]
```
```

--------------------------------

### EventCalendar Resources Fetch from URL Configuration

Source: https://github.com/vkurko/calendar/blob/master/README.md

Configuration object for fetching resources from a URL. Includes URL, HTTP method, and optional extra parameters for the request.

```javascript
{
  url: 'api/resources',
  method: 'GET',
  extraParams: {
    customParam: 'value'
  }
}
```

--------------------------------

### Get Event by ID

Source: https://github.com/vkurko/calendar/blob/master/packages/core/README.md

Retrieves a single event by its unique identifier.

```APIDOC
## GET /events/{id}

### Description
Retrieves a single event with the matching `id`.

### Method
GET

### Endpoint
`/events/{id}`

### Parameters
#### Path Parameters
- **id** (string|integer) - Required - The ID of the event.

### Response
#### Success Response (200)
- **event** (object) - The event object matching the provided ID, or null if not found.

#### Response Example
```json
{
  "id": "123",
  "title": "Meeting",
  "start": "2023-10-27T10:00:00Z",
  "end": "2023-10-27T11:00:00Z"
}
```
```

--------------------------------

### Execute Custom Resource Fetching Function

Source: https://github.com/vkurko/calendar/blob/master/packages/build/README.md

Allows specifying a custom function to provide resource data. This function receives fetch information and callbacks for success or failure. It can also return resources directly or a Promise. If refetchResourcesOnNavigate is enabled, it's called on date navigation.

```javascript
function(fetchInfo, successCallback, failureCallback) { }

// Example with fetchInfo object:
// fetchInfo = {
//   start: Date object,
//   end: Date object,
//   startStr: 'YYYY-MM-DD',
//   endStr: 'YYYY-MM-DD'
// }
```

--------------------------------

### Calendar Configuration Options

Source: https://github.com/vkurko/calendar/blob/master/packages/build/README.md

This section details various configuration options for the calendar, including loading indicators, localization, event handling, and resource management.

```APIDOC
## Calendar Configuration Options

This document outlines the various configuration options available for the calendar component.

### loading

- **Type**: `function`
- **Default**: `undefined`

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

```js
function (isLoading) { }
```

- **Parameters**:
  - `isLoading` (boolean) - `true` when the calendar begins fetching events or resources, `false` when it’s done.

### locale

- **Type**: `string`
- **Default**: `undefined`

Defines the `locales` parameter for the native JavaScript `Intl.DateTimeFormat` object used for formatting date and time strings.

### 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.

### moreLinkContent

- **Type**: `Content` or `function`
- **Default**: `undefined`

Defines the text displayed instead of the default `+X more` created by the `dayMaxEvents` option.

```js
function (arg) {
  // return Content
}
```
- **Parameters**:
  - `arg` (object)
    - `num` (integer) - The number of hidden events.
    - `text` (string) - The default text like `+X more`.

### noEventsClick

- **Type**: `function`
- **Default**: `undefined`

Callback function triggered when the user clicks the _No events_ area in list view.

```js
function (info) { }
```
- **Parameters**:
  - `info` (object)
    - `jsEvent` (object) - JavaScript native event object.
    - `view` (object) - The current `View` object.

### noEventsContent

- **Type**: `Content` or `function`
- **Default**: `'No events'`

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

```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 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.

### resources

- **Type**: `array`, `object` or `function`
- **Default**: `[]`

Defines the source of resource data displayed in resource views.

#### 1. Array of plain objects
If resources are predefined, pass them as an array of plain objects.

#### 2. Fetch resources from a URL
Specify `resources` as an object with the following properties:
- **url** (string) - URL to fetch resources from.
  - **start** (string) - Start date of the range.
  - **end** (string) - End date of the range.
- **method** (string) - HTTP request method. Default: `'GET'`.
- **extraParams** (object or function) - Additional GET/POST data to send. Default: `{}`.
```

--------------------------------

### Get Event by ID

Source: https://github.com/vkurko/calendar/blob/master/packages/build/README.md

Retrieves a single event by its unique identifier. Returns the event object if found, otherwise returns null.

```APIDOC
## GET /events/{id}

### Description
Retrieves a single event with the matching `id`.

### Method
GET

### Endpoint
`/events/{id}`

### Parameters
#### Path Parameters
- **id** (string|integer) - Required - The ID of the event

### Response
#### Success Response (200)
- **event** (object) - The event object if found, otherwise null.

#### Response Example
```json
{
  "id": "123",
  "title": "Meeting",
  "start": "2023-10-27T10:00:00Z",
  "end": "2023-10-27T11:00:00Z"
}
```
```

--------------------------------

### Include Standalone Calendar Bundle

Source: https://github.com/vkurko/calendar/blob/master/README.md

Provides instructions for including the EventCalendar standalone bundle in an HTML page using `<link>` and `<script>` tags. It also shows how to initialize the calendar using the global `EventCalendar` object.

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

```javascript
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);
```

--------------------------------

### EventCalendar Configuration Options

Source: https://github.com/vkurko/calendar/blob/master/README.md

This section details various configuration options for the EventCalendar, including callbacks, display settings, and interaction behaviors.

```APIDOC
## EventCalendar Configuration Options

### loading

- **Type**: `function`
- **Default**: `undefined`

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

```js
function (isLoading) { }
```

- **`isLoading`** (`boolean`): `true` when the calendar begins fetching events or resources, `false` when it’s done.

### locale

- **Type**: `string`
- **Default**: `undefined`

Defines the `locales` parameter for the native JavaScript `Intl.DateTimeFormat` object used for formatting date and time strings.

### 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. See also [eventLongPressDelay](#eventlongpressdelay) and [selectLongPressDelay](#selectlongpressdelay).

### moreLinkContent

- **Type**: `Content` or `function`
- **Default**: `undefined`

Defines the text displayed instead of the default `+X more`. Can be a [Content](#content) or a function returning content.

```js
function (arg) {
  // return Content
}
```

- **`arg`** (`object`):
  - **`num`** (`integer`): The number of hidden events.
  - **`text`** (`string`): The default text like `+X more`.

### noEventsClick

- **Type**: `function`
- **Default**: `undefined`

Callback function triggered when the user clicks the _No events_ area in list view.

```js
function (info) { }
```

- **`info`** (`object`):
  - **`jsEvent`** (`object`): JavaScript native event object.
  - **`view`** (`object`): The current [View](#view-object) object.

### noEventsContent

- **Type**: `Content` or `function`
- **Default**: `'No events'`

Defines the text displayed in list view when there are no events. Can be a [Content](#content) or a function returning 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 an event is allowed to resize. Should return `true` if the new size is allowed, `false` otherwise.

### resources

- **Type**: `array`, `object` or `function`
- **Default**: `[]`

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

1.  **Array of plain objects**: Predefined resources.
2.  **Fetch resources from a URL**: Specify `resources` as an object with `url`, `method`, and `extraParams` properties.
    - **`url`** (`string`): URL to fetch resources from.
    - **`method`** (`string`): HTTP request method (default: `'GET'`).
    - **`extraParams`** (`object` or `function`): Additional GET/POST data to send (default: `{}`).
3.  **Function**: A function that returns resources.
```

--------------------------------

### Get Calendar Option Value

Source: https://github.com/vkurko/calendar/blob/master/README.md

Retrieves the current value of a specified calendar option using its name. Returns the option's value or undefined if not found.

```javascript
// E.g. Get current date
let date = ec.getOption('date');
```

--------------------------------

### dayHeaderAriaLabelFormat - JavaScript Function Example

Source: https://github.com/vkurko/calendar/blob/master/README.md

Defines the text for the 'aria-label' attribute in calendar column headings. This can be a function that accepts a Date object and returns a formatted string.

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

--------------------------------

### Calendar Configuration Options

Source: https://github.com/vkurko/calendar/blob/master/README.md

This section details various configuration options for the Calendar API, including date display, toolbar customization, and event fetching.

```APIDOC
## Calendar Configuration Options

This document outlines various configuration options for the Calendar API.

### firstDay

*   **Type**: `integer`
*   **Default**: `0`
*   **Description**: 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`
*   **Description**: Determines whether `slotMinTime` and `slotMaxTime` should automatically expand when an event goes out of bounds. If `true`, expansion is based on displayed events (excluding background events). If an object is provided, it can include an `eventFilter` function to customize which events are considered.
    *   **`eventFilter`** (function): A function that takes an `event` object and returns `true` if the event should be considered, `false` otherwise.

### headerToolbar

*   **Type**: `object`
*   **Default**: `{start: 'title', center: '', end: 'today prev,next'}`
*   **Description**: Defines the buttons and title at the top of the calendar. Properties `start`, `center`, and `end` accept comma/space-separated strings of available values like `title`, `prev`, `next`, `today`, or view names (e.g., `dayGridMonth`).

### height

*   **Type**: `string`
*   **Default**: `undefined`
*   **Description**: Defines the height of the entire calendar. Accepts valid CSS values like `'100%'` or `'600px'`.

### hiddenDays

*   **Type**: `array`
*   **Default**: `[]`
*   **Description**: An array of days of the week (Sunday=0, Saturday=6) to exclude from display.

### highlightedDates

*   **Type**: `array`
*   **Default**: `[]`
*   **Description**: An array of dates to highlight in the calendar. Dates can be ISO8601 strings (e.g., `'2026-12-31'`) or JavaScript `Date` objects.

### lazyFetching

*   **Type**: `boolean`
*   **Default**: `true`
*   **Description**: Determines when event and resource fetching occurs. `true` fetches only when necessary, minimizing requests. `false` fetches whenever the current date changes.

### listDayFormat

*   **Type**: `object` or `function`
*   **Default**: `{weekday: 'long'}`
*   **Description**: Defines the text for the left side of day headings in list view. Can be an `Intl.DateTimeFormat` options object or a callback function returning formatted date content.

### listDaySideFormat

*   **Type**: `object` or `function`
*   **Default**: `{year: 'numeric', month: 'long', day: 'numeric'}`
*   **Description**: Defines the text for the right side of day headings in list view. Can be an `Intl.DateTimeFormat` options object or a callback function returning formatted date content.
```

--------------------------------

### Calendar Configuration Options

Source: https://github.com/vkurko/calendar/blob/master/packages/build/README.md

This section details various configuration options for the calendar, including date formatting, event display, drag-and-drop constraints, and duration settings.

```APIDOC
## Calendar Configuration Options

### dayPopoverFormat

- **Type**: `object` or `function`
- **Default**: `{month: 'long', day: 'numeric', year: 'numeric'}`

Defines the date format of the 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.

```

--------------------------------

### Create and Configure EventCalendar Instance

Source: https://github.com/vkurko/calendar/blob/master/docs/index.html

Initializes an EventCalendar instance with specified options, including view settings, toolbar configuration, resource definitions, and event data. It handles DOM element selection and custom scrollbar behavior based on the operating system.

```javascript
const ec = EventCalendar.create(document.getElementById('ec'), {
  view: 'timeGridWeek',
  headerToolbar: {
    start: 'prev,next today',
    center: 'title',
    end: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek resourceTimeGridWeek,resourceTimelineWeek'
  },
  resources: [
    {id: 1, title: 'Resource A'},
    {id: 2, title: 'Resource B'},
    {id: 3, title: 'Resource C'},
    {id: 4, title: 'Resource D'},
    {id: 5, title: 'Resource E'},
    {id: 6, title: 'Resource F'},
    {id: 7, title: 'Resource G'},
    {id: 8, title: 'Resource H'},
    {
      id: 9,
      title: 'Resource I',
      children: [
        {id: 10, title: 'Resource J'},
        {id: 11, title: 'Resource K'},
        {
          id: 12,
          title: 'Resource L',
          children: [
            {id: 13, title: 'Resource M'},
            {id: 14, title: 'Resource N'},
            {id: 15, title: 'Resource O'}
          ]
        }
      ]
    }
  ],
  scrollTime: '09:00',
  events: createEvents(),
  views: {
    timeGridWeek: {pointer: true},
    resourceTimeGridWeek: { columnWidth: '6em', pointer: true },
    resourceTimelineWeek: {
      slotDuration: '00:30',
      slotLabelInterval: '02:00',
      slotMinTime: '08:00',
      slotMaxTime: '20:00',
      slotWidth: 16,
      scrollTime: '08:00'
    }
  },
  dayMaxEvents: true,
  nowIndicator: true,
  selectable: true,
  customScrollbars: /Mac/i.test(navigator.userAgent)
});
```

--------------------------------

### dayCellFormat - JavaScript Function Example

Source: https://github.com/vkurko/calendar/blob/master/README.md

Defines the text displayed within a day cell in the 'dayGridMonth' view. This can be a function that accepts a Date object and returns a formatted string.

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

--------------------------------

### Include EventCalendar Standalone Bundle

Source: https://github.com/vkurko/calendar/blob/master/packages/build/README.md

Provides instructions for including the EventCalendar standalone bundle in an HTML page using `<link>` and `<script>` tags. It also shows how to initialize and destroy the calendar using the global `EventCalendar` object.

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

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);
```

--------------------------------

### Get Calendar Option - JavaScript

Source: https://github.com/vkurko/calendar/blob/master/packages/build/README.md

Retrieves the current value of a specified calendar option using the 'getOption' method. This is useful for inspecting the calendar's current state, such as the active date.

```javascript
// E.g. Get current date
let date = ec.getOption('date');

```

--------------------------------

### Customize Calendar Colors with CSS Variables

Source: https://github.com/vkurko/calendar/blob/master/packages/build/README.md

Shows how to override default calendar colors using CSS variables. This example targets the main calendar element (.ec) to change background and text colors.

```css
.ec {
  --ec-bg-color: #22272e;
  --ec-text-color: #adbac7;
}
```

--------------------------------

### Fetch Resources from URL Configuration

Source: https://github.com/vkurko/calendar/blob/master/packages/core/README.md

Configures fetching resource data from a specified URL. Supports GET/POST methods and sending extra parameters, with options to refetch resources on navigation.

```javascript
{
  url: 'your_resource_url',
  method: 'GET',
  extraParams: {
    // custom parameters
  }
}
```

--------------------------------

### eventTimeFormat: Custom Formatting Function

Source: https://github.com/vkurko/calendar/blob/master/packages/core/README.md

Provides a custom function to format the time displayed on events. This function receives the start and end Date objects for the event and should return the formatted time string.

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

--------------------------------

### Event Resizing and Interaction

Source: https://github.com/vkurko/calendar/blob/master/README.md

Configure options related to event resizing, including delays and callbacks for resize events.

```APIDOC
## eventLongPressDelay

### Description
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).

### Type
`integer`

### Default
`undefined`

### Requires
`Interaction` plugin

## eventResizableFromStart

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

### Type
`boolean`

### Default
`false`

### Requires
`Interaction` plugin

## eventResizeStart

### Description
Callback function that is triggered when the event resizing begins.

```js
function (info) { }
```

`info` is an object with the following properties:
- **event** ([Event](#event-object)) - The associated Event object.
- **jsEvent** (Event) - JavaScript native event object.
- **view** ([View](#view-object)) - The current View object.

### Method
`function`

### Default
`undefined`

### Requires
`Interaction` plugin

## eventResize

### Description
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** ([Event](#event-object)) - The associated Event object.
- **oldEvent** ([Event](#event-object)) - An Event object with information about the event before the resize.
- **startDelta** ([Duration](#duration-object)) - The amount of time the event’s start date was moved by.
- **endDelta** ([Duration](#duration-object)) - The amount of time the event’s end date was moved by.
- **revert** (function) - A function that, if called, reverts the event’s end date to the values before the resize.
- **jsEvent** (Event) - JavaScript native event object.
- **view** ([View](#view-object)) - The current View object.

### Method
`function`

### Default
`undefined`

### Requires
`Interaction` plugin
```

--------------------------------

### Event Handling and Styling

Source: https://github.com/vkurko/calendar/blob/master/packages/build/README.md

This section covers event-related callbacks and styling options, including when events are updated, background colors, custom class names, and click events.

```APIDOC
## Event Handling and Styling

### 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 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`.

```

--------------------------------

### Customizing EventCalendar Title Format with a Function

Source: https://github.com/vkurko/calendar/blob/master/packages/core/README.md

Allows dynamic formatting of the calendar title by providing a callback function. This function receives the start and end dates of the current view and should return a formatted string.

```javascript
function (start, end) {
  // return Content with the formatted date string
}
```

--------------------------------

### Initialize Standalone EventCalendar Bundle

Source: https://github.com/vkurko/calendar/blob/master/packages/core/README.md

Initializes the EventCalendar using the standalone bundle in a browser environment. It calls the global `EventCalendar.create` function with a target element and options, and demonstrates how to destroy the calendar instance.

```javascript
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);
```

--------------------------------

### Overriding EventCalendar Title Format for Specific Views

Source: https://github.com/vkurko/calendar/blob/master/packages/core/README.md

Demonstrates how to set specific title formats for different calendar views. For example, 'dayGridMonth' uses a long month format, while 'timeGridDay' includes the day.

```javascript
{
  dayGridMonth: {
    year: 'numeric',
    month: 'long'
  }
}
```

```javascript
{
  timeGridDay: {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }
}
```

--------------------------------

### Calendar Configuration Options

Source: https://github.com/vkurko/calendar/blob/master/packages/core/README.md

This section details various configuration options for the Calendar API, including date formatting, view settings, and event handling.

```APIDOC
## Calendar Configuration Options

### 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** (`function`): 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)`): The event 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
  - `[view name]`: A button that will switch the calendar to a specific view (e.g., `dayGridMonth`)

### 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.

### 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. When set to `false`, the calendar will fetch events any time the current date changes.

### 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** (`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** (`Date`): JavaScript Date object that needs to be formatted.
```

--------------------------------

### eventSources: Fetch Events from URL

Source: https://github.com/vkurko/calendar/blob/master/packages/core/README.md

Configures the calendar to fetch event data from a specified URL. The calendar sends HTTP requests with 'start' and 'end' parameters to the URL. You can also specify the HTTP method and additional parameters to send.

```javascript
{
  url: 'api/events',
  method: 'GET',
  extraParams: {
    custom_param: 'value'
  }
}
```

--------------------------------

### Calendar Methods API

Source: https://github.com/vkurko/calendar/blob/master/packages/build/README.md

This section details the methods available for interacting with and controlling the calendar instance.

```APIDOC
## Calendar Methods

This API provides methods to programmatically interact with the calendar instance after initialization.

### Core Methods:

- **getOption(name)**: Retrieves the value of a specific option.
  - **name** (string): The name of the option to retrieve.
  - **Returns**: The value of the option.

- **setOption(name, value)**: Sets the value of a specific option and rerenders the calendar.
  - **name** (string): The name of the option to set.
  - **value** (any): The new value for the option.

- **getView()**: Gets the current view object.
  - **Returns**: The current view object.

- **next()**: Navigates to the next date or range.

- **prev()**: Navigates to the previous date or range.

- **today()**: Navigates to the current date.

- **render()**: Rerenders the calendar.

- **destroy()**: Destroys the calendar instance and cleans up resources.

### Event Methods:

- **addEvent(eventData)**: Adds a new event to the calendar.
  - **eventData** (object): An object containing the event's properties (e.g., title, start, end).
  - **Returns**: The created event object.

- **getEventById(id)**: Retrieves an event by its ID.
  - **id** (string | number): The ID of the event.
  - **Returns**: The event object or null if not found.

- **getEvents()**: Retrieves all events currently rendered on the calendar.
  - **Returns**: An array of event objects.

- **removeEventById(id)**: Removes an event from the calendar by its ID.
  - **id** (string | number): The ID of the event to remove.

- **updateEvent(eventData)**: Updates an existing event.
  - **eventData** (object): An object containing the event's ID and the properties to update.

- **refetchEvents()**: Refetches all events from their sources.

### Resource Methods:

- **addResource(resourceData)**: Adds a new resource to the calendar.
  - **resourceData** (object): An object containing the resource's properties (e.g., id, title).
  - **Returns**: The created resource object.

- **getResourceById(id)**: Retrieves a resource by its ID.
  - **id** (string | number): The ID of the resource.
  - **Returns**: The resource object or null if not found.

- **getResources()**: Retrieves all resources currently rendered on the calendar.
  - **Returns**: An array of resource objects.

- **removeResourceById(id)**: Removes a resource from the calendar by its ID.
  - **id** (string | number): The ID of the resource to remove.

- **refetchResources()**: Refetches all resources from their sources.

### Interaction Methods:

- **dateFromPoint(x, y)**: Gets the date information at a specific pixel coordinate.
  - **x** (number): The x-coordinate.
  - **y** (number): The y-coordinate.
  - **Returns**: An object with date and view information.

- **unselect()**: Clears any current selection.

### Example Usage

```javascript
const calendar = new Calendar(element, {
  // ... options
});

// Add an event
const event = calendar.addEvent({
  title: 'New Task',
  start: '2023-10-27',
  allDay: true
});

// Update an event
calendar.updateEvent(Object.assign({}, event, { title: 'Updated Task' }));

// Get all events
const allEvents = calendar.getEvents();

// Navigate to the next view
calendar.next();
```
```