calendar

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

1,187

101

1,187

View on GitHub View on NPM

Top Related Projects

fullcalendar

18,566

Full-sized drag & drop event calendar in JavaScript

tui.calendar

11,862

🍞📅A JavaScript calendar that has everything you need.

bootstrap-datepicker

12,664

A datepicker for twitter bootstrap (@twbs)

Pikaday

8,000

A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS

flatpickr

16,122

lightweight, powerful javascript datetimepicker with no dependencies

rome

2,910

:calendar: Customizable date (and time) picker. Opt-in UI, no jQuery!

Quick Overview

vkurko/calendar is a lightweight, customizable JavaScript calendar library for creating interactive calendars in web applications. It offers a range of features including event management, drag-and-drop functionality, and various view options, making it suitable for both simple and complex calendar implementations.

Pros

Lightweight and fast, with minimal dependencies
Highly customizable with numerous configuration options
Supports multiple calendar views (day, week, month, year)
Responsive design and mobile-friendly

Cons

Limited built-in styling options, requiring custom CSS for advanced designs
Documentation could be more comprehensive for some advanced features
Lacks built-in internationalization support
May require additional plugins for complex use cases

Code Examples

Creating a basic calendar:

const calendar = new Calendar({
  target: '#calendar',
  events: [
    { start: '2023-05-01', end: '2023-05-03', title: 'Conference' },
    { start: '2023-05-15', title: 'Meeting' }
  ]
});

Customizing calendar options:

const calendar = new Calendar({
  target: '#calendar',
  view: 'week',
  startOfWeek: 1,
  headerDateFormat: 'ddd, MMM D',
  dayBoundaries: [8, 20],
  snapToMins: 15
});

Adding event listeners:

calendar.on('eventClick', (event) => {
  console.log('Clicked event:', event.title);
});

calendar.on('dateClick', (date) => {
  console.log('Clicked date:', date.format('YYYY-MM-DD'));
});

Getting Started

Install the library:
```
npm install @vkurko/calendar
```

Import and initialize the calendar:

import { Calendar } from '@vkurko/calendar';

const calendar = new Calendar({
  target: '#calendar-container',
  events: [
    { start: '2023-05-10', title: 'Example Event' }
  ]
});

Add necessary CSS:

<link rel="stylesheet" href="node_modules/@vkurko/calendar/dist/calendar.css">

Competitor Comparisons

fullcalendar

18,566

Full-sized drag & drop event calendar in JavaScript

Pros of FullCalendar

More comprehensive feature set, including support for various view types (month, week, day, etc.)
Extensive documentation and community support
Better integration with popular JavaScript frameworks (React, Vue, Angular)

Cons of FullCalendar

Larger file size and potentially higher performance overhead
Steeper learning curve due to more complex API
Commercial license required for certain features

Code Comparison

FullCalendar:

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin ],
    initialView: 'dayGridMonth'
  });
  calendar.render();
});

Calendar:

import { Calendar } from '@vkurko/calendar';

const calendar = new Calendar({
  el: '#calendar',
  view: 'month'
});

FullCalendar offers more configuration options out of the box, while Calendar provides a simpler API for basic calendar functionality. FullCalendar's initialization requires more code and plugin management, whereas Calendar has a more straightforward setup process. Both libraries allow for customization, but FullCalendar's extensive feature set may be overkill for simpler use cases where Calendar could suffice.

tui.calendar

11,862

🍞📅A JavaScript calendar that has everything you need.

Pros of tui.calendar

More comprehensive feature set, including various view types (month, week, day)
Extensive documentation and examples
Active development with regular updates and bug fixes

Cons of tui.calendar

Larger file size and potentially higher resource usage
Steeper learning curve due to more complex API
May be overkill for simple calendar implementations

Code Comparison

tui.calendar:

import Calendar from '@toast-ui/calendar';

const calendar = new Calendar('#calendar', {
  defaultView: 'week',
  template: {
    time: function(schedule) {
      return moment(schedule.start.getTime()).format('HH:mm');
    }
  }
});

calendar:

import { Calendar } from '@vkurko/calendar';

const calendar = new Calendar({
  target: document.getElementById('calendar'),
  props: {
    view: 'month',
    events: []
  }
});

Summary

tui.calendar offers a more feature-rich solution with extensive documentation and regular updates, making it suitable for complex calendar applications. However, it may be more resource-intensive and have a steeper learning curve. calendar provides a simpler, lightweight alternative that may be more appropriate for basic calendar needs or projects with limited resources. The choice between the two depends on the specific requirements of your project and the level of complexity you need in your calendar implementation.

bootstrap-datepicker

12,664

A datepicker for twitter bootstrap (@twbs)

Pros of bootstrap-datepicker

Extensive documentation and examples
Wide browser compatibility, including older versions
Large community support and regular updates

Cons of bootstrap-datepicker

Heavier file size due to more features and legacy support
Requires jQuery as a dependency
Less modern UI design compared to calendar

Code Comparison

bootstrap-datepicker:

$('#datepicker').datepicker({
    format: 'mm/dd/yyyy',
    startDate: '-3d',
    autoclose: true
});

calendar:

new Calendar({
    id: '#calendar',
    dateFormat: 'MM/DD/YYYY',
    minDate: new Date(),
    disableDaysOfWeek: [0, 6]
});

The code snippets show that bootstrap-datepicker uses jQuery syntax and offers options like startDate and autoclose. calendar uses a more modern JavaScript approach with a simpler API, allowing for easy date formatting and day disabling.

bootstrap-datepicker is a mature project with extensive features and broad compatibility, making it suitable for projects requiring legacy support. calendar offers a lightweight, modern alternative with a clean API, ideal for projects prioritizing performance and simplicity.

Pikaday

8,000

A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS

Pros of Pikaday

Lightweight and dependency-free, making it easy to integrate into various projects
Extensive browser compatibility, including older versions of Internet Explorer
Highly customizable appearance through CSS

Cons of Pikaday

Less feature-rich compared to Calendar, focusing primarily on date selection
Requires more manual setup for advanced functionalities like range selection
Limited built-in localization options

Code Comparison

Calendar:

const calendar = new Calendar({
  id: '#calendar',
  eventsData: [
    { start: '2023-05-01', end: '2023-05-03', title: 'Event 1' },
    { start: '2023-05-15', title: 'Event 2' }
  ],
  dateClick: (date) => console.log('Clicked date:', date)
});

Pikaday:

const picker = new Pikaday({
  field: document.getElementById('datepicker'),
  format: 'D MMM YYYY',
  onSelect: function(date) {
    console.log('Selected date:', date);
  }
});

The code comparison shows that Calendar offers more built-in functionality for handling events and date ranges, while Pikaday focuses on simple date selection with customization options.

flatpickr

16,122

lightweight, powerful javascript datetimepicker with no dependencies

Pros of flatpickr

More comprehensive feature set, including time selection and range picking
Extensive documentation and active community support
Highly customizable with numerous options and plugins

Cons of flatpickr

Larger file size and potentially higher performance overhead
Steeper learning curve due to more complex configuration options

Code Comparison

flatpickr:

flatpickr("#myInput", {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
  minDate: "today",
  maxDate: new Date().fp_incr(14)
});

calendar:

new Calendar({
  id: '#calendar',
  eventsData: [
    { start: '2023-05-01', end: '2023-05-03', name: 'Event 1' },
    { start: '2023-05-15', name: 'Event 2' }
  ]
});

Key Differences

flatpickr focuses on date/time picking, while calendar is geared towards event display
calendar offers a more visual, calendar-like interface for event management
flatpickr provides more granular control over date and time selection

Use Cases

Choose flatpickr for advanced date/time input in forms or applications
Opt for calendar when building event calendars or scheduling interfaces

rome

2,910

:calendar: Customizable date (and time) picker. Opt-in UI, no jQuery!

Pros of Rome

More comprehensive feature set, including time picker and input parsing
Extensive documentation and examples
Larger community and more frequent updates

Cons of Rome

Larger file size and potentially heavier performance impact
More complex setup and configuration
Steeper learning curve for basic implementations

Code Comparison

Rome:

rome(input, {
  time: false,
  dateValidator: rome.val.beforeEq(rome.moment().add(1, 'months'))
});

Calendar:

new Calendar({
  target: document.body,
  props: {
    maxDate: new Date(new Date().setMonth(new Date().getMonth() + 1))
  }
});

Key Differences

Rome offers more built-in functionality and customization options
Calendar has a simpler API and is easier to implement for basic use cases
Rome uses its own date manipulation library, while Calendar relies on native Date objects
Calendar is built with Svelte, making it potentially more performant for Svelte-based projects

Conclusion

Choose Rome for complex date-picking needs with extensive customization, or opt for Calendar if you prefer a lightweight, easy-to-implement solution, especially in Svelte projects.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Event Calendar

See demo and changelog.

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

Lightweight (35kb br compressed)
Zero-dependency (pre-built bundle)
Used on over 70,000 websites with Bookly

Inspired by FullCalendar, implements similar options.

Usage

Options

allDayContent
allDaySlot
buttonText
customButtons
date
dateClick
datesAboveResources
datesSet
dayCellFormat
dayHeaderAriaLabelFormat
dayHeaderFormat
dayMaxEvents
dayPopoverFormat
displayEventEnd
dragScroll
duration
editable
events
eventAllUpdated
eventBackgroundColor
eventClassNames
eventClick
eventColor
eventContent
eventDidMount
eventDragMinDistance
eventDragStart

eventDragStop
eventDrop
eventDurationEditable
eventLongPressDelay
eventMouseEnter
eventMouseLeave
eventResize
eventResizeStart
eventResizeStop
eventSources
eventStartEditable
eventTextColor
eventTimeFormat
filterResourcesWithEvents
firstDay
flexibleSlotTimeLimits
headerToolbar
height
hiddenDays
highlightedDates
lazyFetching
listDayFormat
listDaySideFormat
loading
locale
longPressDelay
moreLinkContent

noEventsClick
noEventsContent
nowIndicator
pointer
resources
resourceLabelContent
resourceLabelDidMount
select
selectable
selectBackgroundColor
selectLongPressDelay
selectMinDistance
scrollTime
slotDuration
slotEventOverlap
slotHeight
slotLabelFormat
slotMaxTime
slotMinTime
slotWidth
theme
titleFormat
unselect
unselectAuto
unselectCancel
view
viewDidMount
views

Methods
getOption

setOption
addEvent

getEventById

getEvents

removeEventById

updateEvent

refetchEvents
dateFromPoint

destroy

getView

next

prev

unselect
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

Svelte component / ES6 module

The first step is to install the Event Calendar core package:

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

Then install any additional plugins you plan to use:

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:

<script>
    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
        ]
    };
</script>

<Calendar {plugins} {options} />

Or in ES6 module:

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:

import '@event-calendar/core/index.css';

Pre-built browser ready bundle

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@3.4.0/event-calendar.min.css">
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.4.0/event-calendar.min.js"></script>

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:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build/event-calendar.min.css">
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build/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 with something like this:

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

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

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

<script>
    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';
    }
</script>

<button on:click={updateOptions}>Change slot duration</button>
<Calendar {plugins} {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 returns content:

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:

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.

First, specify the custom buttons as key-value pairs. Then reference them from the headerToolbar option.

Example

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

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 object
`resource`	If the current view is a resource view, the Resource 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.

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 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 object, or a callback function that returns a Content with the formatted string:

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 object, or a callback function that returns formatted string:

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 object, or a callback function that returns a Content with the formatted string:

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

This value can be either an object with options for the native JavaScript Intl.DateTimeFormat object, or a callback function that returns a Content with the formatted string:

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 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 and eventDurationEditable instead.

events

Type array
Default []

Array of plain objects that will be parsed into Event 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.

function (info) { }

info is an object with the following properties:

view

The current View 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:

function (info) {
    // return string or array
}

info is an object with the following properties:

`event`	The associated Event object
`view`	The current View object

eventClick

Type function
Default undefined

Callback function that is triggered when the user clicks an event.

function (info) { }

info is an object with the following properties:

`el`	The HTML element for the event
`event`	The associated Event object
`jsEvent`	JavaScript native event object with low-level information such as click coordinates
`view`	The current View 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 or a function that returns content or undefined:

function (info) {
    // return Content or undefined
}

info is an object with the following properties:

`event`	The associated Event object
`timeText`	Formatted time of the event
`view`	The current View 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.

function (info) { }

info is an object with the following properties:

`el`	The HTML element for the event
`event`	The associated Event object
`timeText`	Formatted time of the event
`view`	The current View 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.

function (info) { }

info is an object with the following properties:

`event`	The associated Event object
`jsEvent`	JavaScript native event object with low-level information such as click coordinates
`view`	The current View 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 callback is triggered.

function (info) { }

info is an object with the following properties:

`event`	The associated Event object
`jsEvent`	JavaScript native event object with low-level information such as click coordinates
`view`	The current View 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 callback has been triggered.

function (info) { }

info is an object with the following properties:

`event`	The associated Event object
`oldEvent`	An Event object that holds information about the event before the drop
`oldResource`	If the resource has changed, this is the Resource 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 object the event went to. If the resource has not changed, this will be undefined
`delta`	A Duration 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 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.

eventMouseEnter

Type function
Default undefined

Callback function that is triggered when the user hovers over an event with the cursor (mouse pointer).

function (info) { }

info is an object with the following properties:

`el`	The HTML element for the event
`event`	The associated Event object
`jsEvent`	JavaScript native event object with low-level information such as click coordinates
`view`	The current View object

eventMouseLeave

Type function
Default undefined

Callback function that is triggered when the cursor (mouse pointer) is moved out of an event.

function (info) { }

info is an object with the following properties:

`el`	The HTML element for the event
`event`	The associated Event object
`jsEvent`	JavaScript native event object with low-level information such as click coordinates
`view`	The current View 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 callback has been triggered.

function (info) { }

info is an object with the following properties:

`event`	The associated Event object
`oldEvent`	An Event object that holds information about the event before the resize
`endDelta`	A Duration 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 object

eventResizeStart

Type function
Default undefined
Requires Interaction plugin

Callback function that is triggered when the event resizing begins.

function (info) { }

info is an object with the following properties:

`event`	The associated Event object
`jsEvent`	JavaScript native event object with low-level information such as click coordinates
`view`	The current View 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 callback is triggered.

function (info) { }

info is an object with the following properties:

`event`	The associated Event object
`jsEvent`	JavaScript native event object with low-level information such as click coordinates
`view`	The current View 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 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.

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 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 (or thenable) 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 object, or a callback function that returns a Content with the formatted string:

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

function(event) {
    // return true or false
}

event

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
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 object, or a callback function that returns a Content with the formatted string:

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 object, or a callback function that returns a Content with the formatted string:

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.

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 object that the Event Calendar uses to format date and time strings in options such as dayHeaderFormat, 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 and selectLongPressDelay.

moreLinkContent

Type Content or function
Default undefined

Defines the text that is displayed instead of the default +2 more created by the dayMaxEvents option.

This value can be either a Content or a function that returns content:

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.

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 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 or a function that returns content:

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 objects for displaying in the resource view.

resourceLabelContent

Type string, objector function
Default undefined

Defines the content that is rendered inside an element with a resource title.

This value can be either a Content or a function that returns content:

function (info) {
    // return Content
}

info is an object with the following properties:

`resource`	The associated Resource 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.

function (info) { }

info is an object with the following properties:

`el`	The HTML element for the label
`resource`	The associated Resource 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.

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 object
`resource`	If the current view is a resource view, the Resource 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.

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.

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

.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 object, or a callback function that returns a Content with the formatted string:

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

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

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 object, or a callback function that returns a Content with the formatted string:

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 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 method is called via the API.

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 method, jsEvent will be undefined

view

The current View object

unselectAuto

Type boolean
Default true
Requires Interaction plugin

Determines whether clicking elsewhere on the page will clear the current selection. See selectable.

unselectCancel

Type string
Default ''
Requires Interaction plugin

A CSS selector that specifies elements that will ignore the unselectAuto option.

Clicking on elements that match this CSS selector will prevent the current selection from being cleared (because of the 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.

function (info) { }

info is an object with the following properties:

view

The mounted View 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:

<script>
    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();
    }
</script>

<button on:click={invokeMethod}>Refetch events</button>
<Calendar bind:this={ec} {plugins} {options} />

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.

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

// 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 object
Return value Event object or null

Adds a new event to the calendar.

getEventById( id )

Parameters
- id string|integer The ID of the event
Return value Event object or null

Returns a single event with the matching id.

getEvents()

Return value Event[] Array of Event 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 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 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 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, 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 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.

Content

The content value can be presented in the following forms:

a string containing text 'some text'
an object containing the HTML string {html: '<p>some HTML</p>'}
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
`editable`	`true`, `false` or `undefined`. The value overriding the editable setting for this specific event
`startEditable`	`true`, `false` or `undefined`. The value overriding the eventStartEditable setting for this specific event
`durationEditable`	`true`, `false` or `undefined`. The value overriding the 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 override for this specific event
`textColor`	The 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. Default `''`
`editable`	`boolean` Overrides the master editable option for this single event. Default `undefined`
`startEditable`	`boolean` Overrides the master eventStartEditable option for this single event. Default `undefined`
`durationEditable`	`boolean` Overrides the master 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 option. Default `undefined`
`textColor`	`string` Sets the eventâs text color just like the calendar-wide 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. 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
`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 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. Default `''`
`eventBackgroundColor`	`string` Sets the default background color for this resource's events just like the calendar-wide eventBackgroundColor option. Default `undefined`
`eventTextColor`	`string` Sets the default text color for this resource's events just like the calendar-wide 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. <body class="ec-dark">.

If you want the dark theme to be activated automatically based on the preferred 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:

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

A list of all available CSS variables can be found here.

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.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of FullCalendar

Cons of FullCalendar

Code Comparison

Pros of tui.calendar

Cons of tui.calendar

Code Comparison

Summary

Pros of bootstrap-datepicker

Cons of bootstrap-datepicker

Code Comparison

Pros of Pikaday

Cons of Pikaday

Code Comparison

Pros of flatpickr

Cons of flatpickr

Code Comparison

Key Differences

Use Cases

Pros of Rome

Cons of Rome

Code Comparison

Key Differences

Conclusion

Convert designs to code with AI

README

Event Calendar

Table of contents

Usage

Svelte component / ES6 module

Pre-built browser ready bundle

Modifying options after initialization

Options

allDayContent

allDaySlot

buttonText

customButtons

date

dateClick

datesAboveResources

datesSet

dayCellFormat

dayHeaderAriaLabelFormat

dayHeaderFormat

dayMaxEvents

dayPopoverFormat

displayEventEnd

dragScroll

duration

editable

events

eventAllUpdated

eventBackgroundColor

eventClassNames

eventClick

eventColor

eventContent

eventDidMount

eventDragMinDistance

eventDragStart

eventDragStop

eventDrop

eventDurationEditable

eventLongPressDelay

eventMouseEnter

eventMouseLeave

eventResize

eventResizeStart

eventResizeStop

eventSources

1. Fetch events from a URL

2. Execute custom function

eventStartEditable

eventTimeFormat