html5 javascript scheduler group concurrent events

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

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:

html5 javascript scheduler group concurrent events expanded

JavaScript

Configuration properties

Events

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

ASP.NET MVC

Example

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

Demo