Hi Eric,
We have checked the sample and we let you know that you have used the event template and applied the color to the template wrapper. So that the event color is not applied for the whole appointment. So we suggest to use the eventRendered event to achieve your requirement. Please find the sample below.
function
applyCategoryColor(args, currentView) {
var categoryColor = args.data.eventcolor;
if (!args.element || !categoryColor) {
return;
}
if (currentView === 'Agenda') {
(args.element.firstChild).style.borderLeftColor = categoryColor;
} else {
args.element.style.backgroundColor = categoryColor;
}
}
Modified Sample: https://stackblitz.com/edit/otywyh-beouwy?file=index.js
Output:
For more references, please visit to the below link.
https://ej2.syncfusion.com/javascript/documentation/schedule/appointments/#using-eventrendered-event
Kindly check the modified sample and let us know if this meets your requirement.
Regards,
Ruksar Moosa Sait