Editor window customizing

[marwa]

hello, i would like to says thank you for you angular schedular it has awsome features but i am having troubles with costumizing editor window so when i click on the save button it dosen't work i would like to know how can i set my function when i click on the save button in editor window,

i followed the documentation i even tried the same exemples but none of them works with me.

i would like to mention that the save button in the quick popup works and when i add a new event its displayed correctlly on the schedular

any suggestion please !

[Karthigeyan Krishnamurthi]

Hi Marwa, 

 

Syncfusion greetings. 

 

We suspect that editor is not customized properly which could be the cause. Kindly refer the below links to customize the editor using template option. 

https://ej2.syncfusion.com/angular/demos/#/material/schedule/editor-template 

https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/?no-cache=1#customizing-event-editor-using-template 

 

Regards, 

Karthi 

[marwa]

thank you for your quick response,

 but i tries those examples but it didn't work for me here my code could help me please

Attachment: 1_ea36f327.zip

[Karthigeyan Krishnamurthi]

Hi Marwa, 

 

Thanks for the update. 

 

In your sample, resource option is used but in editor template, resource field is not added which is the cause. We have prepared the below sample and refer the UG link. 

https://stackblitz.com/edit/angular-olq7bs-moeq7i?file=app.component.ts 

https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#how-to-add-resource-options-within-editor-template 

 

<e-resources> 

      <e-resource field="OwnerId" title="Owner" name="Owners" [dataSource]="ownerDataSource" textField="text" idField="id" colorField="color"> 

      </e-resource> 

    </e-resources> 

 

<tr> 

                        <td class="e-textlabel">Owner</td> 

                        <td colspan="4"> 

                            <input type="text" id="OwnerId" name="OwnerId" class="e-field" style="width: 100%" /> 

                        </td> 

                    </tr> 

onPopupOpen(args: PopupOpenEventArgs): void { 

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

      let startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement; 

      if (!startElement.classList.contains('e-datetimepicker')) { 

        new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement); 

      } 

      let endElement: HTMLInputElement = args.element.querySelector('#EndTime') as HTMLInputElement; 

      if (!endElement.classList.contains('e-datetimepicker')) { 

        new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement); 

      } 

      let processElement: HTMLInputElement = args.element.querySelector('#OwnerId'); 

      if (!processElement.classList.contains('e-multiselect')) { 

        let multiSelectObject: MultiSelect = new MultiSelect({ 

          placeholder: 'Choose a owner', 

          fields: { text: 'text', value: 'id' }, 

          dataSource: <any>this.ownerDataSource 

        }); 

        multiSelectObject.appendTo(processElement); 

      } 

    } 

  } 

 

 

 

Regards, 

Karthi