ProHorizontalLayout

Mixin

Mixin for SchedulerPro horizontal layouts (ProHorizontalLayoutPack and ProHorizontalLayoutStack). Should not be used directly, instead specify eventLayout in the SchedulerPro config (stack, pack or none):

new SchedulerPro({
  eventLayout: 'stack'
});

Grouping events

By default events are not grouped and are laid out inside the row using start and end dates. Using groupBy config you can group events inside the resource row. Every group will be laid out on its own band, as if layout was applied to each group of events separately.

By field value

You can specify field name to group events by. The following snippet would put high prio events at the top:

new SchedulerPro({
    eventLayout : {
        type    : 'stack',
        groupBy : 'prio'
    },
    project : {
        events : [
            { id : 1, startDate : '2017-02-08', duration : 1, prio : 'low' },
            { id : 2, startDate : '2017-02-09', duration : 1, prio : 'high' },
            { id : 3, startDate : '2017-02-10', duration : 1, prio : 'high' },
        ],
        resources : [
            { id : 1, name : 'Resource 1' }
        ],
        assignments : [
            { id : 1, resource : 1, event : 1 },
            { id : 2, resource : 1, event : 2 },
            { id : 3, resource : 1, event : 3 }
        ]
    }
})

Order of groups

Groups are always sorted ascending. In the example above high prio events are above low prio events because:

'high' < 'low' // true

If you want to group events in a specific order, you can define it in a special weights config:

new SchedulerPro({
    eventLayout : {
        type    : 'stack',
        weights : {
            low  : 100,
            high : 200
        },
        groupBy : 'prio'
    }
});

This will put low prio events at the top.

The weight value defaults to Infinity unless specified in the weights config explicitly.

Using a function

You can use a custom function to group events. The group function receives an event record as a single argument and is expected to return a non-null value for the group. This allows you to arrange events in any order you like, including grouping by multiple properties at once.

The snippet below groups events by duration and priority by creating 4 weights:

new SchedulerPro({
    eventLayout : {
        type    : 'stack',
        groupBy : event => {
            return (event.duration > 2 ? 2 : 3) * (event.prio === 'high' ? 1 : 5);
        }
    }
})

This will divide events into 4 groups as seen in this demo:

Manual event layout

You can provide a custom function to layout events inside the row and set the row size as required using layoutFn. The function is called with an array of render data objects. The custom function can iterate over those objects and position them inside the row using top and height attributes. The function should return the total row height in pixels.

Please note that using a custom layout function makes rowHeight obsolete.

new SchedulerPro({
    eventLayout : {
        layoutFn : (items, resourceRecord, scheduler) => {
            // Put event element at random top position
            item.top = 100 * Math.random();
        }
    }
});

Useful configs

See also

• ProHorizontalLayoutStack — Stack layout that increases row height for overlapping events
• ProHorizontalLayoutPack — Pack layout that reduces event height for overlapping events
• SchedulerPro — The scheduling view that uses these layouts