We're using custom form to edit the events. How can I customize the toolbar to remove/customize the handler of the edit and delete button besides the close button?
I'm looking at this documentation: https://www.bryntum.com/docs/calendar/#Calendar/feature/EventTooltip#config-tooltip but there's no details on toolbar configuration.
Hello.
You can use tools config for that:
features : {
eventTooltip : {
tooltip : {
tools : {
test : {
cls : 'b-icon-add',
handler : () => console.log('test'),
tooltip : 'Test'
}
}
}
}
}This class https://www.bryntum.com/docs/calendar/#Calendar/widget/EventTip extends Tooltip class and thus should point to the tools config, but there is a problem in current doc. We will fix this for next release.
That is how you can add a new one. You can also override existing, provided tools
features : {
eventTooltip : {
tooltip : {
tools : {
edit : {
handler : () => console.log('Do the editing our way')
}
}
}
}
}
Config objects are merged, so you can override the bits you want to override and leave the bits you like.
There's no documented way to get current active event from the tooltip, so I'd recommend to configure tooltip feature instead:
features : {
eventTooltip : {
tooltip : {
tools : {
edit : {
handler : function() {
const id = calendar.features.eventTooltip.tooltip.element.querySelector('.active-event').dataset.id;
console.log(calendar.eventStore.getById(id).name);
}
}
}
},
renderer : data => `<div class="active-event" syle="display:none;" data-id="${data.eventRecord.id}"></div><dl>
<dt>Assigned to:</dt>
<dd>
${data.eventRecord.resource.name}
</dd>
</dl>
`
}
}At the moment tools trigger events on the tooltip instance, which are handled by the tooltip feature, which knows for which event tooltip is currently shown, i.e. calendar.features.eventTooltip.activeEvent. But I wouldn't recommend to use it because this API might change silently in future.
I opened a feature request to improve API: https://github.com/bryntum/support/issues/1259
Actually there's a simpler solution that doesn't require renderer:
features : {
eventTooltip : {
tooltip : {
tools : {
edit : {
handler : function() {
const id = window.calendar.features.eventTooltip.tooltip.activeTarget.dataset.eventId;
console.log(calendar.eventStore.getById(id).name);
}
}
}
}
}
}