SchedulerEventRendering

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

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

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.

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

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

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.

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'
});

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.

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.

new Scheduler({
  eventLayout : 'pack',
  minPackSize : 10
});

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

Can be configured per resource by setting resource.barMargin.

Field from EventModel displayed as text in the bar when rendering

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' }
})

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.

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.

 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}`;
 }

this reference for the eventRenderer function

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.

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

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

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.

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

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

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

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'
});

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.

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.

new Scheduler({
  eventLayout : 'pack',
  minPackSize : 10
});

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' }
})

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.

Restarts initial events animation with new value useInitialAnimation.

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