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

Customizing new button for exisiting in built quick info pop up

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


3 Replies

SR Swathi Ravi Syncfusion Team November 18, 2022 10:29 AM

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(argsPopupOpenEventArgs): void {

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

      const formElementHTMLElement = args.element.querySelector(

        '.e-cell-popup'

      ) as HTMLElement;

      const buttonEleHTMLElement = 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 buttonButton = new Button({

      });

      button.appendTo(buttonEle);

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

        alert("customize here");

      };

    }

  }



ST Swati Thorali replied to Swathi Ravi November 22, 2022 12:23 AM

Screenshot (19).png I want the button to be customized on quick info event pop



SR Swathi Ravi Syncfusion Team November 23, 2022 02:14 AM

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(argsPopupOpenEventArgs): void {

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

      const formElementHTMLElement = args.element.querySelector('.e-event-popup'as HTMLElement;

      const buttonEleHTMLElement = 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 buttonButton = new Button({});

      button.appendTo(buttonEle);

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

        alert("customize here");

      };

    }

  }


Loader.
Live Chat Icon For mobile
Up arrow icon