Multiple calendars on the same page

I have two calendars on one page and my task is to show the Save All button above each one of them when calendar events are dragged inside. I’ve made component having Save All button with *ngIf condition and <ng-fullcalendar> with (eventDrop)="onEventDropOrResize($event)".

Dropping the calendar event in the second calendar triggers the onEventDropOrResize() method in the first component and the Save All button shows always in the first component. While debugging, $event.srcElement and $event.target are both pointing to the first <ng-fullcalendar> DOM element. I’ve tried with other events, i.e. eventClick() and the event always triggers the first component’s listener method.

Is there a quick workaround for this?

[mitjarogl]

@Jamaks How can I initialise two instances of calendar on same page? I cannot find from documentation. Currently by default if I try to add two calendars they all have same Id.

[kombadzomba]

I guess you’ll have to add jQueryUI into ng2 project or maybe try some other ng2 draggable package first.