Event preview cut on bottom

Hello,


We're customizing #quickInfoTemplatesContent and #editorTemplate in order to fit our event's model, but when clicking on event at the bottom of calendar, the template is cut: 



(https://ej2.syncfusion.com/angular/demos/#/bootstrap5/schedule/quick-info-template)



Does the templates have a max height or something to avoid these situations?


Thanks 


1 Reply 1 reply marked as answer

RM Ruksar Moosa Sait Syncfusion Team November 29, 2022 09:56 AM UTC

Hi Carla,


Refresh the position of the QuickInfo popup on cellClick and eventClick events of the scheduler like the below code to overcome the reported issue.


[app.component.html]

<ejs-schedule #scheduleObj width='100%' height='600px' [selectedDate]="selectedDate" [eventSettings]="eventSettings"

  (cellClick)="onClick($event)" (eventClick)="onClick($event)">


[app.component.ts]

public onClick(argsEventClickArgs): void {

    if (!this.eventAdded) {

      let popupInstance = (document.querySelector(".e-quick-popup-wrapper"as any).ej2_instances[0];

      popupInstance.open = () => {

        popupInstance.refreshPosition();

      };

      this.eventAdded = true;

    }

  }


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


Output:

Table

Description automatically generated with low confidence


Refer the below documentation for more reference.

https://ej2.syncfusion.com/angular/documentation/schedule/frequently-asked-questions/#quickinfotemplate-at-bottom


Regards,

Ruksar Moosa Sait


Marked as answer
Loader.
Up arrow icon