html5-scheduler-group-concurrent-events.png

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

  • The group can be expanded by clicking on the group box.
  • Disabled by default. You can enable it using .groupConcurrentEvents property.
  • All groups in a row can be expanded using DayPilot.Scheduler.rows.find("A").groups.expandAll()
  • All groups in a row can be collapsed using DayPilot.Scheduler.rows.find("A").groups.collapseAll()
  • Special CSS class for group box (_event_group).
  • Configurable grouping thresold (.groupConcurrentEventsLimit). The default value is 1. You can increase it to prevent collapsing of groups with less then the limit number of lines.

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-scheduler-group-concurrent-events-collapse.png

JavaScript

Configuration properties

  • DayPilot.Scheduler.groupConcurrentEvents
  • DayPilot.Scheduler.groupConcurrentEventsLimit

Events

Row API

DayPilotScheduler.rows.find() returns 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

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

dps.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", html: "<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLyUoFBT0AAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAFJJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeRhgJGREc4GijMBtTNgA0BxFog+uA4IA2gmUJwFog/IgUhAGBB9KPYhA3T74Jog+hjx+A8A1KRQ+AN5vcwAAAAASUVORK5CYII=" />", action:"JavaScript", js: function(row) { row.groups.expandAll(); } },
            {v:"Visible", right: 0, top: 0, height: 12, width: 12, style: "cursor:pointer", html: "<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLxB+p9DXAAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAENJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeSxAaA4E1A7VjmgOAtEHyMjI7IE0EygOAtEH5CDqY9c+xjx+A8ANndK9WaZlP4AAAAASUVORK5CYII=" />", action:"JavaScript", js: function(row) { row.groups.collapseAll(); } }
        ];
    }
    else if (hasCollapsed) {
        args.row.areas = [
            {v:"Visible", right: 0, top: 0, height: 12, width: 12, style: "cursor:pointer", html: "<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLyUoFBT0AAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAFJJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeRhgJGREc4GijMBtTNgA0BxFog+uA4IA2gmUJwFog/IgUhAGBB9KPYhA3T74Jog+hjx+A8A1KRQ+AN5vcwAAAAASUVORK5CYII=" />", action:"JavaScript", js: function(row) { row.groups.expandAll(); } },
        ];
    }
    else if (hasExpanded) {
        args.row.areas = [
            //{v:"Visible", right: 14, top: 0, height: 12, width: 12, html: "<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLyUoFBT0AAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAFJJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeRhgJGREc4GijMBtTNgA0BxFog+uA4IA2gmUJwFog/IgUhAGBB9KPYhA3T74Jog+hjx+A8A1KRQ+AN5vcwAAAAASUVORK5CYII=" />", action:"JavaScript", js: function(row) { row.groups.expandAll(); } },
            {v:"Visible", right: 0, top: 0, height: 12, width: 12, style: "cursor:pointer", html: "<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAKXRFWHRDcmVhdGlvbiBUaW1lAHDhIDMwIEkgMjAwOSAwODo0NjozMSArMDEwMClDkt4AAAAHdElNRQfZAR4HLxB+p9DXAAAACXBIWXMAAA7CAAAOwgEVKEqAAAAABGdBTUEAALGPC/xhBQAAAENJREFUeNpjrK6s5uTl/P75OybJ0NLW8h8bAIozgeSxAaA4E1A7VjmgOAtEHyMjI7IE0EygOAtEH5CDqY9c+xjx+A8ANndK9WaZlP4AAAAASUVORK5CYII=" />", action:"JavaScript", js: function(row) { 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