Hi Djordje,
Sample: https://stackblitz.com/edit/ej2-angular-schedule-event-template-with-accordion-item?file=src%2Fapp%2Fapp.component.html
API:
https://ej2.syncfusion.com/angular/documentation/api/accordion#datasource
https://ej2.syncfusion.com/angular/documentation/api/accordion#headertemplate
https://ej2.syncfusion.com/angular/documentation/api/accordion#itemtemplate
When you resize the
window, the Schedule appointments will re-render to fit the available page
width. So, on each appointment re-render, multiple accordions are re-rendered
inside the event template with Listbox and it seems like disappearing. You can
render the accordion inside the event template without using the list box, as
shown in the below code snippet.
[app.component.html]
|
<ejs-schedule cssClass="schedule-cell-dimension" [eventSettings]="eventSettings" [rowAutoHeight]="true"
[allowDragAndDrop]="false" [allowMultiCellSelection]="false" (eventRendered)="onEventRendered($event)">
<e-views>
<e-view option="Month">
<ng-template #eventTemplate let-eventData>
<div class="accordion-container" *ngIf="eventData.workouts != null">
<ejs-accordion [dataSource]="eventData.workouts">
<ng-template #headerTemplate let-data>{{data.name}}</ng-template>
<ng-template #itemTemplate let-data>{{data.uid}}</ng-template>
</ejs-accordion>
</div>
<div *ngIf="eventData.workouts == null">
No records found.
</div>
</ng-template>
</e-view>
</e-views>
</ejs-schedule>
|
[app.component.css]
|
.accordion-container {
overflow-y: auto;
width: 100%;
}
|
Regards,
Ravikumar Venkatesan
