Customize Editor Window

[Parthkumar Kakadiya]

Hi,

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. 

Regards,

parth 

Attachment: calendar.component.ts_f5bd956f.zip

[Parthkumar Kakadiya]

Hi 

Html and Ts files.

Attachment: Archive_4fb542a2.zip

[Vengatesh Maniraj]

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

      dialogObj.hide(); 

      let currentAction = args.target.classList.contains("e-work-cells") ? "Add" : "Save"; 

      this.scheduleObj.openEditor(args.data, currentAction, true); 

    } 

  } 

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

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"> 

                <tbody> 

                    <tr> 

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

                    </tr> 

                    <tr> 

                        <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}}'> 

                            </ejs-dropdownlist> 

                        </td> 

                    </tr> 

                    <tr> 

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

                            </ejs-datetimepicker> 

                        </td> 

                    </tr> 

                    <tr> 

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

                    </tr> 

                    <tr> 

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

                        <td colspan="4"> 

                            <textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" 

                                value="{{data.Description}}" 

                                style="width: 100%; height: 60px !important; resize: vertical"></textarea> 

                        </td> 

                    </tr> 

                </tbody> 

            </table> 

        </ng-template> 

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

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; 

                container.appendChild(inputEle); 

                row.appendChild(container); 

                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' 

                }); 

                drowDownList.appendTo(inputEle); 

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

            } 

        } 

    } 

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

popupOpen: https://ej2.syncfusion.com/angular/documentation/api/schedule/#popupopen 

Kindly try the above and revert us for further assistance. 

Regards, 

Vengatesh  

[Parthkumar Kakadiya]

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.

Regards, 

Parth 

[Parthkumar Kakadiya]

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.

regards,

Parth 

[Vengatesh Maniraj]

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.   

Regards, 

Vengatesh 

[Parthkumar Kakadiya]

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. 

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

  

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:

I hope my explanation is clear to understand for you. Again I am sorry for your inconvenience. Thanks again for your support and understanding. 

Regards,

Parth 

[Parthkumar Kakadiya]

Hi, 

Nobody willing to help?

Regards,

parth 

[Hareesh Balasubramanian]

Hi Parthkumar, 

Sorry for the delay post. 

Based on your requirement we have prepared a sample using editorTemplate and it can be viewed from the following link, 

Sample: https://stackblitz.com/edit/angular-wigqlt-akzvvd?file=app.component.ts  

Kindly try the above sample, if you have any concerns please revert us back for further assistance. 

Regards, 

Hareesh 

[Parthkumar Kakadiya]

Hi Hareesh,

Thanks a lot for your solution. It's working like a charm... 

Could you also help me to my this problem : https://www.syncfusion.com/forums/150728/how-to-highlight-the-cell-from-date-range

Have a nice day. 

Regards,

Parth

[Karthigeyan Krishnamurthi]

Hi Parth, 

 

Thanks for the update. 

 

We will provide the response in 150728, kindly have a follow up with it. 

 

Regards, 

Karthi