Customizing new button for exisiting in built quick info pop up

[Swati Thorali]

I want to  customize new button on the existing quick info pop named start/stop which should show the status as start/stop on quick info pop up

[Swathi Ravi]

You can achieve your requirement by using the popupOpen event of the schedule, as shared in the below snippet.

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

Api: https://ej2.syncfusion.com/angular/documentation/api/schedule#popupopen

[app.component.ts]

public onPopupOpen(args: PopupOpenEventArgs): void {

    if (args.type == 'QuickInfo' && args.target && args.target.classList.contains('e-work-cells')) {

      const formElement: HTMLElement = args.element.querySelector(

        '.e-cell-popup'

      ) as HTMLElement;

      const buttonEle: HTMLElement = createElement('button', {

        className: 'e-start-stop e-text-ellipsis e-lib e-flat',

        innerHTML: "Start/Stop"

      });

      (formElement.querySelector('.e-popup-footer') as HTMLElement).appendChild(buttonEle);

      const button: Button = new Button({

      });

      button.appendTo(buttonEle);

      button.element.onclick = (): void => {

        alert("customize here");

      };

    }

  }

[Swati Thorali]

I want the button to be customized on quick info event pop

[Swathi Ravi]

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

You can customize the button on quick info event popup like the below shared snippet.

[app.component.ts]

  public onPopupOpen(args: PopupOpenEventArgs): void {

    if (args.type == 'QuickInfo' && args.target && args.target.classList.contains('e-appointment')) {

      const formElement: HTMLElement = args.element.querySelector('.e-event-popup') as HTMLElement;

      const buttonEle: HTMLElement = createElement('button', {className: 'e-new-btn e-text-ellipsis e-lib e-flat', innerHTML: "New Button"});

      (formElement.querySelector('.e-popup-footer') as HTMLElement).prepend(buttonEle);

      const button: Button = new Button({});

      button.appendTo(buttonEle);

      button.element.onclick = (): void => {

        alert("customize here");

      };

    }

  }