Git Product home page Git Product logo

calendar's Introduction

Event Calendar npm

See demo and changelog.

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

  • Lightweight (33kb br compressed)
  • Zero-dependency (pre-built bundle)
  • Used on over 70,000 websites with 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
            ]
        }
    }
});

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/[email protected]/event-calendar.min.css">
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/[email protected]/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: 'day', resourceTimeGridWeek: 'week', 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'})
  • 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 undefined

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

click

 A callback function that is called when the button is clicked. Accepts one argument mouseEvent

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'}
  • 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

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

function (info) {
    // return Content
}

info 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 (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 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'

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

theme

  • Type object or function
  • Default {active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', 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', 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', resourceTitle: 'ec-resource-title', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', time: 'ec-time', title: 'ec-title', today: 'ec-today', toolbar: 'ec-toolbar', uniform: 'ec-uniform', view: '', weekdays: ['ec-sun', 'ec-mon', 'ec-tue', 'ec-wed', 'ec-thu', 'ec-fri', 'ec-sat'], withScroll: 'ec-with-scroll'}

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'})
  • 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', '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());

getEvents()

  • Return value Event[] Array of Event objects

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

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.

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.

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

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 []

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

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

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.

calendar's People

Contributors

ademaro avatar conoroshea1996 avatar moka-ayumu avatar mrvnklm avatar mweimerskirch avatar nicholas-toh avatar stackasaur avatar vkurko avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

lmcardle billbuilt code-wisdoms stanskrivanek tarentino76 conoroshea1996 alexkole113 mingliu68 jedliu qaramelus ignition-is-go tygeri k4lii daltonzjones afrowave akshaygole9595 amigo1121 prabh-kang rufinn tai-le-newhorizon moka-ayumu dohd leaguebrain mjesteve stackasaur vineetbansal nicholasdillon mrvnklm wpwhales moersito anggxyz taihuynh812 jokerinteractive jasonvonkrueger mweimerskirch billybob piotrm73 s20200366 patrickdessalle saurindashadia napstar uhurun adalawson96 sadxwb jnkue amoscicki danielupedersen1 based-on-what sheaffy chenqu602 eliasmagn samuelvlopes ginkosen killix airbid inkilus rhcompbuilds macleodwalker ck20server 5exyguy mixno373 bagginz goldwaterdube pariwat-a kay2dan lucasvmds bramleisink gelo-v xcenai winetgh cwperry michelbieleveld nicholas-toh modernlogic haftcl saidharanidhar

calendar's Issues

Select

Hey, your tool is great but I miss some nice feature of fullcalendar.

Are you planning to propose the select method of fullcalendar ?
This method allows you to create an event when the user select a time slot in a calendar.

GetEvents changes start and end values

Every time I call the getEvents function it changes the start and end hours. Also is it possible to save dates as strings since it always converts it into a date value. Right now to solve this problem I have to run a function after calling the getEvents so I can reformat the dates into "aaaa/mm/ddT17:30" saving it like this works and displays everything correctly.

A solution I can give is that the addEvent, editEvent also adds/updates the ec.event array and that the getEvents function just looks for ec.event array

Resource view - horizontal

Hello, it looks good. Nice work 👍

I have question, its posible to configure resource view to look something like this:
getIS

If its possible, how can achive that look ?

Is it possible to implement all day on an event

Hey thanks for the great library.

Im wondering is there anyway to a full day event.
With the all day bar up the top.
Something like this
image

If it's not possible
Let me know what it would take to have this feature and I can take a look

Thanks

Specific class for resource header

Would it be possible to add a specific class for resource title
Currently, resource title have a fc-day class which does not seems right and make it very hard to style the resource header title

Possiblity to have grey out period where no events can be created (past and into future period)

Hi,

FYI: I am using your calander for a simple planning of appointments.

Is there a simple solution for you to disable the possiblity to add events in the past?

At the moment i am doing it myselve in the dateClick checking the date and ignoring the event when the incoming date is in the past.
But the draw back is that there are no visual hints that you cannot plan an appointment. (time is shown, dates are of normal color instead of greyed out)

It would be nice if there would be some gray period where you cannot add new events.

  1. In the past (make all previous days AND previous hours in current day : Grey and not clickable and not showing time on hover
  2. Extra: Add a future period to now allow entry of new events; Essentialy point 1, but then the start is not 'now' but a future point in time, possibly given by numbers for days:hours:minutes

Point 2 is required since there is always some kind of lead time for reacting on the actual event.

Cant reduce Event duration

After expanding the event its not possible to reduce it to one day, you can still expand it and short it but only into minimum 2 days

Event Slot Date

I am facing issue in even slots, i.e. I have created the event between 13:00 to 14:00 but after saving the event, in calendar slots it get displayed between wrong time slots i.e. 01:00 to 02:00 which is wrong it should be displayed on the slots I have created while creating the event i.e. 13:00 to 14:00,
I have checked I have passed the correct value in start and end parameter.

Below is the code:
2022-08-03 13:00:00 to 2022-08-03 14:00:00

this.Events.forEach(event=> {
let Event = {
id: event.itemId,
start: (event.FromTime),
end: event.ToTime ? (event.ToTime) : '',
resourceId: event.rId,
title: event.title,
color: event.color,
extendedProps: event,
}
EventsPost.push(Event);
});

How can i get data from events: function

I want to get events from this style:
events: {
url: '', type: 'POST', cache: false,
success: function(data) {
var events = [];
$(data).each(function(e, l) {
$(l.events).each(function(c, d) {
events.push({
id: d.id, start: d.start, end: d.end, title: d.title, className: l.className, textColor: l.textColor
});
});
});
return events;
}
}

But i can't do this
I can get eventSources function but i want to get this style from events
How can i do this.
My error log: Uncaught TypeError: Cannot read property 'call' of undefined

Width for popup with a list of events

With narrow days in the month view, the popup with the list of events will also be narrow. It's possible to add a minimum width for it or the ability to manage it.

Editable does not work

Is it just me or these editable switches don't do anything? I am still able to resize/drag events. Modifies your official demo to test it.. thanks for reply. Same thing for event-relative editable booleans.

    let ec = new EventCalendar(document.getElementById('ec'), {
        view: 'timeGridWeek',
        height: '800px',
        headerToolbar: {
            start: 'prev,next today',
            center: 'title',
            end: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek resourceTimeGridWeek'
        },
        buttonText: function (texts) {
            texts.resourceTimeGridWeek = 'resources';
            return texts;
        },
        resources: [
            {id: 1, title: 'Resource A'},
            {id: 2, title: 'Resource B'}
        ],
        scrollTime: '09:00:00',
        events: createEvents(),
        views: {
            timeGridWeek: {pointer: true},
            resourceTimeGridWeek: {pointer: true}
        },
        dayMaxEvents: true,
        nowIndicator: true,
        editable: false,
    });

Angular 13 support??

Does this support angular 13? If someone can share some demo links it would be very helpful.

Thanks in advance :)

Inside of a kit app

Have you used this library inside of a svelte kit based application? I’m trying it out and not able to render it because of an error stating that Calendar is not SSR compatible.

neither eventClick or dateClick callback triggered ？

It's weired that neither eventClick or dateClick callback triggered.

anything wrong?
browser : Chrome
resources:


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

      new window.EventCalendar(this.$refs.calendar, {
        view: 'timeGridWeek',
        events: this.createEvents(),
        allDayContent: 'all day.',
        pointer: true,

        dayMaxEvents: true,
        eventClick: function(e) {
          console.log('eventClick', e)
        },
        dateClick(e) {
          console.log('dateClick', e)
        }
      });

Slot height

Hello is it possible to change slot height from default 24px to 12px or something?

Alignment issue

Sometimes, I get some alignment issue in the calendar. You can see in the screen shot that the time slot cell and the header cell are not properly aligned.

image

Drag & Drop disable

How do I disable passive drag and drop?
And how can I select the time interval I want and run a function?

headerToolbar content

Hello,
First of all, I have to say that you wrote a great script.
i have a little problem ;
Is there a method where I can edit the headerToolbar design? like a eventContent method.

Internationalization problem

When trying this great lib, I encounter trouble with locale/internationalization
Some labels does not seems to be translated properly. Is it possible to pass an object containing key and associated translations in order to overwrite the incorrect translations ?

Change dayGrid

can i replace dayGrid (days on the top of calendar) with users name ?

filterResourcesWithEvents false set problem.

Hello

When I send the following command, the events are filtered, but when I send false, the events do not come back.
ec.setOption('filterResourcesWithEvents', 'true');
ec.setOption('filterResourcesWithEvents', 'false'); --- not working

Delete/Edit Icon on Event in React

Is it possible to add a Delete/Edit event icon, while using below code:-

props: {
        plugins: [TimeGrid],
        options: {
          view: "timeGridWeek",
          height: "700px",
          events: events,
          dateClick: (dateClickInfo) => {},
          eventClick: (eventClickInfo) => {}
        }
     }

eventsources method get event list

Hello,

i am using eventsources method,
i cant get loaded event list

ec.getOption('events');

this function not wotking when i use eventsources method also there is no alternative

Ability to disable editable on a per event basis

Hey awesome library.
We are currently using your library for our application works great.
One option that would be really helpful is to be able to disable or enable editing an event on a per event basis.

  • Our use case is that we want to be able to only enable drag on one particular event.
    Capture

Is it possible to add an extra property to the event object that we can override editable on a per event basis

Something like this spotted on the fullcalendar docs

image

Thanks

Change date event / View change event

I cannot find the event triggered when the date change (in order to make an api call without using the eventSources option.
The problem I encounter with eventSource is that I dont want my api to send events directly

Any plans to support reccuring events with rrule?

First off, great job putting this together! I've been looking for a viable alternative to fullcalendar and this is it.

Can you please advise or point to how to handle recurring events? Fullcalendar has rrule-plugin. Do you offer anything similar? I couldn't find it in the docs.

Cheers!

Minimum width and scrollable view for resources in the daily view

Hi @vkurko

First of all, thank you for the nice work you have done.

I want to have a minimum width for each resource and make them scrollable in the daily resource view.
In my project, I have more than 10 resources in the daily view and they may increase than that as well

image

Is there any way to achieve this in the current configuration set or do I need to do that via custom CSS?

Thank you,

Bug with views

In 0.10v there is a bug if you using a different view than the 'timeGridWeek' calendar messes up:

'resourceTimeGridDay':

image

In timeGridWeek view:
image

If you press on Week button and go back to the other view everything works again as it should

Sunday events are not rendering

Hello, on my calendar, Sunday events are not rendering and I am not sure why or if there is an option that I missed. I know the events exist inside the events property when printing to the console. There are about 2000 events to display in a month, but I reduced the number but it still does not show anything on Sunday. My events are all day events so I set the start/end to be the same date.

Inspecting the source code on a Sunday, there is nothing rendered to events. The other days all have content rendered. Below are my code to render the calendar, and code snippet to generate the array for events data. Thank you.

EDIT: I discovered if I do not put a time for start/end on an event that falls on Sunday, it does not show. But the other days, it does show. (https://jsfiddle.net/b2mj3kxg/2/)

image

async function renderCalendar() {
	let ec = new EventCalendar(document.getElementById('ec'), {
		view: 'dayGridMonth',
		// allDaySlot: true,
		eventStartEditable: false, // disables dragging
		eventContent: eventInfo => {
			// console.log(eventInfo)
			return `<span style='color: ${eventInfo.event.extendedProps.dataColor}'>${eventInfo.event.extendedProps.dataTask} | ${eventInfo.event.extendedProps.dataName}</span>`
		},
		events: renderEvents()
	})
}

function renderEvents() {
	let events = []
	for (const property in db_main) {
		let d = db_main[property]['date']
		let assignments = db_main[property]['data']
		assignments.forEach(item => {
			events.push({
				start: db_main[property]['date'],
				end: db_main[property]['date'],
				title: 'test',
				allDay: true,
				backgroundColor: item['color'],
				editable: false,
				extendedProps: {
					"dataTask": item['name'],
					"dataName": db_people[item['person']],
					"dataTextColor": item['textColor']
				}
			})
		})
	}
	console.log(events)
	return events
}

Cant disable tooltip or popover on drag

It's not a bug but it will be nice feature that in eventDragStart that will be "el" selector since popover or tooltip can not be disable while dragging event. So after dropping event in new place tooltip/popover element loses parent element and stays open

AddEvent About

Hi Vladimir,
I have a new question.
I'm adding new event calendar but im refreshing after adding event.
I wont reload the page.

My question: How can i add event on calendar ?
I want it to add a new event (or delete event) when I press the button than i will import my project :)
How can i do this?
I'm looking "addEvent( event )" but i didn't it.

Dragabble dont work

I'm using the ResourceTimeGridWeek view. In that view, the dragging of event does not seems to work properly, even with the editable option and eventStartEditable option set to true

Now indicator

Do you have plan to add now indicator like in fullcalendar?

popover about.

Hi Vladimir,
I have a new problem :)
I'm using bootstrap v4.5.* popover with calendar eventMouseEnter function

My problem this:
When I hover, the popover works, but when I move to the next day, it shows the previous day's data. (same hours)

eventMouseEnter: function(eventInfo){ /* alert(eventInfo.event.extendedProps.nameSurname); */ $(eventInfo.el).popover({ title: eventInfo.event.extendedProps.nameSurname, toggle: 'popover', content: eventInfo.event.extendedProps.categoryName + "<br>" + eventInfo.event.extendedProps.comment, trigger: 'hover', html: true }); },

And edit: My 2. problem;
When i first hover events popover not working but i tried 2. hover popover working
What's the problem ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.