ExternalEventSource
Feature

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.

Useful configs

Config	Description
grid	Grid instance (or id) to drag events from
dragRootElement	Root element for non-grid drag sources
dragItemSelector	Selector identifying draggable items
getRecordFromElement	Function to create an event record from a dragged element
droppable	Enable dropping events back from Calendar to source

Configs

Configs are options you supply in a configuration object when creating an instance of this class

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'
    }
}
```
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.
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);
        }
    }
}
```
Parameters
- 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 : Booleantrue

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

private

Used when droppable is used, and the external source is a Grid. This allows us to track the over row to highlight the insertion point.

Properties

Properties are getters/setters or publicly accessible variables on this class

isExternalEventSource : Booleantrue

READONLY

static

ADVANCED

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

isExternalEventSource : Booleantrue

READONLY

ADVANCED

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

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

beforeDropExternal

PREVENTABLE

ON-OWNER

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.

Note that this event is triggered on the owning widget:
dragMoveExternal

ON-OWNER

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.

Note that this event is triggered on the owning widget:
dropExternal

ON-OWNER

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.

Note that this event is triggered on the owning widget:

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onBeforeDropExternal

PREVENTABLE

ON-OWNER

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.

Note that this handler is called on the owning widget:
onDragMoveExternal

ON-OWNER

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.

Note that this handler is called on the owning widget:
onDropExternal

ON-OWNER

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.

Note that this handler is called on the owning widget:

id: externalEventSource

Source path

Calendar/feature/ExternalEventSource.js

Demo

examples/dragfromgrid

ExternalEventSource
Feature

Useful configs

See also

Configs

Parameters

Returns

Properties

Events

Event handlers

Source path

Demo

Inheritance tree4

Mixins2

Contents

ExternalEventSource Feature

Useful configs

See also

Configs

Parameters

Returns

Properties

Events

Event handlers

Source path

Demo

Inheritance tree4

Mixins2

Contents

ExternalEventSource
Feature