v7.3.0

SchedulerBase
Widget

A thin base class for Scheduler. Does not include any features by default, allowing smaller custom-built bundles if used in place of Scheduler.

NOTE: In most scenarios you do probably want to use Scheduler instead of SchedulerBase.

const scheduler = new SchedulerBase({
    appendTo  : 'container',
    startDate : new Date(2024, 0, 1),
    endDate   : new Date(2024, 0, 8),
    columns   : [
        { text : 'Name', field : 'name', width : 130 }
    ]
});

Useful configs and functions

Member Description
mode Display mode: horizontal or vertical
readOnly Set to true to prevent editing
eventStore Store holding event records
resourceStore Store holding resource records
responsiveLevels Responsive breakpoint configurations
editEvent Programmatically open the event editor
beforeEventAdd Fires before an event is added
eventAutoCreated Fires after an auto-created event

See also

  • Scheduler - full-featured scheduler with all default features
  • TimelineBase - abstract timeline base class
No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class
  • See Keyboard shortcuts for details

  • mode : 'horizontal'/'vertical'
    NON-LAZY-LOAD

    Scheduler mode. Supported values: horizontal, vertical

    Has a corresponding runtime mode property.

  • The height in pixels of Scheduler rows.

  • Set to true for child nodes in a tree store to inherit their parent´s eventColor

    Has a corresponding runtime inheritEventColor property.

  • Configure UI transitions for various actions in the grid.

    • insertRecord : Boolean

      Transition record insertions

    • removeRecord : Boolean

      Transition record removals

    • toggleColumn : Boolean

      Transition column visibility changes

    • expandCollapseColumn : Boolean

      Transition parent/group column expand/collapse

    • toggleRegion : Boolean

      Transition region expand/collapse

    • toggleTreeNode : Boolean

      Transition tree node expand/collapse

    • toggleGroup : Boolean

      Transition group expand/collapse

    • filterRemoval : Boolean

      Transition row removals caused by filtering (under specific conditions)

    • removeEvent : Boolean

      Transition event removals

    • changeEvent : Boolean

      Transition event changes

    Has a corresponding runtime transition property.

  • eventCls : Stringb-sch-event
    private

    CSS class to add to rendered events

  • A CSS class to apply to each event in the view on mouseover (defaults to 'b-hover').

  • timeCellCls : Stringb-sch-time-axis-cell
    private

    CSS class to add to cells in the timeaxis column

  • The optional AssignmentStore, holding assignments between resources and events. Required for multi assignments.

    Has a corresponding runtime assignmentStore property.

  • Inline assignments, will be loaded into an internally created AssignmentStore.

    Has a corresponding runtime assignments property.

  • Inline dependencies, will be loaded into an internally created DependencyStore.

    Has a corresponding runtime dependencies property.

  • The optional DependencyStore.

    Has a corresponding runtime dependencyStore property.

  • The EventStore holding the events to be rendered into the scheduler (required).

    Has a corresponding runtime eventStore property.

  • Inline events, will be loaded into an internally created EventStore.

    Has a corresponding runtime events property.

  • The ResourceStore holding the resources to be rendered into the scheduler (required).

    Has a corresponding runtime resourceStore property.

  • Inline resources, will be loaded into an internally created ResourceStore.

    Has a corresponding runtime resources property.

  • By default, when the EventStore (and similar stores) is lazy loading, a loading indicator will be displayed just below the timeline headers. Set this to false to prevent this indicator being shown.

    Has a corresponding runtime lazyLoadingIndicator property.

  • If set to true this will show a color field in the EventEdit editor and also a picker in the EventMenu. Both enables the user to choose a color which will be applied to the event bar's background. See EventModel's eventColor config. config.

  • By default, scrolling the schedule will update the timelineContext to reflect the new currently hovered context. When displaying a large number of events on screen at the same time, this will have a slight impact on scrolling performance. In such scenarios, opt out of this behavior by setting this config to false.

    Has a corresponding runtime updateTimelineContextOnScroll property.

  • Set to false if you don't want to allow events overlapping times for any one resource (defaults to true).

    Note that toggling this at runtime won't affect already overlapping events.

    Has a corresponding runtime allowOverlap property.

Properties

Properties are getters/setters or publicly accessible variables on this class
  • isHorizontal : Boolean
    private
    READONLY

    Checks if scheduler is in horizontal mode

  • isVertical : Boolean
    private
    READONLY

    Checks if scheduler is in vertical mode

  • mode : 'horizontal'/'vertical'
    READONLY

    Get mode (horizontal/vertical)

    Has a corresponding mode config.

  • dateBounds : Date[]
    internal

    Returns the date or ranges of included dates as an array. If only the startDate is significant, the array will have that date as its only element. Otherwise, a range of dates is returned as a two-element array with [0] is the startDate and [1] is the lastDate.

  • eventCount : Number
    READONLY

    Gets the count of events within a date range between current startDate and endDate.

  • Set to true for child nodes in a tree store to inherit their parent´s eventColor

    Has a corresponding inheritEventColor config.

  • lastDate : Date
    internal

    The last day that is included in the date range. This is different than endDate since that date is not inclusive. For example, an endDate of 2022-07-21 00:00:00 indicates that the time range ends at that time, and so 2022-07-21 is not in the range. In this example, lastDate would be 2022-07-20 since that is the last day included in the range.

  • isSchedulerBase : Booleantrue
    READONLY
    ADVANCED
    Identifies an object as an instance of SchedulerBase class, or subclass thereof.
  • Get/set the event store instance of the backing project.

    Has a corresponding assignmentStore config.

  • Get/set assignments, applies to the backing project's AssignmentStore.

    Has a corresponding assignments config.

  • Get/set dependencies, applies to the backing projects DependencyStore.

    Has a corresponding dependencies config.

  • Get/set the dependencies store instance of the backing project.

    Has a corresponding dependencyStore config.

  • Get/set the event store instance of the backing project.

    Has a corresponding eventStore config.

  • Get/set events, applies to the backing project's EventStore.

    Has a corresponding events config.

  • Get/set the resource store instance of the backing project

    Has a corresponding resourceStore config.

  • Get/set resources, applies to the backing project's ResourceStore.

    Has a corresponding resources config.

  • By default, when the EventStore (and similar stores) is lazy loading, a loading indicator will be displayed just below the timeline headers. Set this to false to prevent this indicator being shown.

    Has a corresponding lazyLoadingIndicator config.

  • Get/set the scheduler's read-only state. When set to true, any UIs for modifying data are disabled.

    Has a corresponding readOnly config.

  • By default, scrolling the schedule will update the timelineContext to reflect the new currently hovered context. When displaying a large number of events on screen at the same time, this will have a slight impact on scrolling performance. In such scenarios, opt out of this behavior by setting this config to false.

    Has a corresponding updateTimelineContextOnScroll config.

  • Set to false if you don't want to allow events overlapping times for any one resource (defaults to true).

    Note that toggling this at runtime won't affect already overlapping events.

    Has a corresponding allowOverlap config.

Functions

Functions are methods available for calling on the class
    • Internal function to get an array of assignment instances from:

      • Single event or assignment instance
      • Array of event or assignment instances
      • Single event or assignment id (depending on usesSingleAssignment)
      • Array of event or assignment ids (depending on usesSingleAssignment)
    • next( )

      Interface method used by an encapsulating Calendar view to implement the "next" button.

    • Interface method used by an encapsulating Calendar view to implement the "prev" button.

    • Starts navigating the TimeAxis column cells (if the timeaxis column is focused)

      Added by the ScheduleContext feature, only available when that feature is enabled.

    • Stops navigating the TimeAxis column cells

      Added by the ScheduleContext feature, only available when that feature is enabled.

    Events

    Events are triggered for certain actions in this class and can be listened for to react to those actions in your code
    • dependenciesDrawn
      FROM-FEATURE

      Fired when dependencies are rendered

      Added by the Dependencies feature, only available when that feature is enabled.

    • unsplit
      FROM-FEATURE

      Fires when un-splitting the Grid.

      Added by the Split feature, only available when that feature is enabled.

    Event handlers

    Event handlers are callbacks called as a result of certain actions in this class
    • onDependenciesDrawn
      FROM-FEATURE

      Called when dependencies are rendered

      Added by the Dependencies feature, only available when that feature is enabled.

    • onUnsplit
      FROM-FEATURE

      Called when un-splitting the Grid.

      Added by the Split feature, only available when that feature is enabled.

    Type definitions