Trying to add more fields into an event popup

[Guillaume]

Hello,

I'm using Angular 11 and Schedule component, I'm trying to add more information into the popup box of an event.

Something like this : 

All the fields are of course included in my dataSource.

I have see your popupOpen documentation and I don't know how this works without real example.

Thanks for your help, regards

[Praveenkumar Narasimhanaidu]

Hi Guillaume, 

Greetings from Syncfusion support..! 

We have validated your requirement “add more fields into an event popup” and prepared sample based on your requirement using scheduler popupOpen event. Sample can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-scheduler-event-popup-additional-fields?file=app.component.ts 

App.component.ts 

onPopupOpen(args) { 

    if (args.type === "QuickInfo") { 

      if ( 

        !args.element.querySelector(".status-row") && 

        args.target.classList.contains("e-appointment") 

      ) { 

        let row: HTMLElement = createElement("div", { 

          className: "status-row", 

          styles: "padding-top: 16px;font-size: 14px; display: flex", 

          innerHTML: 

            "<span class='e-icons e-status'></span><span class='e-status-text'>" + 

            args.data.Status + 

            "</span>" 

        }); 

        let contentElement: HTMLElement = <HTMLElement>( 

          args.element.querySelector(".e-popup-content") 

        ); 

        contentElement.append(row); 

      } 

    } 

Also you can use quick info template to customize the quick popup window, please refer to the following UG and SB. 

 

UG: https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#customizing-quick-popups 

SB: https://ej2.syncfusion.com/angular/demos/#/material/schedule/quick-info-template 

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

Regards, 

Praveenkumar. 

[Guillaume]

Great, that's exactly what I was looking for. Thanks a lot.

Best regards, Guillaume

[Nevitha Ravi]

Hi Guillaume, 

You are most welcome..! please get back to us if you need any further assistance. 

Regards, 

Nevitha