When I scroll to the bottom of Angular Syncfusion Scheduler it shows blank

Question

I am using Angular Syncfusion Scheduler to display a list of games. I am currently displaying around 700 games and have configured to use virtual scrolling.

This is how my configuration looks like:

<div>
            <ng-template #cellHeaderTemplate let-data>
              <div class="date-text">header</div>
            </ng-template>
            <ejs-schedule #scheduleObj
              width="100%"
              [height]="schedulerHeight"
              cssClass='virtual-scrolling'
              allowDragAndDrop="true"
              startHour = "07:00"
              [selectedDate]="selectedDate"
              [group]="group"
              [timeScale]="timeScale"
              [eventSettings]="eventSettings"
              (eventRendered)="onEventRendered($event)"
              (navigating)="onnavigating($event)"
              (actionBegin)="onActionBegin($event)"
              (actionComplete)="onActionComplete($event)"
              (popupOpen)="onPopupOpen($event)"
              (dragStart)='onDragStart($event)'
              (dragStop)='onDragStop($event)'
              >
              <e-resources>
                <e-resource field="ComplexId" title="All Complexes" [dataSource]="complexDataSource"
                  [allowMultiple]="allowMultiple" name="Complexes" textField="complexName" idField="complexId">
                </e-resource>
                <e-resource field="VenueId" title="Complex Field" [dataSource]="categoryDataSource"
                  [allowMultiple]="allowMultiple" name="Fields" textField="fieldName" idField="fieldId" groupIDField="complexId"
                  colorField='#FF0000'
                  startHourField='startHour'
                  endHourField='endHour'
                 >
                </e-resource>
              </e-resources>
              <e-views>
                <e-view option="TimelineDay" allowVirtualScrolling="true"></e-view>
                <!-- <e-view option="TimelineDay"></e-view> -->
              </e-views>
            </ejs-schedule>
            <ejs-contextmenu #menuObj cssClass='schedule-context-menu' target='.e-schedule'
            [items]='menuItems'
            (beforeOpen)='onContextMenuBeforeOpen($event)'
    (select)='onMenuItemSelect($event)'></ejs-contextmenu>
            <!-- </div> -->
          </div>

It works fine and is way more performant compared to loading all the data without using the virtual scroll feature. Buut, when I scroll to the bottom of the scheduler, I can see that I am allowed to scroll more than the scheduler itself leaving me with a blank space.

Answer 1

We have prepared a sample based on your shared code snippets and in the virtual scrolling functionality is properly working at our side and it can be viewed from the below link.

Sample: https://stackblitz.com/edit/ej2-angular-schedule-virtual-scrolling-sample-4pny8v?file=app.component.ts

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

Regards,
Hareesh