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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customize Editor Window

Thread ID:

Created:

Updated:

Platform:

Replies:

150601 Jan 13,2020 11:22 AM UTC Jan 20,2020 06:50 AM UTC Angular - EJ 2 10
loading
Tags: Schedule
Parthkumar Kakadiya
Asked On January 13, 2020 11:22 AM UTC

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
Replied On January 13, 2020 11:24 AM UTC

Hi 

Html and Ts files.

Attachment: Archive_4fb542a2.zip

Vengatesh Maniraj [Syncfusion]
Replied On 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]; 
      dialogObj.hide(); 
      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"> 
                <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> 


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


Kindly try the above and revert us for further assistance. 

Regards, 
Vengatesh  


Parthkumar Kakadiya
Replied On 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.

Regards, 
Parth 

Parthkumar Kakadiya
Replied On 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.

regards,
Parth 

Vengatesh Maniraj [Syncfusion]
Replied On 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.   

Regards, 
Vengatesh 


Parthkumar Kakadiya
Replied On 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:



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
Replied On January 17, 2020 09:05 AM UTC

Hi, 

Nobody willing to help?

Regards,
parth 

Hareesh Balasubramanian [Syncfusion]
Replied On January 17, 2020 12:44 PM UTC

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, 


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

Regards, 
Hareesh 


Parthkumar Kakadiya
Replied On January 17, 2020 01:14 PM UTC

Hi Hareesh,


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


Have a nice day. 

Regards,
Parth

Karthigeyan Krishnamurthi [Syncfusion]
Replied On January 20, 2020 06:50 AM UTC

Hi Parth, 
 
Thanks for the update. 
 
We will provide the response in 150728, kindly have a follow up with it. 
 
Regards, 
Karthi 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon