ProHorizontalLayout

Specifies a way to group events inside the row. Can accept either a model field name or a function which is provided with event record as a single argument and is expected to return group for the event.

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.

For example, we can arrange events randomly in the row:

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

            return 50;
        }
    }
})

If you need a reference to the scheduler pro instance, you can get that from the function scope (arrow function doesn't work here):

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

            return scheduler.rowHeight;
        }
    }
})

Type of horizontal layout. Supported values are stack, pack and none.

The weights config allows you to specify order of the event groups inside the row. Higher weights are placed further down in the row. If field value is not specified in the weights object, it will be assigned Infinity value and pushed to the bottom.

Only applicable when groupBy config is not a function:

new SchedulerPro({
    eventLayout : {
        type    : 'stack',
        weights : {
            // Events with high prio will be placed at the top, then medium,
            // then low prio events.
            high   : 100,
            medium : 150,
            low    : 200
        },
        groupBy : 'prio'
    }
});

Only explicitly defined groups are put in separate bands inside the row:

new SchedulerPro({
    eventLayout : {
        // Pack layout is also supported
        type : 'pack',
        weights : {
            // Events with high prio will be placed at the top. All other
            // events will be put to the same group at the bottom
            high : 100
        },
        groupBy : 'prio'
    }
});

This method performs layout on an array of event render data and returns amount of bands. Band is a multiplier of a configured rowHeight to calculate total row height required to fit all events. This method should not be used directly, it is called by the Scheduler during the row rendering process.

Sorts events by group and returns ordered array of groups, or empty array if events are not grouped.

Returns group for the passed event render data.

This method iterates over events and calculates top position for each of them. Default layouts calculate positions to avoid events overlapping horizontally (except for the 'none' layout). Pack layout will squeeze events to a single row by reducing their height, Stack layout will increase the row height and keep event height intact. This method should not be used directly, it is called by the Scheduler during the row rendering process.