JavaScript Scheduler: Highlighting Related Events

Overview

The JavaScript Scheduler includes rich API which lets you add custom highlighting logic easily. You can use it to create groups of related events and highlight them on mouse hover or click events.

• Use the real-time hover event to highlight all related Scheduler events. The hover event uses custom highlighting implementation (by changing the event duration bar color)..

• All related events will be selected on click. The click event uses the built-in event selection API to highlight the related events.

• Includes a trial version of DayPilot Pro for JavaScript (see also License below)

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript.

Event Data

Let's add a custom property (relatedKey) that will be used to determine the related events. All events from the same group will have the same relatedKey value. The relatedKey name is a custom property and you can replace it with your own property name.

In this case, we have 5 events that belong to different 2 groups.

dp.events.list = [
  { id: 1, text: "Event 1 (Group 1)", start: "2019-11-05T00:00:00", end: "2019-11-11T00:00:00", resource: "R1", relatedKey: 1},
  { id: 2, text: "Event 2 (Group 1)", start: "2019-11-03T00:00:00", end: "2019-11-10T00:00:00", resource: "R2", relatedKey: 1},
  { id: 3, text: "Event 3 (Group 1)", start: "2019-11-07T00:00:00", end: "2019-11-14T00:00:00", resource: "R3", relatedKey: 1},
  { id: 4, text: "Event 4 (Group 2)", start: "2019-11-02T00:00:00", end: "2019-11-12T00:00:00", resource: "R4", relatedKey: 2},
  { id: 5, text: "Event 5 (Group 2)", start: "2019-11-06T00:00:00", end: "2019-11-19T00:00:00", resource: "R5", relatedKey: 2},
];

Highlighting Related Events on Hover

In order to highlight all related Scheduler events on hover, we will use onEventMouseOver event handler.

To store the list of highlighted events, we need to create a global highlight variable with list property. When we find the related events and highlight them we will also add them to the list to keep track of them.

var highlight = {
  list: []
};

Now we need to add the onEventMouseOver event handler:

dp.onEventMouseOver = function(args) {
};

It will find all events with the same relatedKey value:

dp.onEventMouseOver = function(args) {
  highlight.list = dp.events.all().filter(function(e) { return e.data.relatedKey === args.e.data.relatedKey; });
};

It will also highlight these events by changing the color of the duration bar to green (#00cc00).

dp.onEventMouseOver = function(args) {
  highlight.list = dp.events.all().filter(function(e) { return e.data.relatedKey === args.e.data.relatedKey; });
  highlight.list.forEach(function(e) {
    e.data.barColor = "#00cc00";
    dp.events.update(e);
  });
};

The next step will be to add cleanup logic using onEventMouseOut event handler. The full implementation now looks like this:

var highlight = {
  list: [],
  clear: function() {
    this.list.forEach(function(e) {
      e.data.barColor = null;
      dp.events.update(e);
    });
    this.list = [];
  }
};

var dp = new DayPilot.Scheduler("dp");

// ...

dp.onEventMouseOver = function(args) {
  if (highlight.list.find(function(e) { return e.data.id === args.e.data.id; })) {
    return;
  }

  highlight.clear();

  highlight.list = dp.events.all().filter(function(e) { return e.data.relatedKey === args.e.data.relatedKey; });
  highlight.list.forEach(function(e) {
    e.data.barColor = "#00cc00";
    dp.events.update(e);
  });

};

dp.onEventMouseOut = function(args) {
  highlight.clear();
};

dp.init();

Selecting Related Events on Click

You can also use event click handler (onEventClick) to select the related events. This time the implementation is much easier because we don't have to keep track of the selected events and highlight the events manually. The built-in event selecting API will do this for us.

dp.onEventClick = function(args) {

  dp.multiselect.clear();

  dp.events.all().filter(function(e) { return e.data.relatedKey === args.e.data.relatedKey; }).forEach(function(e) {
    dp.multiselect.add(e);
  });

};