ExternalEventSource

A Calendar feature which allows new events to be dragged into the Calendar from an external source.

The default source type is a Bryntum grid which is loaded with event records.

Optionally, the source can be specified by configuring a dragRootElement and a dragItemSelector which together, identify elements which represent draggable events.

In this case, a getRecordFromElement may be specified to yield the details of the record to be dragged.

In the simplest case the textContent of the identified element is used as the event name and getRecordFromElement is not required. The event duration in this case will be that specified in the receiving Calendar's autoCreate setting.

When dropping an unscheduled event (An event that has no start and end date specified) into a day cell (For example a MonthView or YearView), the start time set within the day cell will default to the startHour property of the receiving Calendar's autoCreate setting.

This feature is disabled by default.

External event source

//<code-header>
fiddle.title = 'External event source';
//</code-header>
const dragSource = document.createElement('div');

dragSource.id = 'event-source';
dragSource.className = 'draggable-event-container';
dragSource.innerHTML = `
    <legend>Currently outstanding tasks</legend>
    <div class="draggable-event">Do This</div>
    <div class="draggable-event">Do That</div>
    <div class="draggable-event">Do The other</div>
`;

targetElement.appendChild(dragSource);

const calendar = new Calendar({
    insertBefore : dragSource,
    height       : 700,

    // We have a little less width in our context, so reduce the responsive breakpoints
    responsive : {
        small : {
            when : 480
        },
        medium : {
            when : 640
        }
    },

    // Start life looking at this date
    date : '2020-03-01',

    // Used to create view titles
    dateFormat : 'DD MMM YYYY',

    // CrudManager arranges loading and syncing of data in JSON form from/to a web service
    crudManager : {
        transport : {
            load : {
                url : 'data/Calendar/examples/feature/company-events.json'
            }
        },
        autoLoad : true
    },

    // Features named by the properties are included.
    // An object is used to configure the feature.
    features : {
        externalEventSource : {
            // The id of the element to drag from.
            dragRootElement : 'event-source',

            // Selector which identifies draggable events.
            // It will use the innerText as the event name if that's
            // all we care about. We can adjust the duration in the UI.
            dragItemSelector : '.draggable-event'
        }
    },

    // Modes are the views available in the Calendar.
    // An object is used to configure the view.
    modes : {
        agenda : null,
        year   : null
    }
});

Configs

Common

disabledInstancePlugin

listenersEvents

Other

draggable: Object

An object which overrides or augments the default configuration for the Draggable which handles picking up events.

This is only necessary if there is no grid specified.

dragItemSelector: String

If not dragging from a grid, which is the default mode, then a selector which identifies draggable elements within the dragRootElement.

In the simplest case, the identified element may contain simply a string which is used as the event name, for example:

features : {
    externalEventSource : {
        dragRootElement  : '#mySourceElementId',
        dragItemSelector : '.my-item-class'
    }
}

dragRootElement: HTMLElement | String

If not dragging from a grid, which is the default mode, then an element from which dragging can take place must be supplied in the dragRootElement config.

May also be specified as a selector which matches a unique element, or a simple element id.

In this case a dragItemSelector string, and getRecordFromElement function must be supplied to allow event records to be sourced from the element, for example:

features : {
    externalEventSource : {
        dragRootElement  : '#mySourceElementId',
        dragItemSelector : '.my-item-class'
    }
}

droppable: Object | Boolean

An object which, if present, causes creation of a Droppable which handles dropping events from the Calendar into the external location.

In the simplest configuration, configure this as true.

Important: when dropping on an external source, the record is not removed from the Calendar's eventStore. You will need to listen for the beforeDropExternal event.

getRecordFromElement: function | String

If not dragging from a grid, which is the default mode, then a function which returns an event record to drag from a passed element must be supplied.

In this case a dragRootElement and a dragItemSelector string may be supplied to allow event records to be sourced from the element.

If the element identified by the dragItemSelector just contains an event name to create, this configuration is optional. A new event will be created by that name, for example:

features : {
    externalEventSource : {
        dragRootElement  : '#mySourceElementId',
        dragItemSelector : '.my-item-class',
        getRecordFromElement(element) {
            // Return an object from which an EventModel can be created.
            // Same format as loading an EventStore. { name : 'name', startDate: ''} etc
            return myController.createRecordFromElement(element);
        }
    }
}

Parameter	Type	Description
`element`	HTMLElement	HTML element

Returns: EventModel | null

grid: Grid | String

The grid, or id of a grid from which events are to be dragged.

hideExternalProxy: Boolean= true

By default, the proxy shown when "picking up" the grid row is hidden when dragging over the calendar because the CalendarDrag feature automatically shows a drop position indicator which shows where the proposed new event will be.

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isExternalEventSource: Boolean= truereadonly

Identifies an object as an instance of ExternalEventSource class, or subclass thereof.

isExternalEventSource: Boolean= truereadonlystatic

Identifies an object as an instance of ExternalEventSource class, or subclass thereof.

isCalendarFeatureCalendarFeature

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents

Functions

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Other

addListenerEvents

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

Events

beforeDropExternal

This event is fired on the owning Calendar when dropping an event from the calendar on the external source if the droppable was configured. Returning false prevents the gesture from being completed.

If a grid was configured as the external source, the record will be removed from the Calendar's event store and inserted to the grid's store.

If the external source is simply a set of HTML elements, your application must process this gesture.

// Adding a listener using the "on" method
externalEventSource.on('beforeDropExternal', ({ eventRecord, dropOnCalendar, itemElement, targetElement, domEvent, overIndex, overRecord, isAbove, altKey, ctrlKey, metaKey, shiftKey }) => {

});

Parameter	Type	Description
`eventRecord`	EventModel	The event record being dragged.
`dropOnCalendar`	Boolean	`true` if the drop gesture is over the client Calendar. This feature also allows drag out of the Calendar and onto the external event source if the droppable config is set.
`itemElement`	HTMLElement	The element in which the drag gesture started.
`targetElement`	HTMLElement	The current over element.
`domEvent`	Event	The pointer event associated with the drag point.
`overIndex`	Number	If grid was specified, the index of the row being moved over;
`overRecord`	Model	If grid was specified, the record being moved over;
`isAbove`	Boolean	If grid was specified, `true` if the pointer position is above the halfway line of the over row.
`altKey`	Boolean	`true` if the Alt key was down when the last event was processed.
`ctrlKey`	Boolean	`true` if the Ctrl key was down when the last event was processed.
`metaKey`	Boolean	`true` if the Meta key was down when the last event was processed.
`shiftKey`	Boolean	`true` if the Shift key was down when the last event was processed.

dragMoveExternal

This event is fired on the owning Calendar when dragging an event from the calendar over the external source if the droppable was configured.

If a grid was configured as the external source, a dropping insertion point will be displayed in the grid.

If the external source is simply a set of HTML elements, your application must process this gesture.

// Adding a listener using the "on" method
externalEventSource.on('dragMoveExternal', ({ eventRecord, itemElement, targetElement, domEvent, overIndex, overRecord, isAbove, altKey, ctrlKey, metaKey, shiftKey }) => {

});

Parameter	Type	Description
`eventRecord`	EventModel	The event record being dragged.
`itemElement`	HTMLElement	The element in which the drag gesture started.
`targetElement`	HTMLElement	The current over element.
`domEvent`	Event	The pointer event associated with the drag point.
`overIndex`	Number	If grid was specified, the index of the row being moved over;
`overRecord`	Model	If grid was specified, the record being moved over;
`isAbove`	Boolean	If grid was specified, `true` if the pointer position is above the halfway line of the over row.
`altKey`	Boolean	`true` if the Alt key was down when the last event was processed.
`ctrlKey`	Boolean	`true` if the Ctrl key was down when the last event was processed.
`metaKey`	Boolean	`true` if the Meta key was down when the last event was processed.
`shiftKey`	Boolean	`true` if the Shift key was down when the last event was processed.

dropExternal

This event is fired on the owning Calendar after dropping an event from the calendar on the external source has been completed if the droppable was configured.

If a grid was configured as the external source, the record will have been removed from the Calendar's event store and inserted to the grid's store.

// Adding a listener using the "on" method
externalEventSource.on('dropExternal', ({ eventRecord, dropOnCalendar, itemElement, targetElement, domEvent, overIndex, overRecord, isAbove, altKey, ctrlKey, metaKey, shiftKey }) => {

});

Parameter	Type	Description
`eventRecord`	EventModel	The event record that was dropped.
`dropOnCalendar`	Boolean	`true` if the drop gesture is over the client Calendar. This feature also allows drag out of the Calendar and onto the external event source if the droppable config is set.
`itemElement`	HTMLElement	The element in which the drag gesture started.
`targetElement`	HTMLElement	The current over element.
`domEvent`	Event	The pointer event associated with the drag point.
`overIndex`	Number	If grid was specified, the index of the row being moved over;
`overRecord`	Model	If grid was specified, the record being moved over;
`isAbove`	Boolean	If grid was specified, `true` if the pointer position is above the halfway line of the over row.
`altKey`	Boolean	`true` if the Alt key was down when the last event was processed.
`ctrlKey`	Boolean	`true` if the Ctrl key was down when the last event was processed.
`metaKey`	Boolean	`true` if the Meta key was down when the last event was processed.
`shiftKey`	Boolean	`true` if the Shift key was down when the last event was processed.

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onBeforeDropExternal

This event is called on the owning Calendar when dropping an event from the calendar on the external source if the droppable was configured. Returning false prevents the gesture from being completed.

If a grid was configured as the external source, the record will be removed from the Calendar's event store and inserted to the grid's store.

If the external source is simply a set of HTML elements, your application must process this gesture.

new ExternalEventSource({
    onBeforeDropExternal({ eventRecord, dropOnCalendar, itemElement, targetElement, domEvent, overIndex, overRecord, isAbove, altKey, ctrlKey, metaKey, shiftKey }) {

    }
});

Parameter	Type	Description
`eventRecord`	EventModel	The event record being dragged.
`dropOnCalendar`	Boolean	`true` if the drop gesture is over the client Calendar. This feature also allows drag out of the Calendar and onto the external event source if the droppable config is set.
`itemElement`	HTMLElement	The element in which the drag gesture started.
`targetElement`	HTMLElement	The current over element.
`domEvent`	Event	The pointer event associated with the drag point.
`overIndex`	Number	If grid was specified, the index of the row being moved over;
`overRecord`	Model	If grid was specified, the record being moved over;
`isAbove`	Boolean	If grid was specified, `true` if the pointer position is above the halfway line of the over row.
`altKey`	Boolean	`true` if the Alt key was down when the last event was processed.
`ctrlKey`	Boolean	`true` if the Ctrl key was down when the last event was processed.
`metaKey`	Boolean	`true` if the Meta key was down when the last event was processed.
`shiftKey`	Boolean	`true` if the Shift key was down when the last event was processed.

onDragMoveExternal

This event is called on the owning Calendar when dragging an event from the calendar over the external source if the droppable was configured.

If a grid was configured as the external source, a dropping insertion point will be displayed in the grid.

If the external source is simply a set of HTML elements, your application must process this gesture.

new ExternalEventSource({
    onDragMoveExternal({ eventRecord, itemElement, targetElement, domEvent, overIndex, overRecord, isAbove, altKey, ctrlKey, metaKey, shiftKey }) {

    }
});

Parameter	Type	Description
`eventRecord`	EventModel	The event record being dragged.
`itemElement`	HTMLElement	The element in which the drag gesture started.
`targetElement`	HTMLElement	The current over element.
`domEvent`	Event	The pointer event associated with the drag point.
`overIndex`	Number	If grid was specified, the index of the row being moved over;
`overRecord`	Model	If grid was specified, the record being moved over;
`isAbove`	Boolean	If grid was specified, `true` if the pointer position is above the halfway line of the over row.
`altKey`	Boolean	`true` if the Alt key was down when the last event was processed.
`ctrlKey`	Boolean	`true` if the Ctrl key was down when the last event was processed.
`metaKey`	Boolean	`true` if the Meta key was down when the last event was processed.
`shiftKey`	Boolean	`true` if the Shift key was down when the last event was processed.

onDropExternal

This event is called on the owning Calendar after dropping an event from the calendar on the external source has been completed if the droppable was configured.

If a grid was configured as the external source, the record will have been removed from the Calendar's event store and inserted to the grid's store.

new ExternalEventSource({
    onDropExternal({ eventRecord, dropOnCalendar, itemElement, targetElement, domEvent, overIndex, overRecord, isAbove, altKey, ctrlKey, metaKey, shiftKey }) {

    }
});

Parameter	Type	Description
`eventRecord`	EventModel	The event record that was dropped.
`dropOnCalendar`	Boolean	`true` if the drop gesture is over the client Calendar. This feature also allows drag out of the Calendar and onto the external event source if the droppable config is set.
`itemElement`	HTMLElement	The element in which the drag gesture started.
`targetElement`	HTMLElement	The current over element.
`domEvent`	Event	The pointer event associated with the drag point.
`overIndex`	Number	If grid was specified, the index of the row being moved over;
`overRecord`	Model	If grid was specified, the record being moved over;
`isAbove`	Boolean	If grid was specified, `true` if the pointer position is above the halfway line of the over row.
`altKey`	Boolean	`true` if the Alt key was down when the last event was processed.
`ctrlKey`	Boolean	`true` if the Ctrl key was down when the last event was processed.
`metaKey`	Boolean	`true` if the Meta key was down when the last event was processed.
`shiftKey`	Boolean	`true` if the Shift key was down when the last event was processed.

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

BryntumListenerConfigEvents

ExternalEventSource

Configs

Common

Other

Misc

Properties

Common

Class hierarchy

Lifecycle

Misc

Other

Functions

Configuration

Events

Lifecycle

Misc

Other

Events

Event handlers

Typedefs