Adding a switch button to a scheduler default view

[Misha Levin]

Hello,

Currently I am using default functionality of scheduler and my event looks like the following:

What I am trying to do is to add a button switch to the template.

While I was somewhat able to add this button switch to the template through onPopupOpen function I was not able to add it when the event is readonly. Could you please guide me in the right direction

[Ruksar Moosa Sait]

Hi Misha,

You can add the Switch button to the QuickInfo popup and bind to the onPopupOpen method like the below code snippet.

onPopupOpen(args: PopupOpenEventArgs): void {

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

      // Create switch element in the initial time

      if (!args.element.querySelector('.custom-switch-button')) {

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

          className:
'custom-switch-button',

        });

        let
formElement: HTMLElement =

          args.element.querySelector('.e-popup-header');

        formElement.firstChild.insertBefore(

          row,

          args.element.querySelector('.e-edit')

        );

        let
container: HTMLElement = createElement('div', {

          className:
'custom-switch-container',

        }) as
HTMLElement;

        let
inputEle: HTMLInputElement = createElement('input', {

          className:
'e-field',

          attrs: { name:
'EventType' },

        }) as
HTMLInputElement;

        container.appendChild(inputEle);

        row.appendChild(container);

        let
switchObj: Switch = new
Switch({

          name:
'hotspot',

          value:
'USB tethering',

          checked:
true,

        });

        switchObj.appendTo(inputEle);

        inputEle.setAttribute('name', 'hotspot');

      }

    }

  }

Also the Switch button works fine when the events are set to IsReadonly: true like the below image.

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

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait