DependencyCreation

Configs

Dependency creation

allowCreate: Boolean= true

Set to false to not allow creating dependencies

allowCreateOnlyParent: Boolean= false

Set it to true to allow dependency creation only for parent events (only applies to Scheduler Pro using the NestedEvents feature). Normally the nested event container inside parent events cannot be scrolled when using dependencies, but by enabling this setting and limiting to where dependencies can be drawn scrolling will be enabled.

allowDropOnEventBar: Boolean= trueAlso a property

false to require a drop on a target event bar side circle to define the dependency type. If dropped on the event bar, the defaultValue of the DependencyModel type field will be used to determine the target task side.

creationTooltip: TooltipConfig

A tooltip config object that will be applied to the dependency creation Tooltip

creationTooltipTemplate: functionAlso a property

A template function that will be called to generate the HTML contents of the dependency creation tooltip. You can return either an HTML string or a DomConfig object.

Parameter	Type	Description
`data`	Object	Data about the dependency being created
`data.source`	TimeSpan	The from event
`data.target`	TimeSpan	The target event
`data.fromSide`	String	The from side (start, end, top, bottom)
`data.toSide`	String	The target side (start, end, top, bottom)
`data.valid`	Boolean	The validity of the dependency

Returns: String | DomConfig

showCreationTooltip: Boolean= true

false to not show a tooltip while creating a dependency

Dependency terminals

terminalCls: String= b-sch-terminal

CSS class used for terminals

terminalHideDelay: Number= 0Also a property

Delay in ms before hiding the terminals when the mouse leaves an event bar or terminal.

Can be used to make the UI more forgiving, accidentally leaving the event bar or terminal will not immediately hide the terminals.

Can also be used to play a hide animation, set a terminalHideDelay that is longer than your animation's duration. The b-hiding-terminals CSS class is added to the event wrapper while the terminals are being hidden.

terminalOffset: NumberAlso a property

Terminal offset from their initial position, in px. Positive values move terminals further away from the event bar, negative values inside the event bar.

When unset, the value specified in the --b-dependency-terminal-offset CSS variable is used.

terminalShowDelay: Number= 0Also a property

Delay in ms before showing the terminals when hovering over an event bar.

Can be used for a more "stable" UI, where the terminals are not shown immediately when hovering over an event bar and thus have fewer things moving when mouse is moved quickly over multiple event bars.

terminalSides: String[]

Where (on event bar edges) to display terminals. The sides are 'start', 'top', 'end' and 'bottom'

terminalSize: Number | StringAlso a property

Terminal diameter in px, overrides the default CSS value for it (which might depend on theme).

Use an even number to avoid cropped terminals.

Also accepts a string value representing a CSS size, e.g. '1.5em'.

When unset, the value specified in the --b-dependency-terminal-size CSS variable is used.

Properties

Class hierarchy

isDependencyCreation: Boolean= truereadonly

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

isDependencyCreation: Boolean= truereadonlystatic

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

Dependency creation

allowDropOnEventBar: Boolean= trueAlso a config

creationTooltipTemplate: functionAlso a config

A template function that will be called to generate the HTML contents of the dependency creation tooltip. You can return either an HTML string or a DomConfig object.

Parameter	Type	Description
`data`	Object	Data about the dependency being created
`data.source`	TimeSpan	The from event
`data.target`	TimeSpan	The target event
`data.fromSide`	String	The from side (start, end, top, bottom)
`data.toSide`	String	The target side (start, end, top, bottom)
`data.valid`	Boolean	The validity of the dependency

Returns: String | DomConfig

Dependency terminals

terminalHideDelay: Number= 0Also a config

Delay in ms before hiding the terminals when the mouse leaves an event bar or terminal.

Can be used to make the UI more forgiving, accidentally leaving the event bar or terminal will not immediately hide the terminals.

terminalOffset: NumberAlso a config

Terminal offset from their initial position, in px. Positive values move terminals further away from the event bar, negative values inside the event bar.

When unset, the value specified in the --b-dependency-terminal-offset CSS variable is used.

terminalShowDelay: Number= 0Also a config

Delay in ms before showing the terminals when hovering over an event bar.

terminalSize: Number | StringAlso a config

Terminal diameter in px, overrides the default CSS value for it (which might depend on theme).

Use an even number to avoid cropped terminals.

Also accepts a string value representing a CSS size, e.g. '1.5em'.

When unset, the value specified in the --b-dependency-terminal-size CSS variable is used.

Functions

abort

Aborts dependency creation, removes proxy and cleans up listeners

hideTerminals

Hide terminals for specified event

Parameter	Type	Description
`eventElement`	HTMLElement	Event element

showTerminals

Show terminals for specified event at sides defined in #terminalSides.

Parameter	Type	Description
`timeSpanRecord`	TimeSpan	Event/task to show terminals for
`element`	HTMLElement	Event/task element, defaults to using the first element found for the task

Events

afterDependencyCreateDrop

Fired on the owning Scheduler/Gantt after a dependency drag creation operation finished, no matter to outcome

// Adding a listener using the "on" method
dependencyCreation.on('afterDependencyCreateDrop', ({ source, target, dependency }) => {

});

Parameter	Type	Description
`source`	TimeSpan	The source task
`target`	TimeSpan	The target task
`dependency`	DependencyBaseModel	The created dependency

beforeDependencyCreateDrag

Fired on the owning Scheduler/Gantt before a dependency creation drag operation starts. Return false to prevent it

// Adding a listener using the "on" method
dependencyCreation.on('beforeDependencyCreateDrag', ({ source }) => {

});

Parameter	Type	Description
`source`	TimeSpan	The source task

beforeDependencyCreateFinalize

Fired on the owning Scheduler/Gantt when a dependency drag creation operation is about to finalize

// Adding a listener using the "on" method
dependencyCreation.on('beforeDependencyCreateFinalize', ({ source, target, fromSide, toSide }) => {

});

Parameter	Type	Description
`source`	TimeSpan	The source task
`target`	TimeSpan	The target task
`fromSide`	start \| end \| top \| bottom	The from side (start / end / top / bottom)
`toSide`	start \| end \| top \| bottom	The to side (start / end / top / bottom)

beforeShowTerminals

Fired on the owning Scheduler/Gantt before showing dependency terminals on a task or event. Return false to prevent it

// Adding a listener using the "on" method
dependencyCreation.on('beforeShowTerminals', ({ source }) => {

});

Parameter	Type	Description
`source`	TimeSpan	The hovered task

dependencyCreateDragStart

Fired on the owning Scheduler/Gantt when a dependency creation drag operation starts

// Adding a listener using the "on" method
dependencyCreation.on('dependencyCreateDragStart', ({ source }) => {

});

Parameter	Type	Description
`source`	TimeSpan	The source task

dependencyCreateDrop

Fired on the owning Scheduler/Gantt when a dependency drag creation operation succeeds

// Adding a listener using the "on" method
dependencyCreation.on('dependencyCreateDrop', ({ source, target, dependency }) => {

});

Parameter	Type	Description
`source`	TimeSpan	The source task
`target`	TimeSpan	The target task
`dependency`	DependencyBaseModel	The created dependency

dependencyValidationComplete

Fired on the owning Scheduler/Gantt when asynchronous dependency validation completes

// Adding a listener using the "on" method
dependencyCreation.on('dependencyValidationComplete', ({ source, target, dependencyType, fromSide, toSide }) => {

});

Parameter	Type	Description
`source`	TimeSpan	The source task
`target`	TimeSpan	The target task
`dependencyType`	Number	The dependency type, see Type
`fromSide`	start \| end \| top \| bottom	The side of the source task where the dependency starts
`toSide`	start \| end \| top \| bottom	The side of the target task where the dependency ends

dependencyValidationStart

Fired on the owning Scheduler/Gantt when asynchronous dependency validation starts

// Adding a listener using the "on" method
dependencyCreation.on('dependencyValidationStart', ({ source, target, dependencyType, fromSide, toSide }) => {

});

Parameter	Type	Description
`source`	TimeSpan	The source task
`target`	TimeSpan	The target task
`dependencyType`	Number	The dependency type, see Type
`fromSide`	start \| end \| top \| bottom	The side of the source task where the dependency starts
`toSide`	start \| end \| top \| bottom	The side of the target task where the dependency ends

Event handlers

onAfterDependencyCreateDrop

Called on the owning Scheduler/Gantt after a dependency drag creation operation finished, no matter to outcome

new DependencyCreation({
    onAfterDependencyCreateDrop({ source, target, dependency }) {

    }
});

Parameter	Type	Description
`source`	TimeSpan	The source task
`target`	TimeSpan	The target task
`dependency`	DependencyBaseModel	The created dependency

onBeforeDependencyCreateDrag

Called on the owning Scheduler/Gantt before a dependency creation drag operation starts. Return false to prevent it

new DependencyCreation({
    onBeforeDependencyCreateDrag({ source }) {

    }
});

Parameter	Type	Description
`source`	TimeSpan	The source task

onBeforeDependencyCreateFinalize

Called on the owning Scheduler/Gantt when a dependency drag creation operation is about to finalize

new DependencyCreation({
    onBeforeDependencyCreateFinalize({ source, target, fromSide, toSide }) {

    }
});

Parameter	Type	Description
`source`	TimeSpan	The source task
`target`	TimeSpan	The target task
`fromSide`	start \| end \| top \| bottom	The from side (start / end / top / bottom)
`toSide`	start \| end \| top \| bottom	The to side (start / end / top / bottom)

onBeforeShowTerminals

Called on the owning Scheduler/Gantt before showing dependency terminals on a task or event. Return false to prevent it

new DependencyCreation({
    onBeforeShowTerminals({ source }) {

    }
});

Parameter	Type	Description
`source`	TimeSpan	The hovered task

onDependencyCreateDragStart

Called on the owning Scheduler/Gantt when a dependency creation drag operation starts

new DependencyCreation({
    onDependencyCreateDragStart({ source }) {

    }
});

Parameter	Type	Description
`source`	TimeSpan	The source task

onDependencyCreateDrop

Called on the owning Scheduler/Gantt when a dependency drag creation operation succeeds

new DependencyCreation({
    onDependencyCreateDrop({ source, target, dependency }) {

    }
});

Parameter	Type	Description
`source`	TimeSpan	The source task
`target`	TimeSpan	The target task
`dependency`	DependencyBaseModel	The created dependency

onDependencyValidationComplete

Called on the owning Scheduler/Gantt when asynchronous dependency validation completes

new DependencyCreation({
    onDependencyValidationComplete({ source, target, dependencyType, fromSide, toSide }) {

    }
});

Parameter	Type	Description
`source`	TimeSpan	The source task
`target`	TimeSpan	The target task
`dependencyType`	Number	The dependency type, see Type
`fromSide`	start \| end \| top \| bottom	The side of the source task where the dependency starts
`toSide`	start \| end \| top \| bottom	The side of the target task where the dependency ends

onDependencyValidationStart

Called on the owning Scheduler/Gantt when asynchronous dependency validation starts

new DependencyCreation({
    onDependencyValidationStart({ source, target, dependencyType, fromSide, toSide }) {

    }
});

Parameter	Type	Description
`source`	TimeSpan	The source task
`target`	TimeSpan	The target task
`dependencyType`	Number	The dependency type, see Type
`fromSide`	start \| end \| top \| bottom	The side of the source task where the dependency starts
`toSide`	start \| end \| top \| bottom	The side of the target task where the dependency ends

CSS variables

Name	Description
`--b-dependency-terminal-size`	Dependency terminal size
`--b-dependency-terminal-offset`	Dependency terminal offset from the event edge, negative values move away from the event
`--b-dependency-terminal-z-index`	Dependency terminal z-index
`--b-dependency-terminal-border-width`	Dependency terminal border width
`--b-dependency-terminal-border-style`	Dependency terminal border style
`--b-dependency-terminal-border-color`	Dependency terminal border color. By default it matches event border color to match its look
`--b-dependency-valid-color`	Color for a valid dependency line during creation
`--b-dependency-invalid-color`	Color for an invalid dependency line during creation
`--b-dependency-tooltip-valid-header-color`	Color used in the header of the dependency creation tooltip when the dependency is valid
`--b-dependency-tooltip-valid-header-background`	Background used in the header of the dependency creation tooltip when the dependency is valid
`--b-dependency-tooltip-invalid-header-color`	Color used in the header of the dependency creation tooltip when the dependency is invalid
`--b-dependency-tooltip-invalid-header-background`	Background used in the header of the dependency creation tooltip when the dependency is invalid
`--b-dependency-terminal-color`	Dependency terminal fill color
`--b-dependency-terminal-valid-color`	Color for a valid dependency terminal during creation
`--b-dependency-terminal-invalid-color`	Color for an invalid dependency terminal during creation
Hovered
`--b-dependency-terminal-hover-color`	Dependency terminal hover fill color