@event-calendar/interaction

    0.7.1 • Public • Published

    Event Calendar

    See demo.

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

    • Lightweight (44kb br compressed modern version)
    • Zero-dependency (pre-built bundle)
    • Used by Bookly

    Inspired by FullCalendar, implements similar options.

    Table of contents

    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-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
                ]
            }
        }
    });

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

    If you don't need IE11 support, you can use the modern version of the bundle instead: event-calendar-modern.min.css and event-calendar-modern.min.js. The lack of IE11 support makes the bundle ~1.5 times smaller.

    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

    buttonText

    • Type object
    • Default {today: 'today', dayGridMonth: 'month', listDay: 'list', listWeek: 'list', listMonth: 'list', listYear: 'list', resourceTimeGridDay: 'day', resourceTimeGridWeek: 'week', timeGridDay: 'day', timeGridWeek: 'week'}

    Text that is displayed in buttons of the header toolbar.

    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

    Callback function that is triggered when the user clicks on a date or a time.

    function (dateClickInfo) {}

    dateClickInfo is an object with the following properties:

    date

    JavaScript Date object for the clicked date and time

    dateStr

    ISO8601 string representation of the date

    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

    dayHeaderFormat

    • Type object or function
    • Default {weekday: 'short', month: 'numeric', day: 'numeric'}

    Views override the default value as follows:

    • dayGridMonth {weekday: 'short'}
    • 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 formatted string:

    function (date) {
        // return 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 formatted string:

    displayEventEnd

    • Type boolean
    • Default true

    Views override the default value as follows:

    • dayGridMonth false

    Determines whether to display an event’s end time.

    dragScroll

    • Type boolean
    • Default true

    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}
    • listWeek {weeks: 1}
    • listMonth {months: 1}
    • listYear {years: 1}
    • resourceTimeGridDay {days: 1}
    • resourceTimeGridWeek {weeks: 1}
    • timeGridDay {days: 1}
    • timeGridWeek {weeks: 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

    Determines whether the events on the calendar can be dragged and resized (both at the same time).

    Currently, only dragging is supported. See eventStartEditable.

    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.

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

    eventClick

    • Type function
    • Default undefined

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

    function (eventClickInfo) { }

    eventClickInfo 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 string, objector function
    • Default undefined

    Defines the content that is rendered inside an event’s element.

    This value can be either a string containing HTML '<p>...</p>', an object containing the HTML string {html: '<p>...</p>'}, an object containing an array of DOM nodes {domNodes: [node1, node2, ...]} or a function that returns any of the above formats:

    function (eventInfo) {
        // return string or object
    }

    eventInfo is an object with the following properties:

    event

    The associated Event object

    timeText

    Formatted time of the event

    view

    The current View object

    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 (mountInfo) { }

    mountInfo 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

    Defines how many pixels the user’s mouse must move before the event dragging begins.

    eventDragStart

    • Type function
    • Default undefined

    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

    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

    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

    eventMouseEnter

    • Type function
    • Default undefined

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

    function (mouseEnterInfo) { }

    mouseEnterInfo 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 (mouseLeaveInfo) { }

    mouseLeaveInfo 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

    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

    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

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

    function (time) {
        // return formatted time string
    }

    time

    JavaScript Date object that needs to be formatted

    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
    • Default false

    Determines whether slotMinTime and slotMaxTime should automatically expand when an event goes out of bounds.

    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 'auto'

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

    function (date) {
      // return 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 formatted string:

    function (date) {
      // return 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.

    monthMode

    • Type boolean
    • Default false

    Views override the default value as follows:

    • dayGridMonth true

    Tells the calendar that visible dates should start from the firstDay of the week, even if it will display days outside the current range (this is a common case for a month calendar when you can see days from adjacent months).

    moreLinkContent

    • Type string, objector 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 string containing HTML '<p>...</p>', an object containing the HTML string {html: '<p>...</p>'}, an object containing an array of DOM nodes {domNodes: [node1, node2, ...]} or a function that returns any of the above formats:

    function (arg) {
      // return string or object
    }

    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 (clickInfo) { }

    clickInfo 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 string, objector 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 string containing HTML '<p>...</p>', an object containing the HTML string {html: '<p>...</p>'}, an object containing an array of DOM nodes {domNodes: [node1, node2, ...]} or a function that returns any of the above formats:

    function () {
      // return string or object
    }

    pointer

    • Type boolean
    • Default false

    Enables mouse cursor pointer in timeGrid/resourceTimeGrid views.

    resources

    • Type Array
    • Default []

    Array of plain objects that will be parsed into Resource objects for displaying in the resource view.

    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'

    Defines the frequency for displaying time slots.

    This should be a value that can be parsed into a Duration object.

    slotHeight

    • Type integer
    • Default 24

    Defines the time slot height in pixels. When changing the setting, you must additionally override the following CSS styles:

    .ec-time, .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 formatted string:

    function (time) {
      // return 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.

    theme

    • Type object or function
    • Default {calendar: 'ec', header: 'ec-header', withScroll: 'ec-with-scroll', hiddenScroll: 'ec-hidden-scroll', body: 'ec-body', week: 'ec-week', compact: 'ec-compact', toolbar: 'ec-toolbar', sidebar: 'ec-sidebar', content: 'ec-content', lines: 'ec-lines', line: 'ec-line', days: 'ec-days', day: 'ec-day', dayHead: 'ec-day-head', today: 'ec-today', otherMonth: 'ec-other-month', highlight: 'ec-highlight', events: 'ec-events', event: 'ec-event', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', bgEvents: 'ec-bg-events', bgEvent: 'ec-bg-event', hiddenTimes: 'ec-hidden-times', time: 'ec-time', button: 'ec-button', buttonGroup: 'ec-button-group', icon: 'ec-icon', active: 'ec-active', title: 'ec-title', uniform: 'ec-uniform', dayFoot: 'ec-day-foot', month: 'ec-month', popup: 'ec-popup', daySide: 'ec-day-side', eventTag: 'ec-event-tag', list: 'ec-list', noEvents: 'ec-no-events', resource: 'ec-resource', resourceTitle: 'ec-resource-title', draggable: 'ec-draggable', ghost: 'ec-ghost', preview: 'ec-preview', pointer: 'ec-pointer'}

    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 an actual 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 formatted string:

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

    date

    JavaScript Date object that needs to be formatted

    view

    • Type string
    • Default 'resourceTimeGridWeek'

    The view that is displayed in the calendar. Can be 'dayGridMonth', 'listDay', 'listWeek', 'listMonth', 'listYear', 'resourceTimeGridDay', 'resourceTimeGridWeek', 'timeGridDay' or 'timeGridWeek'.

    viewDidMount

    • Type function
    • Default undefined

    Callback function that is triggered right after the view has been added to the DOM.

    function (mountInfo) { }

    mountInfo 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());

    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.

    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.

    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.

    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.

    getView()

    • Return value View

    Returns the View object for the current view.

    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

    start

    JavaScript Date object holding the event’s start time

    end

    JavaScript Date object holding the event’s end time

    title

    The text appearing on the event

    editable

    Boolean (true or false) or undefined. The value overriding the editable setting for this specific event

    startEditable

    Boolean (true or false) or undefined. The value overriding the eventStartEditable 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

    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

    resourceId

    string or integer An ID of a resource that the event is associated with. This field is not used if resourceIds is provided. Default undefined

    resourceIds

    Array An array of resource IDs that the event is associated with. This field is used instead of resourceId. Default []

    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

    string The text that will appear on the event. 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

    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

    color

    string This is currently an alias for the backgroundColor field. Default undefined

    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

    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

    string Text that will be displayed on the resource when it is rendered. Default ''

    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

    Browser support

    • Chrome (latest)
    • Firefox (latest)
    • Safari (latest)
    • Opera (latest)
    • Edge (latest)
    • Internet Explorer 11

    Install

    npm i @event-calendar/interaction

    DownloadsWeekly Downloads

    29

    Version

    0.7.1

    License

    MIT

    Unpacked Size

    65.1 kB

    Total Files

    3

    Last publish

    Collaborators

    • vkurko