Find event by id

Event calendars & schedulers
1

Hello,
I want to change the css of some other events when user clicked on one event . I have ids of events I want to change , How can I found them in click event ?

2

Hi @Sara :wave:

We render the events with a data-id attribute which contains the id on the event, you can use this to find the markup of an event in the DOM.

Also, I’m curious about the use case so, you are welcome to share a bit more information about it.

3

Hi Zsombor,
We would like to start working with your scheduler , and one of our requirements is line connecter between events , but as I talked with levi , in moment this feature is not exist , so I decide to use some css effect on mouse hover to show connected events for example changing the border colour or background colour . Therefore, in mouse hover I want to find the connected events by Id and change their css class. I use this line of code but it always returns null.
const events = this.elementRef.nativeElement.getAttribute('data-id');

4

Dear @Zsombor,
I am still waiting :slight_smile:

5

Here’s an example solution, assuming you store the connected event ids in a property named connected:

myEvents = [
  { id: 1, title: 'Main event', start: '2021-10-15T10:00', end: '2021-10-15T16:00', resource: 1, connected: [2, 3] },
  { id: 2, title: 'Connected event 1', start: '2021-10-15T17:00', end: '2021-10-15T20:00', resource: 2 },
  { id: 3, title: 'Connected event 2', start: '2021-10-15T17:00', end: '2021-10-15T20:00', resource: 3 }
];

hoverIn(args: any) {
  const connected = args.event.connected;
  if (connected) {
    connected.forEach((id: any) => {
      // search for the connected event element in the DOM 
      document.querySelectorAll('.mbsc-schedule-event[data-id="' + id + '"]').forEach((elm) => {
        // add the class to highlight the event
        elm.classList.add('custom-hightlight');
      });
    });
  }
}

hoverOut(args: any) {
  const connected = args.event.connected;
  if (connected) {
    connected.forEach((id: any) => {
      document.querySelectorAll('.mbsc-schedule-event[data-id="' + id + '"]').forEach((elm) => {
        // remove the highlight class
        elm.classList.remove('custom-hightlight');
      });
    });
  }
}

<mbsc-eventcalendar [data]="myEvents" [view]="myView" [resources]="myResources" (onEventHoverIn)="hoverIn($event)" (onEventHoverOut)="hoverOut($event)"></mbsc-eventcalendar>

Add some styling to it:

.custom-hightlight .mbsc-schedule-event-background {
  border: 2px solid black;
}