EventCalendar

See demo and changelog.

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

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

Inspired by FullCalendar, it implements similar options.

Featured sponsors

</td> <td>

:heavy_plus_sign: Get on the list

</td> </tr> </table>

Usage
Options
<table> <tr><td>
</td><td>
</td><td>
</td></tr> </table>
Methods
<table> <tr><td>
- getOption
- setOption
</td><td>
</td><td>
- refetchEvents
- refetchResources
</td><td>
- dateFromPoint
- getView
- next
- prev
- unselect
</td></tr> </table>
Content
Event object
- Parsing event from a plain object
Duration object
- Parsing duration from input values
Resource object
- Parsing resource from a plain object
View object
Theming
Browser support

Usage

JavaScript module

The first step is to install the EventCalendar core package:

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

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

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

Then, in your JavaScript module:

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

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

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

Svelte 5 component

The first step is to install the EventCalendar core package:

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

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

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

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

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

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

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

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

Standalone bundle

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

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

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

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:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build/dist/event-calendar.min.css">
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build/dist/event-calendar.min.js"></script>
But it is recommended to always specify the version and explicitly update it if necessary, in order to avoid unpredictable problems when a new version of the library is released.

</details>

Then initialize the calendar like this:

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

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

Modifying options after initialization

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

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

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

<script>
    import {Calendar, TimeGrid

Calendar

Install / Use

README