How do I add more than one custom field to event editor?

[Youssef Lakdime]

Hi, i took a close look at this page:https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#add-additional-fields-to-the-default-editor

The example shows how to add a dropdown list. However, how can I add multiple additional fields? For example I want one extra dropdown called 'client' , but also one extra checkbox which is a boolean 'business' and another number inputfield called 'distance'.

What part of the code should I replicate in order to add multiple fields, in that onPopupOpen() function?

So I dont want just the dropDownList in below code:

onPopupOpen(args: PopupOpenEventArgs): void {
  if (args.type === 'Editor') {
    // Create required custom elements in initial time
    if (!args.element.querySelector('.custom-field-row')) {
      let row: HTMLElement = createElement('div', {className: 'custom-field-row'});
      let formElement: HTMLElement = args.element.querySelector('.e-schedule-form');
      formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));
      let container: HTMLElement = createElement('div', {className: 'custom-field-container'});
      let inputEle: HTMLInputElement = createElement('input', {
        className: 'e-field', attrs: {name: 'Client'}
      }) as HTMLInputElement;
      container.appendChild(inputEle);
      row.appendChild(container);
      let dropDownList: DropDownList = new DropDownList({
        dataSource: [
          {text: 'Person1', value: 'Person1'},
          {text: 'Person2', value: 'Person2'},
          {text: 'Person3', value: 'Person3'},
          {text: 'Person4', value: 'Person4'}
        ],
        fields: {text: 'text', value: 'value'},
        value: (<{ [key: string]: Object }>(args.data)).Client as string,
        floatLabelType: 'Always', placeholder: 'Client'
      });
      dropDownList.appendTo(inputEle);
      inputEle.setAttribute('name', 'Client');
     
    }

  }
  }
 Copy

[Vinitha Devi Murugan]

Hi Youssef, 

 

Syncfusion Greetings. 

Based on your shared requirement, we have prepared the sample to add dropdownlist, checkbox and input filed on default window . Please refer the below sample. 

 

https://stackblitz.com/edit/angular-mjirmr-c7m5zk?file=package.json 

 

Regards, 

M.Vinitha devi