Add image on bottom of events

[Arturo Martinez]

How can i add a image and text in the botom part of the events on the calendar, like when the time appears on the event in sheduler

[Swathi Ravi]

Hi Arturo,

Thank you for reaching out.

You can achieve your requirement by utilizing the scheduler's eventSettingTemplate template, as shown in the snippets below.

Html:

<div class="control-section">

  <div class="col-lg-12 content-wrapper">

    <ejs-schedule #scheduleObj width='100%' cssClass='timeline-resource-grouping' height='650px'

      [selectedDate]="selectedDate" [group]="group" [workDays]="workDays" [eventSettings]="eventSettings">

      <ng-template #eventSettingsTemplate let-data>

        <div class='template-wrap'>

            <div class="subject">{{data.Subject}}</div>

            <div class="some-image"><img class="image" src="https://ej2.syncfusion.com/angular/demos/assets/schedule/images/margaret.png" /></div>

        </div>

    </ng-template>

    </ejs-schedule>

  </div>

</div>

CSS:

.image {

  width: 34px;

  height: 21px;

  background-size: 45px;

  background-repeat: no-repeat;

}

Sample: https://stackblitz.com/edit/angular-sqbzr1-zpeekd?file=src%2Fapp.component.css,src%2Fapp.component.html
UG: https://ej2.syncfusion.com/angular/documentation/schedule/appointments#using-template
Demo: https://ej2.syncfusion.com/angular/demos/#/fluent2/schedule/events-template

Regards,

Swathi