html5-javascript-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 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.
  • 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:

html5-javascript-scheduler-group-concurrent-events-expanded.png

JavaScript

Configuration properties

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