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

Customize Editor Window


I am working with Angular 8 application. 

1. I would like to open Editor window on One click.
2. I would like to add many extra fields on editor window with start and Endtime fields. 
3. Also i would like to display all the information on the view and the edit part. Can some body help me with this. 

I have achieved 1. with such code: 

public onPopupOpen(args: PopupOpenEventArgs): void {
if(args.type == 'QuickInfo') {
let cellData: CellClickEventArgs = this.scheduleObj.getCellDetails(args.target);
let eventData: { [key: string]: Object } = {
StartTime: cellData.startTime,
EndTime: cellData.endTime,
IsAllDay: cellData.isAllDay,
let slides = document.getElementsByClassName('e-cell-popup');
for (let i = 0; i < slides.length; i++) {
const slide = slides[i] as HTMLElement;
slide.style.display = "none";
this.scheduleObj.openEditor(eventData, 'Add', true);
} else if(args.type == 'Editor'){
Now On I would like to show all information to appointment detail and edit section. 

I have attached the Image of the modal and html and ts file. 
Please help me with my requirement. 


Attachment: calendar.component.ts_f5bd956f.zip

10 Replies

PK Parthkumar Kakadiya January 13, 2020 11:24 AM UTC


Html and Ts files.

Attachment: Archive_4fb542a2.zip

VM Vengatesh Maniraj Syncfusion Team January 14, 2020 04:56 AM UTC

Hi Parthkumar, 

Greetings from Syncfusion Support. 

Q1: We can achieve this by hide the quick dialog and open the editor window in popupOpen event like below, 
public onPopupOpen(args: PopupOpenEventArgs): void { 
    if (args.type == 'QuickInfo') { 
      let dialogObj = args.element.ej2_instances[0]; 
      let currentAction = args.target.classList.contains("e-work-cells") ? "Add" : "Save"; 
      this.scheduleObj.openEditor(args.data, currentAction, true); 

Q2: We can achieve this by using editorTemplate option. By using this we can add custom fields with start and end times. 
<ng-template #editorTemplate let-data> 
            <table *ngIf="data != undefined" class="custom-event-editor" width="100%" cellpadding="5"> 
                        <td class="e-textlabel">Summary</td> 
                        <td colspan="4"> 
                            <input id="Subject" class="e-field e-input" type="text" value="{{data.Subject}}" 
                                name="Subject" style="width: 100%" /> 
                        <td class="e-textlabel">Status</td> 
                        <td colspan="4"> 
                            <ejs-dropdownlist id='Status' class="e-field" data-name="Status" placeholder='Choose Status' 
                                [dataSource]='StatusData' [fields]='statusFields' value='{{data.Status}}'> 
                        <td class="e-textlabel">From</td> 
                        <td colspan="4"> 
                            <ejs-datetimepicker id="StartTime" class="e-field" data-name="StartTime" 
                                format="M/dd/yy h:mm a" [value]="dateParser(data.startTime || data.StartTime)"> 
                        <td class="e-textlabel">To</td> 
                        <td colspan="4"> 
                            <ejs-datetimepicker id="EndTime" class="e-field" data-name="EndTime" format="M/dd/yy h:mm a" 
                                [value]='dateParser(data.endTime || data.EndTime)'></ejs-datetimepicker> 
                        <td class="e-textlabel">Reason</td> 
                        <td colspan="4"> 
                            <textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" 
                                style="width: 100%; height: 60px !important; resize: vertical"></textarea> 

Q3: By using the popupOpen event we can display all the information in the edit part like below, 
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 = <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: 'EventType' } 
                }) as HTMLInputElement; 
                let drowDownList: DropDownList = new DropDownList({ 
                    dataSource: [ 
                        { text: 'Public Event', value: 'public-event' }, 
                        { text: 'Maintenance', value: 'maintenance' }, 
                        { text: 'Commercial Event', value: 'commercial-event' }, 
                        { text: 'Family Event', value: 'family-event' } 
                    fields: { text: 'text', value: 'value' }, 
                    value: (args.data as { [key: string]: Object }).EventType as string, 
                    floatLabelType: 'Always', placeholder: 'Event Type' 
                inputEle.setAttribute('name', 'EventType'); 

Kindly try the above and revert us for further assistance. 


PK Parthkumar Kakadiya January 14, 2020 09:15 AM UTC

Hi Maniraj,

Thanks a lot for your support.

Q1. In this your solution worked fine.

Also One small query, Is it possible that One click on cell one Editor window and one click on Appointment open Appointment detail popup?

Thanks again.


PK Parthkumar Kakadiya January 14, 2020 03:06 PM UTC

Hi Maniraj,

Thanks for your support.

In Schedular, 

1, Would it be possible to add more than one appointment with the One Editor Window?

2, I am struggling to change the day of the customize editor window. I would like to add appointment for more than one day. I change data for the day and click outside the input field, it automatically reset to the default day.

In your given example also behaving same.

Thanks and have a nice day.


VM Vengatesh Maniraj Syncfusion Team January 15, 2020 07:11 AM UTC

Hi Parthkumar, 

Thanks for the update. 

Q1: In previously updated sample, we have provided the support to open the editor window in cell click(single click) and when we click on the Appointment, the Appointment details are displayed in the same window. So can you please share us more details about your requirement like image or video. 

Q2: We have validated the reported case at our end and currently it’s not possible. 

Q3: Sorry for the inconvenience. Once you confirm the Q1, it could be very helpful to us to provide easiest way to achieve this requirement too. 

We are awaiting to serve you better.   


PK Parthkumar Kakadiya January 15, 2020 08:58 AM UTC

Hi Vengatesh,

Thanks again for your support. 

So Q1, Q2 and Q3 is working fine as per your given example. 

let's start with some problem i have and some clear requirements One by one.

1.  In customize editor window, How could i add appointment for more than one day.

I have attached image below. I change the date and click outside the date input it automatically set to default date. Same behaviour in your given example. 


2. Once i get the date changed I would like to see the appointment for more than one day. 
like below give image: 

select different date:

display appointment in schedule like this: