JavaScript Scheduler: Highlighting Related Events

Overview

The JavaScript Scheduler includes a rich client-side API that makes it easy to work with related events. In this example, the events are grouped using a custom key and the group can be highlighted on hover or selected on click.

• The hover behavior uses real-time event updates and a custom duration-bar color.

• The click behavior uses the Scheduler selection API to select all events from the same group.

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

License

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

Event Data

The sample uses a custom relatedKey property to determine which events belong together. The events keep the default DayPilot styling. Only the highlighted group's duration bar color changes during hover.

The refreshed sample keeps the same five-event layout as the original tutorial. In the live code, the dates are generated from the current month, but the important part here is that each event object includes the custom relatedKey property.

const monthStart = DayPilot.Date.today().firstDayOfMonth();

const events = [
  { id: 1, text: "Event 1 (Group 1)", start: monthStart.addDays(4), end: monthStart.addDays(10), resource: "R1", relatedKey: 1 },
  { id: 2, text: "Event 2 (Group 1)", start: monthStart.addDays(2), end: monthStart.addDays(9), resource: "R2", relatedKey: 1 },
  { id: 3, text: "Event 3 (Group 1)", start: monthStart.addDays(6), end: monthStart.addDays(13), resource: "R3", relatedKey: 1 },
  { id: 4, text: "Event 4 (Group 2)", start: monthStart.addDays(1), end: monthStart.addDays(11), resource: "R4", relatedKey: 2 },
  { id: 5, text: "Event 5 (Group 2)", start: monthStart.addDays(5), end: monthStart.addDays(18), resource: "R5", relatedKey: 2 },
];

Highlighting Related Events on Hover

To highlight all related Scheduler events on hover, we will use the onEventMouseOver and onEventMouseOut event handlers.

Start by adding onEventMouseOver to the Scheduler config. In the refreshed sample, the handler delegates the work to a small helper in the app object:

onEventMouseOver: (args) => {
  app.highlight.show(args.e.data.relatedKey);
},

That helper first needs to locate all events that belong to the same group. The sample does that using findRelatedEvents(), which filters the loaded event list by relatedKey:

findRelatedEvents(relatedKey) {
  return dp.events.all().filter((event) => event.data.relatedKey === relatedKey);
},

The next step is to highlight those related events by changing the duration-bar color. The show() method stores the active group, updates the matching events, and keeps the default Scheduler event body and border styling intact:

const highlightBarColor = "#2f9e73";

show(relatedKey) {
  if (this.key === relatedKey) {
    return;
  }

  this.clear();
  this.key = relatedKey;
  this.events = app.findRelatedEvents(relatedKey);
  this.events.forEach((event) => {
    event.data.barColor = highlightBarColor;
    dp.events.update(event);
  });
},

The next step is cleanup using onEventMouseOut. The clear() method removes the temporary highlight and resets the helper state. The full hover implementation now looks like this:

const highlightBarColor = "#2f9e73";

const dp = new DayPilot.Scheduler("dp", {
  onEventMouseOver: (args) => {
    app.highlight.show(args.e.data.relatedKey);
  },
  onEventMouseOut: () => {
    app.highlight.clear();
  },
  // ...
});

const app = {
  highlight: {
    events: [],
    key: null,
    clear() {
      this.events.forEach((event) => {
        event.data.barColor = null;
        dp.events.update(event);
      });
      this.events = [];
      this.key = null;
    },
    show(relatedKey) {
      if (this.key === relatedKey) {
        return;
      }

      this.clear();
      this.key = relatedKey;
      this.events = app.findRelatedEvents(relatedKey);
      this.events.forEach((event) => {
        event.data.barColor = highlightBarColor;
        dp.events.update(event);
      });
    },
  },

  findRelatedEvents(relatedKey) {
    return dp.events.all().filter((event) => event.data.relatedKey === relatedKey);
  },
};

Selecting Related Events on Click

For the click action, the implementation is shorter because the built-in event selecting API takes care of the selection state. In the same Scheduler config, the handler just clears the current selection and adds all related events to dp.multiselect.

onEventClick: (args) => {
  dp.multiselect.clear();
  app.findRelatedEvents(args.e.data.relatedKey).forEach((event) => {
    dp.multiselect.add(event);
  });
},

This keeps the built-in selected-event appearance, so no extra selection CSS is necessary.

History

• April 12, 2026: Refreshed the sample to the current JavaScript project template, updated the code to modern JavaScript, and switched the event data to the current month.