v7.3.0
SupportExamplesFree Trial

EventSegmentDrag
Feature

Allows users to drag and drop individual event segments within the resource row to reschedule them. When a segment is dragged, its start date is updated and the scheduling engine recalculates the overall event accordingly. Segment dragging is constrained to the owning resource row and respects boundaries set by neighboring segments, preventing overlap between adjacent segments of the same event.

const schedulerPro = new SchedulerPro({ appendTo : targetElement, // makes scheduler as high as it needs to be to fit rows autoHeight : true, startDate : new Date(2022, 2, 20), endDate : new Date(2022, 2, 27), columns : [ { field : 'name', text : 'Name', width : 100 } ], project : { resources : [ { id : 1, name : 'Bruce' }, { id : 2, name : 'Diana' } ], events : [ { id : 1, name : 'Art project', startDate : '2022-03-21', segments : [ { startDate : '2022-03-21', duration : 1 }, { startDate : '2022-03-23', duration : 1 }, { startDate : '2022-03-25', duration : 1 } ] }, { id : 2, name : 'DIY project', startDate : '2022-03-21', segments : [ // segments can have their own names & colors { name : 'Plan', startDate : '2022-03-21', duration : 1, eventColor : 'indigo' }, { name : 'Get supplies', startDate : '2022-03-23', duration : 2 } ] } ], assignments : [ { id : 1, event : 1, resource : 1 }, { id : 7, event : 2, resource : 2 } ] }, features : { eventSegments : { // split at the exact date user clicks in UI roundedSplit : false } } });

This feature is enabled by default.

See also

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class
  • Set to false to allow dragging tasks outside the client Scheduler. Useful when you want to drag tasks between multiple Scheduler instances

  • An object used to configure the internal DragHelper class

  • When enabled, the event being dragged always "snaps" to the exact start date that it will have after drop.

  • Specifies whether to show tooltip while dragging event

    Has a corresponding runtime showTooltip property.

  • The eventDragand taskDrag events are normally only triggered when the drag operation will lead to a change in date or assignment. By setting this config to false, that logic is bypassed to trigger events for each native mouse move event.

    Has a corresponding runtime throttleDragEvent property.

  • A config object to allow customization of the Tooltip which tracks the event during a drag operation.

    Has a corresponding runtime tip property.

  • Set this to true to always copy the event on drag drop operation.

    Has a corresponding runtime alwaysCopy property.

  • Set to true to only allow dragging events within the same resource.

    Has a corresponding runtime constrainDragToResource property.

  • Set to true to only allow dragging events to different resources, and disallow rescheduling by dragging.

    Has a corresponding runtime constrainDragToTimeSlot property.

  • copyKey : 'CTRL'/'ALT'/'SHIFT'/'META'/''CTRL
    EventDrag

    A modifier key (CTRL, SHIFT, ALT, META) that when pressed will copy an event instead of moving it. Set to empty string to disable copying. Defaults to "CTRL" which is the Ctrl-key for Windows, and Meta-key for MacOS.

    Has a corresponding runtime copyKey property.

  • copyMode : 'auto'/'assignment'/'event'auto
    EventDrag

    Event can be copied two ways: either by adding new assignment to an existing event ('assignment'), or by copying the event itself ('event'). 'auto' mode will pick 'event' for a single-assignment mode (when event has resourceId field) and 'assignment' mode otherwise.

    Has a corresponding runtime copyMode property.

  • A CSS selector specifying elements outside the scheduler element which are valid drop targets.

  • Set to true to only allow dragging in one direction (based on initial movement)

    Has a corresponding runtime singleDirection property.

  • The this reference for the validatorFn

  • Internal listeners, that cannot be removed by the user.

  • The widget which this plugin is to attach to.

    Has a corresponding runtime client property.

  • Set to false to disable localization of this object.

Properties

Properties are getters/setters or publicly accessible variables on this class
  • isEventSegmentDrag : Booleantrue
    READONLY
    static
    ADVANCED
    Identifies an object as an instance of EventSegmentDrag class, or subclass thereof.
  • isEvents : Booleantrue
    READONLY
    static
    ADVANCED
    Events
    Identifies an object as an instance of Events class, or subclass thereof.
  • isLocalizable : Booleantrue
    READONLY
    static
    ADVANCED
    Localizable
    Identifies an object as an instance of Localizable class, or subclass thereof.
  • properties : Object
    internal
    static
    EventDrag

    A class property getter for the default values of internal properties for this class.

  • emptyArray : Array
    internal
    READONLY
    EventDrag

    An empty array that can be used as a default value.

  • emptyObject : Object
    internal
    READONLY
    EventDrag

    An empty object that can be used as a default value.

  • isDragBase : Booleantrue
    READONLY
    ADVANCED
    EventDrag
    Identifies an object as an instance of DragBase class, or subclass thereof.
  • isEventDrag : Booleantrue
    READONLY
    ADVANCED
    EventDrag
    Identifies an object as an instance of EventDrag class, or subclass thereof.
  • isEventSegmentDrag : Booleantrue
    READONLY
    ADVANCED
    Identifies an object as an instance of EventSegmentDrag class, or subclass thereof.
  • isInstancePlugin : Booleantrue
    READONLY
    ADVANCED
    EventDrag
    Identifies an object as an instance of InstancePlugin class, or subclass thereof.
  • Returns true if a drag operation is active

  • Specifies whether to show tooltip while dragging event

    Has a corresponding showTooltip config.

  • The eventDragand taskDrag events are normally only triggered when the drag operation will lead to a change in date or assignment. By setting this config to false, that logic is bypassed to trigger events for each native mouse move event.

    Has a corresponding throttleDragEvent config.

  • Yields the Tooltip which tracks the event during a drag operation.

    Has a corresponding tip config.

  • Set this to true to always copy the event on drag drop operation.

    Has a corresponding alwaysCopy config.

  • Set to true to only allow dragging events within the same resource.

    Has a corresponding constrainDragToResource config.

  • Set to true to only allow dragging events to different resources, and disallow rescheduling by dragging.

    Has a corresponding constrainDragToTimeSlot config.

  • copyKey : 'CTRL'/'ALT'/'SHIFT'/'META'/''CTRL
    EventDrag

    A modifier key (CTRL, SHIFT, ALT, META) that when pressed will copy an event instead of moving it. Set to empty string to disable copying. Defaults to "CTRL" which is the Ctrl-key for Windows, and Meta-key for MacOS.

    Has a corresponding copyKey config.

  • copyMode : 'auto'/'assignment'/'event'auto
    EventDrag

    Event can be copied two ways: either by adding new assignment to an existing event ('assignment'), or by copying the event itself ('event'). 'auto' mode will pick 'event' for a single-assignment mode (when event has resourceId field) and 'assignment' mode otherwise.

    Has a corresponding copyMode config.

  • mode : 'move'/'copy'
    READONLY
    EventDrag

    Mode of the current drag drop operation.

  • Set to true to only allow dragging in one direction (based on initial movement)

    Has a corresponding singleDirection config.

  • config : Object
    READONLY
    ADVANCED
    EventDrag

    Returns a copy of the full configuration which was used to configure this object.

  • isConstructing : Boolean
    READONLY
    ADVANCED
    EventDrag

    This property is set to true before the constructor returns.

  • isDestroying : Boolean
    READONLY
    ADVANCED
    EventDrag

    This property is set to true on entry to the destroy method. It remains on the objects after returning from destroy(). If isDestroyed is true, this property will also be true, so there is no need to test for both (for example, comp.isDestroying || comp.isDestroyed).

  • client : Widget
    READONLY
    ADVANCED
    EventDrag

    The Widget which was passed into the constructor, which is the Widget we are providing extra services for.

    Has a corresponding client config.

  • Get the global LocaleHelper

  • Get the global LocaleManager

Functions

Functions are methods available for calling on the class
  • onClassMixedIn( )
    internal
    static
    EventDrag

    This optional class method is called when a class is mixed in using the mixin() method.

  • initClass( )
    static
    ADVANCED
    EventDrag

    Registers this class type with its Factory

  • updateSegment( )
    private
    ASYNC

    Update assignments being dragged

  • Gets html to display in tooltip while dragging event. Uses clockTemplate to display start & end dates.

  • onDrag( )
    private
    EventDrag

    Triggered while dragging an event. Updates drag data, validation etc.

  • Triggered when dragging of an event starts. Initializes drag data associated with the event being dragged.

  • onDrop( )
    private
    EventDrag

    Triggered when dropping an event. Finalizes the operation.

  • Triggered internally on invalid drop.

  • Called when scheduler is rendered. Sets up drag and drop and hover tooltip.

  • Updates drag data's dates and validity (calls #validatorFn if specified)

  • Update assignments being dragged

  • Internal function used to hook destroy() calls when using thisObj

  • Internal function used restore hooked destroy() calls when using thisObj

  • doDestroy( )
    internal
    Events

    Auto detaches listeners registered from start, if set as detachable

  • once( )
    private
    Events

    Internal function used to run a callback function after an event is triggered

  • Removes all listeners registered to this object by the application.

  • This will merge a feature's (subclass of InstancePlugin) keyMap with it's client's keyMap.

Events

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

Event handlers

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

Source path

SchedulerPro/feature/EventSegmentDrag.js

Contents