[ANGULAR] Scheduler add new listener for custom event icon buttons

[sanid]

Hi guys,

I am trying to have customised events with additional buttons above the original Scheduler Event that trigger custom onclick methods. Displaying buttons above was tricky but I managed it with position: fixed inside eventRenderer method for Scheduler wrapper component.

Scheduler event buttons.PNG (10.12 KiB) Viewed 1525 times

Custom buttons above Scheduler Event comming from eventRenderer method:

  eventRenderer = ({eventRecord}) => {
    return `
    <div style="position: relative;color:black;">
      <div >
          <div class="name">${eventRecord.name}</div>
          <div class="desc" style="position: fixed ;top: -30px;">
            <i class="material-icons md-18" (click)="eventname2($event)">android</i>
            <i class="material-icons md-18" (click)="eventname2($event)">build</i>
            <i class="material-icons md-18" (click)="eventname2($event)">more_time</i>
          </div>
      </div>
    </div>
      `;
  };

Wrapper component:

<bry-scheduler #scheduler [rowHeight]=rowHeight [barMargin]="barMargin" [events]="events" [resources]="resources"
    [timeRanges]="timeRanges" [startDate]="startDate" [endDate]="endDate" [columns]="columns"
    [eventTooltipFeature]="false" 
    [eventContextMenuFeature]="eventsContextConfig" 
    [scheduleContextMenuFeature]="menuConf"
    (onSchedulerEvents)="onSchedulerEvents($event)"
    (eventBodyTemplate)="generateEventTemplate(eventRecord)"
    [eventRenderer]="eventRenderer"
    [eventSelectionDisabled]="true"
    [addListener]="listenerConfig"
    >
</bry-scheduler>

I tried to make use of listeners or AddEvent that I found here :
https://www.bryntum.com/docs/scheduler/#Core/mixin/Events

My config for AddListener

  listenerConfig = {
    thisObj: this,          // The this reference for the handlers
    eventname2 : 'functionName', // Resolved at invocation time using the thisObj,
    otherevent : {
        fn: this.handleEventIconClickEvent()
    }
};

But I couldnt attach these custom event handlers for onclick events on these custom buttons.

Could you please point me in right direction for how to
1 add custom events (eventname2) or listeners for scheduler component
2 bind those listeners with onclick events in custom html from eventRenderer method

Many thanks

[mats]

Why position fixed? Just "absolute" would suffice. What you need is to listen to either our eventclick event and use the 'event' and inspect the target. https://bryntum.com/docs/scheduler/#Scheduler/view/mixin/SchedulerDomEvents#event-eventClick

[sanid]

Hi Mats,

I used fixed because absolute positioned content is not visible and dont work with overflow: hidden property from class .b-sch-event.

Regarding eventClick:
I tried setting listeners config like this

listeners = {
  selectionchange : (event: any) => {
      console.log(event);
  },
  eventclick : ({source, eventRecord, event}) => {
    console.log(event);
  },
  thisObj : this
};
};

<bry-scheduler
...
    [listeners]="listeners"
    >
</bry-scheduler>

But these eventHandlers are never triggered, what am I doing wrong?
Thanks

[saki]

The current implementation of Angular wrapper relays all scheduler events through Angular onSchedulerEvents emitter so you can listen to them this way:

app.component.html:

<bry-scheduler
    (onSchedulerEvents)  = "onSchedulerEvents($event)"

app.component.ts:

export class AppComponent {
    title = 'basic';
    schedulerConfig : any = schedulerConfig;

    onSchedulerEvents(ev) {
        console.log(ev);
    }
}

[sanid]

Will implement it with onSchedulerEvents.
Many thanks,