e-view timeline #eventTemplate is not changing the complete background of the event

[Tim Hartog]

Hi, 

Until now we used the event rendering method for changing the background of the events in the timeline view for the resources.

We have noticed that with a larger number of resources and events the week view is reacting slow in all actions that we perform.

That is why we are changing to the #eventTemplate solution that is mentioned in the documentation.

This is giving the the whole timeline schedule a big speedboost.

There is however one thing we doesn't get solved and that is the complete background coloring of the event.

The HTML template is as follows:

<e-view
  option="TimelineWorkWeek"
  [allowVirtualScrolling]="virtualscroll"
  displayName="Werkweek">
  <ng-template #eventTemplate let-data>
    <div class='template-wrap' [style.background]="data.color">
      <div class="e-appointment e-lib e-draggable" [style.background]="data.color"></div>
      <div class="e-appointment-details" [style.background]="data.color"></div>
      <div class="subject" [style.background]="data.color">{{data.subject}}</div>
      <div class="time" [style.background]="data.color">Tijd: {{getTimeString(data.startTime)}} - {{getTimeString(data.endTime)}}</div>
      <div class="description" [style.background]="data.color"></div>
      <div class="location" [style.background]="data.color"></div>
      <div class="footer" [style.background]="data.color"></div>
    </div>
  </ng-template>
</e-view>

In the attached zip file i added a pdf with the view we currently have, the HTML template and CSS template data that we use.

Somehow we can get the complete background color right.

I hope you can help us.

Thank you and have a nice weekend,

Bob Fiering

Attachment: view_events_timeline_scheduler_2bf69ce3.zip

[Praveenkumar Narasimhanaidu]

Hi Bob, 

Greetings from Syncfusion support..! 

We have validated your reported problem “e-view timeline #eventTemplate is not changing the complete background of the event” at our end and let you know that, you can resolve this problem by using below highlighted CSS. We have also prepared a sample for your reference which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-ej2-scheduler-eventtemplate?file=app.component.ts 

App.component.css 

.schedule-event-template.e-schedule 

  .e-timeline-view 

  .e-appointment 

  .e-appointment-details { 

  padding: 0; 

  height: 100%; 

  width: 100%; 

} 

 

.schedule-event-template.e-schedule .e-timeline-view .template-wrap { 

  width: 100%; 

} 

.e-schedule .e-timeline-view .e-appointment { 

  border: 0px; 

} 

 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Praveenkumar 

[Tim Hartog]

Hello Praveenkumar,

Thank you the right template html code and css.

Almost every type of event is showing ok now.

There are only two scenarios where it is not showing completely right.

In case of a recurrence appointment the background of the icon is still showing the wrong background color and when the appointment is wider then the view and the arrows left and right appear. Also these arrows are with the wrong background color. (see attachment).

I tried to solve this with adding html 

<div class="e-recurrence-icon" [style.background]="data.color"></div>

But this did not work. Is there another way to fix the background for these two type of events?

Thank you for helping me with this issue.

Regards,

Bob

Attachment: wrongview_recurrence_and_dayevent_735198fd.zip

[Hareesh Balasubramanian]

Hi Bob, 

  

Thanks for the update. 

  

We have modified our previously updated sample based on your shared query “need to change the color for the recurrence icon”. And in that, we have removed those default icon divs and dynamically rendered that div inside the eventTemplate property of our Scheduler, which can be viewed from the following link. 

  

Sample: https://stackblitz.com/edit/angular-ej2-scheduler-eventtemplate-xfxl5k?file=app.component.ts 

  

          <ng-template #eventTemplate let-data> 

            <div class="template-wrap" style="display: flex" [style.background]="data.color"> 

              <div> 

                <div class="subject"> 

                  {{data.Subject}} 

                </div> 

                <div class="time"> 

                  Tijd: {{getTimeString(data.StartTime)}} - 

                  {{getTimeString(data.EndTime)}} 

                </div> 

              </div> 

              <ng-container *ngIf="(data.RecurrenceRule && data.RecurrenceException); then loggedIn; else loggedOut"> 

              </ng-container> 

              <ng-template #loggedIn> 

                <div class="customIcon"> 

                  <div class="e-icons e-recurrence-edit-icon"></div> 

                </div> 

              </ng-template> 

              <ng-template #loggedOut> 

                <div *ngIf="(data.RecurrenceRule)" class=" customIcon"> 

                  <div class="e-icons e-recurrence-icon"></div> 

                </div> 

              </ng-template> 

            </div> 

          </ng-template> 

  

.e-appointment-details .e-indicator.e-icons.e-right-icon, 

.e-appointment-details .e-indicator.e-icons.e-left-icon, 

.e-appointment-details .e-icons.e-recurrence-edit-icon, 

.e-appointment-details .e-icons.e-recurrence-icon { 

  display: none; 

} 

.customIcon .e-icons.e-recurrence-edit-icon, 

.customIcon .e-icons.e-recurrence-icon { 

  display: block; 

} 

  

Kindly try the above solution and get back to us if you need any further assistance. 

  

Regards, 

Hareesh 

[Tim Hartog]

Hello Hareesh,

Your solution works. 

Thank you very much!

Regards,

Bob

[Nevitha Ravi]

Hi Bob, 

Your are most welcome. We are glad that our solution helped you, please get back to us for further assistance. 

Regards, 

Nevitha