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.
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