calendar

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

Table of contents

• Usage

  • JavaScript module
  • Svelte 5 component
    • Content snippets
  • Standalone bundle
  • Modifying options after initialization

• Options

  allDayContent allDaySlot buttonText columnWidth customButtons customScrollbars date dateClick dateIncrement datesAboveResources datesSet dayCellContent dayCellFormat dayHeaderAriaLabelFormat dayHeaderFormat dayMaxEvents dayPopoverFormat displayEventEnd dragConstraint dragScroll duration editable events eventAllUpdated eventBackgroundColor eventClassNames eventClick eventColor eventContent eventDidMount eventDragMinDistance eventDragStart eventDragStop eventDrop eventDurationEditable

• eventFilter

• eventGap

• eventLongPressDelay

• eventMouseEnter

• eventMouseLeave

• eventOrder

• eventOrderStrict

• eventResizableFromStart

• eventResize

• eventResizeStart

• eventResizeStop

• eventSources

• eventStartEditable

• eventTextColor

• eventTimeFormat

• filterEventsWithResources

• filterResourcesWithEvents

• firstDay

• flexibleSlotTimeLimits

• headerToolbar

• height

• hiddenDays

• highlightedDates

• icons

• lazyFetching

• listDayFormat

• listDaySideFormat

• loading

• locale

• longPressDelay

• monthHeaderFormat

• moreLinkContent

• noEventsClick

• noEventsContent

• nowIndicator

• pointer

• refetchResourcesOnNavigate

• resizeConstraint

• resourceExpand

• resources

• resourceLabelContent

• resourceLabelDidMount

• scrollTime

• select

• selectable

• selectBackgroundColor

• selectConstraint

• selectLongPressDelay

• selectMinDistance

• slotDuration

• slotEventOverlap

• slotHeight

• slotLabelFormat

• slotLabelInterval

• slotMaxTime

• slotMinTime

• slotWidth

• snapDuration

• theme

• timeZone

• titleFormat

• unselect

• unselectAuto

• unselectCancel

• validRange

• view

• viewDidMount

• views

• weekNumberContent

• weekNumbers

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.

Content snippets

The options that define content can also be given as Svelte snippets:

• allDayContent
• dayCellContent
• eventContent
• moreLinkContent
• noEventsContent
• resourceLabelContent
• weekNumberContent

A snippet is passed to the Calendar component under the name of the option it defines:

<Calendar plugins={[DayGrid]} {options}>
    {#snippet eventContent({event, timeText})}
        <b>{timeText}</b> {event.title}
    {/snippet}
</Calendar>

It can also be passed as a property, which is convenient when the snippet is declared elsewhere:

<Calendar plugins={[DayGrid]} {options} eventContent={myEventContent}/>

A snippet receives the same argument as the function form of the option and is rendered in the same place.

The content property of customButtons is also supported, but since custom buttons have arbitrary names, such a snippet is named customButton followed by the name of the button with the first letter capitalized. The button itself does not have to be listed in the customButtons option:

<Calendar plugins={[ResourceTimeline]} options={{headerToolbar: {end: 'myFilter'}}}>
    {#snippet customButtonMyFilter()}
        <input bind:value={query}>
    {/snippet}
</Calendar>

Unlike a function, a snippet is rendered by Svelte itself. It can contain components, event handlers and transitions, and it is updated reactively when the state it uses changes.

If both a snippet and an option with the same name are given, the snippet takes precedence.

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/[email protected]/dist/event-calendar.min.css">
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/[email protected]/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:

xml复制

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

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} from '@event-calendar/core';

    let options = $state({
        view: 'timeGridWeek'
    });

    function updateOptions() {
        options.slotDuration = '01:00';
    }
</script>

<button onclick={updateOptions}>Change slot duration</button>
<Calendar plugins={[TimeGrid]} {options} />

Options

allDayContent

• Type Content or function
• Default 'all-day'

Defines the content that is displayed as a title of the all-day slot.

This value can be either a Content or a function that re