How to change scheduler editor template header and footer ?

[Tümer]

 Hi,
 I needed to change scheduler dialog. I used editortemplate but i couldn't find to change it's header and footer. I would like to add my own button with it's style and change the header. How can i do it ?

Bests,
Tümer

[Ravikumar Venkatesan]

Hi Tumer, 

Greetings from Syncfusion support. 

Based on your requirement we have prepared the sample with custom header by using header property and footer by using buttons property of the Dialog control inside the Schedule’s popupOpen event like below and the same made in the sample below. 

 public onPopupOpen(args: PopupOpenEventArgs): void { 

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

      let buttons; 

      // Dialog Object 

      let dialogObj: Dialog = (args.element as EJ2Instance).ej2_instances[0] as Dialog; 

 

      // Header customization 

      this.header = dialogObj.header; 

      dialogObj.header = "<div>Custom editor template</div>"; 

 

      this.currentEvent = this.scheduleObj.getEventDetails(args.target); 

 

      // Footer customization 

      buttons = [{ 

        buttonModel: { content: 'EDIT', isPrimary: true }, click: this.editEvent.bind(this) 

      }, { 

        buttonModel: { content: 'DELETE', cssClass: 'e-event-delete' }, click: this.eventDelete.bind(this) 

      }]; 

      dialogObj.buttons = buttons; 

      dialogObj.dataBind(); 

 

      let statusElement: HTMLInputElement = args.element.querySelector('#EventType') as HTMLInputElement; 

      if (!statusElement.classList.contains('e-dropdownlist')) { 

        let dropDownListObject: DropDownList = new DropDownList({ 

          placeholder: 'Choose status', value: statusElement.value, 

          dataSource: ['New', 'Requested', 'Confirmed'] 

        }); 

        dropDownListObject.appendTo(statusElement); 

        statusElement.setAttribute('name', 'EventType'); 

      } 

 

      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); 

      } 

    } 

  } 

Sample: https://stackblitz.com/edit/angular-schedule-customize-header-and-footer-qndctn?file=app.component.ts 

Kindly try the above and let us know for further assistance on this. 

API link (popupOpen event)       : https://ej2.syncfusion.com/angular/documentation/api/schedule/#popupopen 

API link (popupClose event)       : https://ej2.syncfusion.com/angular/documentation/api/schedule/#popupclose 

API link (Dialog buttons)              : https://ej2.syncfusion.com/angular/documentation/api/dialog/#buttons 

API link (Dialog header)                : https://ej2.syncfusion.com/angular/documentation/api/dialog/#header 

Regards, 

Ravikumar Venkatesan