We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Schedule with listbox of accordions as event template

I am trying to create schedule with listbox of accordions as event template so i can have ordering between events  in the month view. But i have problem with listbox disappearing on window resize.

Here is stackblitz with example project https://angular-ivy-hargvh.stackblitz.io.

1 Reply

RV Ravikumar Venkatesan Syncfusion Team January 18, 2023 06:48 PM UTC

Hi Djordje,

Sample: https://stackblitz.com/edit/ej2-angular-schedule-event-template-with-accordion-item?file=src%2Fapp%2Fapp.component.html





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.


<ejs-schedule cssClass="schedule-cell-dimension" [eventSettings]="eventSettings" [rowAutoHeight]="true"

  [allowDragAndDrop]="false" [allowMultiCellSelection]="false" (eventRendered)="onEventRendered($event)">


    <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>



        <div *ngIf="eventData.workouts == null">

          No records found.







.accordion-container {





Ravikumar Venkatesan

Live Chat Icon For mobile
Up arrow icon