SchedulerEventRendering
Mixin

Functions to handle event rendering (EventModel -> dom elements). Manages event layout strategies, milestone rendering, event styling, and the generation of DOM content for each event bar.

const scheduler = new Scheduler({
    eventColor : 'blue',
    eventStyle : 'rounded',

    eventRenderer({ eventRecord, renderData }) {
        return eventRecord.name;
    }
});

Configs

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

eventReleaseThreshold : Number

An advanced setting that controls the maximum number of released event bars to keep in the DOM.

Schedulers virtualization releases event bars that go out of view, which means they are hidden but not removed from the DOM. When another event bar enters view, a released one is reused. This is faster than removing and re-adding the event bars from the DOM.

By default, all released event bars are kept around, and you should in general not need to adjust this setting. But if you have an app in which the scheduler sometimes displays a very large number of events on the screen at the same time, and sometimes only a few, you can experiment with tweaking this setting to free up some memory in the sparse case.

Has a corresponding runtime eventReleaseThreshold property.
minPackSize : Number
Experimental Minimum size that events should be allowed to shrink to when using pack layout. If packing leads to any event being smaller than this value, the row will grow in height instead to maintain this minimum size.

When combined with barMargin, events can still shrink below the limit. Adjust the value to suite your needs
```
new Scheduler({
  eventLayout : 'pack',
  minPackSize : 10
});
```
This setting is currently only used in horizontal mode.

Being experimental, this API might be removed or adjusted with short notice in the future.

Has a corresponding runtime minPackSize property.
milestoneAlign : 'start'/'center'/'end'center
How to align milestones in relation to their startDate. Only applies when using a milestoneLayoutMode other than default. Valid values are:
- start
- center (default)
- end
Has a corresponding runtime milestoneAlign property.
milestoneCharWidth : Number10

Factor representing the average char width in pixels used to determine milestone width when configured with milestoneLayoutMode: 'estimate'.

Has a corresponding runtime milestoneCharWidth property.
milestoneLayoutMode : 'default'/'estimate'/'data'/'measure'default
How to handle milestones during event layout. How the milestones are displayed when part of the layout are controlled using milestoneTextPosition.

Options are:
- default - Milestones do not affect event layout
- estimate - Milestone width is estimated by multiplying text length with Scheduler#milestoneCharWidth
- data - Milestone width is determined by checking EventModel#milestoneWidth
- measure - Milestone width is determined by measuring label width Please note that currently text width is always determined using EventModel#name. Also note that only 'default' is supported by eventStyles line, dashed and minimal.
Has a corresponding runtime milestoneLayoutMode property.
milestoneTextPosition : 'inside'/'outside'/'always-outside'outside
Position of the milestone text:
- 'inside' - for short 1-char text displayed inside the diamond, not applicable when using milestoneLayoutMode)
- 'outside' - for longer text displayed outside the diamond, but inside it when using milestoneLayoutMode
- 'always-outside' - outside even when combined with milestoneLayoutMode
Has a corresponding runtime milestoneTextPosition property.
horizontalLayoutPackClass : HorizontalLayout

private

The class responsible for the packing horizontal event layout process. Override this to take control over the layout process.
horizontalLayoutStackClass : HorizontalLayout

private

The class name responsible for the stacking horizontal event layout process. Override this to take control over the layout process.
initialAnimationDuration : Number2000

Maximum duration (in milliseconds) for the initial animation controlled by useInitialAnimation.

Has a corresponding runtime initialAnimationDuration property.
overlappingEventSorter : Function
Override this method to provide a custom sort function to sort any overlapping events. This only applies to the horizontal mode, where the order the events are sorted in determines their vertical placement within a resource.

By default, overlapping events are laid out based on the start date. If the start date is equal, events with earlier end date go first. And lastly the name of events is taken into account.

Here's a sample sort function, sorting on start- and end date. If this function returns -1, then event a is placed above event b:
```
overlappingEventSorter(a, b) {

  const startA = a.startDate, endA = a.endDate;
  const startB = b.startDate, endB = b.endDate;

  const sameStart = (startA - startB === 0);

  if (sameStart) {
    return endA > endB ? -1 : 1;
  } else {
    return (startA < startB) ? -1 : 1;
  }
}
```
NOTE: The algorithms (stack, pack) that lay the events out expects them to be served in chronological order, be sure to first sort by startDate to get predictable results.
Parameters
- a : EventModel
  
  First event
- b : EventModel
  
  Second event
Returns

Number
:

Return -1 to display a above b, 1 for b above a
Has a corresponding runtime overlappingEventSorter property.
useInitialAnimation : Boolean/'fade-in'/'slide-from-left'/'slide-from-top'/Stringtrue
By default, scheduler fade events in on load. Specify false to prevent this animation or specify one of the available animation types to use it (true equals 'fade-in'):
- fade-in (default)
- slide-from-left
- slide-from-top
```
// Slide events in from the left on load
scheduler = new Scheduler({
    useInitialAnimation : 'slide-from-left'
});
```
Has a corresponding runtime useInitialAnimation property.
defaultResourceImageName : String
SchedulerResourceRendering

Generic resource image, used when provided imageUrl or image fields or path calculated from resource name are all invalid. If left blank, resource name initials will be shown when no image can be loaded.

resourceColumns : ResourceHeaderConfig

SchedulerResourceRendering

A config object used to configure the resource columns in vertical mode. See ResourceHeader for more details on available properties.

new Scheduler({
    resourceColumns : {
        columnWidth    : 100,
        fillWidth      : false, // this is required for columnWidth to work
        headerRenderer : ({ resourceRecord }) => `${resourceRecord.id} - ${resourceRecord.name}`
    }
})

Has a corresponding runtime resourceColumns property.

resourceImageExtension : String.png
SchedulerResourceRendering

Resource image extension, used when creating image path from resource name.
resourceImagePath : String
SchedulerResourceRendering
Path to load resource images from. Used by the resource header in vertical mode and the ResourceInfoColumn in horizontal mode. Set this to display miniature images for each resource using their image or imageUrl fields.
- image represents image name inside the specified resourceImagePath,
- imageUrl represents fully qualified image URL.
If set and a resource has no imageUrl or image specified it will try show miniature using the resource's name with resourceImageExtension appended.

NOTE: The path should end with a /:
```
new Scheduler({
  resourceImagePath : 'images/resources/'
});
```
barMargin : Number

Controls how much space to leave between stacked event bars in px.

Can be configured per resource by setting resource.barMargin.
eventBarTextField : Stringname

Field from EventModel displayed as text in the bar when rendering
eventLayout : 'stack'/'pack'/'mixed'/'none'/Object
Defines how to handle overlapping events. Valid values are:
- stack, adjusts row height (only horizontal)
- pack, adjusts event height in horizontal mode, (width in vertical mode) to fit all events
- mixed, allows two events to overlap, more packs (only vertical)
- none, allows events to overlap
In horizontal mode, the default value is stack, in vertical mode it is pack. This config can also accept an object:
```
new Scheduler({
    eventLayout : { type : 'stack' }
})
```
- type : 'stack'/'pack'/'mixed'/'none'
  Type
Has a corresponding runtime eventLayout property.
eventRenderer : Function
An empty function by default, but provided so that you can override it. This function is called each time an event is rendered into the schedule to render the contents of the event. It's called with the event, its resource and a renderData object which allows you to populate data placeholders inside the event template.

You should never modify any records inside this method.

By default, the DOM markup of an event bar includes placeholders for 'cls' and 'style'. The cls property is a DomClassList which will be added to the event element. The style property is an inline style declaration for the event element.

When returning content, be sure to consider how that content should be encoded to avoid XSS (Cross-Site Scripting) attacks. This is especially important when including user-controlled data such as the event's name. The function encodeHtml as well as xss can be helpful in these cases.
```
 eventRenderer({ eventRecord, resourceRecord, renderData }) {
     renderData.style = 'color:white';                 // You can use inline styles too.

     // Property names with truthy values are added to the resulting elements CSS class.
     renderData.cls.isImportant = this.isImportant(eventRecord);
     renderData.cls.isModified = eventRecord.isModified;

     // Remove a class name by setting the property to false
     renderData.cls[scheduler.generatedIdCls] = false;

     // Or, you can treat it as a string, but this is less efficient, especially
     // if your renderer wants to *remove* classes that may be there.
     renderData.cls += ' extra-class';

     return StringHelper.xss`${DateHelper.format(eventRecord.startDate, 'YYYY-MM-DD')}: ${eventRecord.name}`;
 }
```
Parameters
- context : Object
  
  An object containing the information needed to render an Event
- eventRecord : EventModel
  
  The event record
- resourceRecord : ResourceModel
  
  The resource record
- assignmentRecord : AssignmentModel
  
  The assignment record
- scheduler : Scheduler
  
  The Scheduler instance
- renderData : Object
  
  An object containing details about the event rendering
- start : Date
  
  The start date of the event, reflecting any ongoing resize or drag operation. Use this instead of eventRecord.startDate to get the correct visual dates during interactions
- end : Date
  
  The end date of the event, reflecting any ongoing resize or drag operation. Use this instead of eventRecord.endDate to get the correct visual dates during interactions
- event : EventModel
  
  The event record
- cls : DomClassList/String
  
  An object whose property names represent the CSS class names to be added to the event bar element. Set a property's value to truthy or falsy to add or remove the class name based on the property name. Using this technique, you do not have to know whether the class is already there, or deal with concatenation
- wrapperCls : DomClassList/String
  
  An object whose property names represent the CSS class names to be added to the event wrapper element. Set a property's value to truthy or falsy to add or remove the class name based on the property name. Using this technique, you do not have to know whether the class is already there, or deal with concatenation.
- iconCls : DomClassList/String
  
  An object whose property names represent the CSS class names to be added to an event icon element.
  
  Note that an element carrying this icon class is injected into the event element after the renderer completes, before the renderer's created content.
  
  To disable this if the renderer takes full control and creates content using the iconCls, you can set renderData.iconCls = null
- left : Number
  
  Vertical offset position (in pixels) on the time axis
- width : Number
  
  Width in pixels of the event element
- height : Number
  
  Height in pixels of the event element
- style : String/Object<String, String>
  
  Inline styles for the event bar DOM element Use either 'border: 1px solid black' or { border: '1px solid black' }
- wrapperStyle : String/Object<String, String>
  
  Inline styles for wrapper of the event bar DOM element. Use either 'border: 1px solid green' or { border: '1px solid green' }
- eventStyle : 'tonal'/'filled'/'bordered'/'traced'/'outlined'+ 9 more
  
  The eventStyle of the event. Use this to apply custom styles to the event DOM element
- eventColor : String
  
  The eventColor of the event. Use this to set a custom color for the rendered event
- ariaLabel : String
  
  A description of the event details used for screen readers
- children : DomConfig[]
  An array of DOM configs used as children to the b-sch-event element. Can be populated with additional DOM configs to have more control over contents.
  
  Using JSX (React)
  
  When using the Bryntum React wrapper, the event renderer can return JSX elements:
  
  eventRenderer({ eventRecord, resourceRecord, renderData }) { return <MyEventComponent event={eventRecord} resource={resourceRecord} />; }
  
  Using JSX in the event renderer creates a React portal for each rendered event. For schedulers with many visible events or frequently re-rendered views, this may impact scrolling performance compared to returning plain strings or DomConfig objects. Consider using JSX primarily for events that require complex interactive React components.
Returns

String/DomConfig/DomConfig[]
:

A simple string, a DomConfig (or array thereof), or a JSX element when using React
eventRendererThisObj : Object

this reference for the eventRenderer function
narrowEventWidth : Number10

When an event bar has a width less than this value, it gets the CSS class b-sch-event-narrow added. You may apply custom CSS rules using this class.

In vertical mode, this class causes the text to be rotated so that it runs vertically.
resourceMargin : Number/ResourceMarginConfig
SchedulerResourceRendering
Control how much space to leave between the first event/last event and the resources edge (top/bottom margin within the resource row in horizontal mode, left/right margin within the resource column in vertical mode), in px. Defaults to the value of barMargin.

Can be configured per resource by setting resource.resourceMargin.

It's also possible to set different values for top/left and bottom/right by assigning an object to resourceMargin with start (margin top in horizontal mode, margin left in vertical mode) and end (margin bottom / margin right) properties:
```
scheduler = new Scheduler({
    resourceMargin : {
        start : 15,
        end   : 1
    }
});
```
Has a corresponding runtime resourceMargin property.
resourceImages : Object
SchedulerResourceRendering
Convenience config to set both resourceImagePath and resourceImageExtension.
```
new Scheduler({
  resourceImages : {
    path      : 'images/resources/',
    extension : '.png'
  }
});
```
- path : String
  
  Path to load resource images from
- extension : String
  
  Resource image extension

Properties

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

isSchedulerEventRendering : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of SchedulerEventRendering class, or subclass thereof.
isSchedulerResourceRendering : Booleantrue

READONLY

static

ADVANCED
SchedulerResourceRendering

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

eventReleaseThreshold : Number

An advanced setting that controls the maximum number of released event bars to keep in the DOM.

Schedulers virtualization releases event bars that go out of view, which means they are hidden but not removed from the DOM. When another event bar enters view, a released one is reused. This is faster than removing and re-adding the event bars from the DOM.

By default, all released event bars are kept around, and you should in general not need to adjust this setting. But if you have an app in which the scheduler sometimes displays a very large number of events on the screen at the same time, and sometimes only a few, you can experiment with tweaking this setting to free up some memory in the sparse case.

Has a corresponding eventReleaseThreshold config.
minPackSize : Number
Experimental Minimum size that events should be allowed to shrink to when using pack layout. If packing leads to any event being smaller than this value, the row will grow in height instead to maintain this minimum size.

When combined with barMargin, events can still shrink below the limit. Adjust the value to suite your needs
```
new Scheduler({
  eventLayout : 'pack',
  minPackSize : 10
});
```
This setting is currently only used in horizontal mode.

Being experimental, this API might be removed or adjusted with short notice in the future.

Has a corresponding minPackSize config.
isSchedulerEventRendering : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of SchedulerEventRendering class, or subclass thereof.
milestoneAlign : 'start'/'center'/'end'center
How to align milestones in relation to their startDate. Only applies when using a milestoneLayoutMode other than default. Valid values are:
- start
- center (default)
- end
Has a corresponding milestoneAlign config.
milestoneCharWidth : Number10

Factor representing the average char width in pixels used to determine milestone width when configured with milestoneLayoutMode: 'estimate'.

Has a corresponding milestoneCharWidth config.
milestoneLayoutMode : 'default'/'estimate'/'data'/'measure'default
How to handle milestones during event layout. How the milestones are displayed when part of the layout are controlled using milestoneTextPosition.

Options are:
- default - Milestones do not affect event layout
- estimate - Milestone width is estimated by multiplying text length with Scheduler#milestoneCharWidth
- data - Milestone width is determined by checking EventModel#milestoneWidth
- measure - Milestone width is determined by measuring label width Please note that currently text width is always determined using EventModel#name. Also note that only 'default' is supported by eventStyles line, dashed and minimal.
Has a corresponding milestoneLayoutMode config.
milestoneTextPosition : 'inside'/'outside'/'always-outside'outside
Position of the milestone text:
- 'inside' - for short 1-char text displayed inside the diamond, not applicable when using milestoneLayoutMode)
- 'outside' - for longer text displayed outside the diamond, but inside it when using milestoneLayoutMode
- 'always-outside' - outside even when combined with milestoneLayoutMode
Has a corresponding milestoneTextPosition config.
initialAnimationDuration : Number2000

Maximum duration (in milliseconds) for the initial animation controlled by useInitialAnimation.

Has a corresponding initialAnimationDuration config.
overlappingEventSorter : Function

Override this method to provide a custom sort function to sort any overlapping events. See overlappingEventSorter for more details.

Has a corresponding overlappingEventSorter config.
useInitialAnimation : Boolean/'fade-in'/'slide-from-left'/'slide-from-top'/Stringtrue
By default, scheduler fade events in on load. Specify false to prevent this animation or specify one of the available animation types to use it (true equals 'fade-in'):
- fade-in (default)
- slide-from-left
- slide-from-top
```
// Slide events in from the left on load
scheduler = new Scheduler({
    useInitialAnimation : 'slide-from-left'
});
```
Has a corresponding useInitialAnimation config.
eventLayout : 'stack'/'pack'/'mixed'/'none'/Object
Defines how to handle overlapping events. Valid values are:
- stack, adjusts row height (only horizontal)
- pack, adjusts event height in horizontal mode, (width in vertical mode) to fit all events
- mixed, allows two events to overlap, more packs (only vertical)
- none, allows events to overlap
In horizontal mode, the default value is stack, in vertical mode it is pack. This config can also accept an object:
```
new Scheduler({
    eventLayout : { type : 'stack' }
})
```
- type : 'stack'/'pack'/'mixed'/'none'
  Type
Has a corresponding eventLayout config.
resourceMargin : Number/ResourceMarginConfig
SchedulerResourceRendering
Control how much space to leave between the first event/last event and the resources edge (top/bottom margin within the resource row in horizontal mode, left/right margin within the resource column in vertical mode), in px. Defaults to the value of barMargin.

Can be configured per resource by setting resource.resourceMargin.

It's also possible to set different values for top/left and bottom/right by assigning an object to resourceMargin with start (margin top in horizontal mode, margin left in vertical mode) and end (margin bottom / margin right) properties:
```
scheduler = new Scheduler({
    resourceMargin : {
        start : 15,
        end   : 1
    }
});
```
Has a corresponding resourceMargin config.
resourceColumnWidth : Number

READONLY
SchedulerResourceRendering

Get resource column width. Only applies to vertical mode. To set it, assign to scheduler.resourceColumns.columnWidth.
resourceColumns : ResourceHeader

READONLY
SchedulerResourceRendering

Use it to manipulate resource column properties at runtime.

Has a corresponding resourceColumns config.

Functions

Functions are methods available for calling on the class

generateRenderData( eventRecord, resourceRecord, includeOutside )
: Object

private

Generates data used in the template when rendering an event. For example which css classes to use. Also calls the eventRenderer.
onEventDataGenerated( eventData )

internal

A method which may be chained by features. It is called when an event's render data is calculated so that features may update the style, class list or body.
repaintEvent( eventRecord )

private

Rerenders the events for all resources connected to the specified event
getMilestoneLabelWidth( eventRecord, resourceRecord )
: Number

Determines width of a milestones label. How width is determined is decided by configuring milestoneLayoutMode. Please note that text width is always determined using the events name.
restartInitialAnimation( initialAnimation )

Restarts initial events animation with new value useInitialAnimation.
repaintEventsForResource( resourceRecord )

Rerenders events for specified resource (by rerendering the entire row).
getEventLayoutHandler( )
: HorizontalLayout

internal

Get event layout handler. The handler decides the vertical placement of events within a resource. Returns null if no eventLayout is used (if eventLayout is set to "none")

Type definitions

EventRenderData
Layout data object used to lay out an event record.
Properties
- eventRecord : EventModel
  
  Event instance
- resourceRecord : ResourceModel
  
  Assigned resource
- assignmentRecord : AssignmentModel
  
  Assignment instance
- start : Date
  
  The start date of the event, reflecting any ongoing resize or drag operation
- end : Date
  
  The end date of the event, reflecting any ongoing resize or drag operation
- startMS : Number
  
  Event start date time in milliseconds
- endMS : Number
  
  Event end date in milliseconds
- height : Number
  
  Calculated event element height
- width : Number
  
  Calculated event element width
- top : Number
  
  Calculated event element top position in the row (or column)
- left : Number
  
  Calculated event element left position in the row (or column)

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-sch-event-animating-transition	Event transitions that are enabled when Scheduler is animating
--b-sch-event-background	Event background color (overridden by event styles)
--b-sch-event-border-color	Event border color (overridden by event styles)
--b-sch-event-border-radius	Event border radius (overridden by event styles)
--b-sch-event-border-style	Event border style (overridden by event styles)
--b-sch-event-border-width	Event border-width. Must include a unit even when 0, for calculations to be correct (overridden by event styles)
--b-sch-event-box-shadow	Event box-shadow (overridden by event styles)
--b-sch-event-color	Event text color (overridden by event styles)
--b-sch-event-content-height	Event content height (when not using sticky events)
--b-sch-event-content-width	Event content width (when not using sticky events)
--b-sch-event-cursor	Event cursor
--b-sch-event-font-size	Event font size (overridden by event styles)
--b-sch-event-font-weight	Event font weight (overridden by event styles)
--b-sch-event-min-size	Events min-width (height in vertical mode), to ensure even very short events are visible
--b-sch-event-opacity	Event opacity (overridden by event styles)
--b-sch-event-padding-block	Event padding block
--b-sch-event-padding-inline	Event padding inline
--b-sch-event-transition	Event transitions that are always enabled (for hover effects)
--b-sch-event-width-reduction	Event width reduction, to leave a small gap between events that end / start at the same time
--b-sch-milestone-border-width	Milestone border width (overridden by event styles)
--b-sch-milestone-gap	Gap between milestone diamond and its label
Hovered
--b-sch-event-hover-background	Hovered event's background color (overridden by event styles)
Selected
--b-sch-event-selected-background	Selected event's background color (overridden by event styles)

Source path

Scheduler/view/mixin/SchedulerEventRendering.js

Inheritance tree1

SchedulerEventRendering

Mixins1

SchedulerResourceRendering

SchedulerEventRendering
Mixin

See also

Configs

Parameters

Returns

Parameters

Using JSX (React)

Returns

Properties

Functions

Type definitions

Properties

CSS variables

Source path

Inheritance tree1

Mixins1

Contents

SchedulerEventRendering Mixin

See also

Configs

Parameters

Returns

Parameters

Using JSX (React)

Returns

Properties

Functions

Type definitions

Properties

CSS variables

Source path

Inheritance tree1

Mixins1

Contents

SchedulerEventRendering
Mixin