ProVerticalLayout

Handles the positioning of events within a resource column when the SchedulerPro is running in vertical mode. By default, overlapping events are arranged using the 'pack' algorithm which adjusts event widths to fit side by side within the column. You can override the default behavior by providing a custom layoutFn to calculate event positions and column widths yourself. Example usage:

new SchedulerPro({
    mode : 'vertical',
    eventLayout : {
        layoutFn(items, resource, scheduler) {
            items.forEach(item => {
                item.top = Math.round(Math.random() * 100);
                item.height = Math.round(Math.random() * 100);
            });

            return 150; // The resource column width
        }
    }
})

Useful configs

Config	Description
type	Layout algorithm: `mixed`, `pack`, or `none`
layoutFn	Custom function for manual event positioning

Configs

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

layoutFn : Function
Supply a function to manually layout events. It accepts event layout data and should set top and height for every provided data item (left and width are calculated according to the event start date and duration). The function should return the total row height in pixels.

If you need a reference to the SchedulerPro instance, you can get that from the function scope (arrow function doesn't work here):
```
new SchedulerPro({
    mode : 'vertical',
    eventLayout : {
        layoutFn(items, resource, scheduler) {
            items.forEach(item => {
                item.left = Math.round(Math.random() * 100);
                item.width = Math.round(Math.random() * 100);
            });

            return 150;
        }
    }
})
```
Parameters
- events : EventRenderData[]
  
  Unordered array of event render data, sorting may be required
- resource : ResourceModel
  
  The resource for which the events are being laid out
- scheduler : SchedulerPro
  
  The SchedulerPro instance
Returns

Number
:

The resource column width
type : 'mixed'/'pack'/'none'

Type of vertical layout. Supported values are mixed, pack and none.

Source path

SchedulerPro/eventlayout/ProVerticalLayout.js

Inheritance tree1

ProVerticalLayout

Mixins1

VerticalLayout

ProVerticalLayout

Useful configs

See also

Configs

Parameters

Returns

Source path

Inheritance tree1

Mixins1

Contents