Customize Editor Window

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

Reply | Reply with quote

Parthkumar Kakadiya

Replied On January 13, 2020 11:24 AM UTC

Hi

Html and Ts files.

Attachment: Archive_4fb542a2.zip

Reply | Reply with quote

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

}

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>

<tbody>

<tr>

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

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

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

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

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

<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

Reply | Reply with quote

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

Reply | Reply with quote

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

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

Reply | Reply with quote

Parthkumar Kakadiya

Replied On January 17, 2020 09:05 AM UTC

Hi,

Nobody willing to help?

Regards,

parth

Reply | Reply with quote

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,

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

Reply | Reply with quote

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

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

Reply | Reply with quote

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

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US