Day view dynamic color change does it only for the first half an hour

[seatechdev]

I change colors of various events dynamically in my day view. However, the color change shows up only for the first half an hour of the appointment. In the attached screenshot each appointment is is 2.5 hours long however only the first half an hour is covered. If I don't use ngStyle and just leave calendar-event-inner css class then I can see the whole 2.5 hours covered but not dynamic.

<ng-template #dayviewNormalEventTemplate let-displayEvent="displayEvent">
     <div *ngIf="displayEvent.event.event_type =='Appointment'">
        <div [ngStyle]="appointmentColor" >{{displayEvent.event.title}}</div>
      </div>
         <div *ngIf="displayEvent.event.event_type =='Visit'">
        <div [ngStyle]="visitColor"> {{displayEvent.event.title}}</div>
      </div>
</ng-template>

[seatechdev]

Tried this with [dayviewNormalEventSectionTemplate]="dayviewNormalEventSectionTemplate" and followed the documentation but no success.

[twinssbc]

Since I don't know your customized css style, can't help further. I think you could first don't apply any css customization, and see what's the effective style on your element, then add your customized style, see what's get overridden.