Concurrent Event Groups

The Scheduler can display a block of concurrent events as a single collapsed group.

• The group can be expanded by clicking the group box.

• Disabled by default. You can enable it using groupConcurrentEvents property.

• All groups in a row can be expanded using groups.expandAll()

• All groups in a row can be collapsed using groups.collapseAll()

• Special CSS class for group box (*_event_group).

• Configurable grouping threshold (groupConcurrentEventsLimit). The default value is 1. You can increase it to prevent collapsing of groups with less then the limit number of lines.

• You can also define custom event groups (manually) - see JavaScript Scheduler: Expandable Events Groups tutorial

The concurrent group expanded status is persisted during update() calls. Because the event set can change during update() the following logic is used: It remembers IDs of all events in groups that were expanded. During update, it checks those IDs for every new group. If the new group contains at least one event that was in an expanded group in the previous state the group will be expanded.

Expanded group:

JavaScript

Configuration properties

• groupConcurrentEvents

• groupConcurrentEventsLimit

Events

• onBeforeGroupRender

Row API

The rows.find() method returns a DayPilot.Row object with the following methods:

• DayPilot.Row.groups.expandAll()

• DayPilot.Row.groups.collapseAll()

• DayPilot.Row.groups.collapsed() - returns an array of collapsed groups

• DayPilot.Row.groups.expanded() - returns an array of expanded groups

The group object has the following methods:

• expand()

• collapse()

Example

dp.groupConcurrentEvents = true;
dp.groupConcurrentEventsLimit = 2;  // don't group if there aren't more than 2 overlapping events

dp.onBeforeRowHeaderRender = function (args) {
    var hasExpanded = args.row.groups.expanded().length > 0;
    var hasCollapsed = args.row.groups.collapsed().length > 0;

    if (hasExpanded && hasCollapsed) {
        args.row.areas = [
            {
                v: "Visible",
                right: 14,
                top: 0,
                height: 12,
                width: 12,
                style: "cursor:pointer",
                image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLyUoFBT0AAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAFJJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeRhgJGREc4GijMBtTNgA0BxFog+uA4IA2gmUJwFog/IgUhAGBB9KPYhA3T74Jog+hjx+A8A1KRQ+AN5vcwAAAAASUVORK5CYII=',
                onClick: function (args) {
                    var row = args.source;
                    row.groups.expandAll();
                }
            },
            {
                v: "Visible",
                right: 0,
                top: 0,
                height: 12,
                width: 12,
                style: "cursor:pointer",
                image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLxB+p9DXAAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAENJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeSxAaA4E1A7VjmgOAtEHyMjI7IE0EygOAtEH5CDqY9c+xjx+A8ANndK9WaZlP4AAAAASUVORK5CYII=",
                onClick: function (args) {
                    var row = args.source;
                    row.groups.collapseAll();
                }
            }
        ];
    } else if (hasCollapsed) {
        args.row.areas = [
            {
                v: "Visible",
                right: 0,
                top: 0,
                height: 12,
                width: 12,
                style: "cursor:pointer",
                image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLyUoFBT0AAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAFJJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeRhgJGREc4GijMBtTNgA0BxFog+uA4IA2gmUJwFog/IgUhAGBB9KPYhA3T74Jog+hjx+A8A1KRQ+AN5vcwAAAAASUVORK5CYII=",
                onClick: function (args) {
                    var row = args.source;
                    row.groups.expandAll();
                }
            },
        ];
    } else if (hasExpanded) {
        args.row.areas = [
            {
                v: "Visible",
                right: 0,
                top: 0,
                height: 12,
                width: 12,
                style: "cursor:pointer",
                image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLxB+p9DXAAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAENJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeSxAaA4E1A7VjmgOAtEHyMjI7IE0EygOAtEH5CDqY9c+xjx+A8ANndK9WaZlP4AAAAASUVORK5CYII=",
                onClick: function (args) {
                    var row = args.source;
                    row.groups.collapseAll();
                }
            }
        ];
    }
};

Demo

• Concurrent Event Groups Demo

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  // ...
  GroupConcurrentEvents = true,
  GroupConcurrentEventsLimit = 2;  // don't group if there aren't more than 2 overlapping events
})