Adding Custom Fields to 'Edit Event' Window

Question

I'm having trouble changing which fields can be viewed/edited on the 'edit event' sub window.

Just a little background about my project: I have events/appointments (Exams in my case) which I'm trying to schedule into Rooms and add an examinator to each event. I figured room should be resources and the examinator attributes of an appointment. Now, I want to show the name of the examinator at the event. Both directly in the calendar view but also when I click to edit the event. However, I can't figure out how to do so.

There is an example on this page to add custom fields, but the example doesn't show how to show it on the application side. (The example only added it to the data object but doesn't do anything with it as far as I can understand).

So how would I go about adding a custom field to appointments which I would be able to edited through the application side?

Thanks for your time.

Vengatesh Maniraj · Answer

Hi Christien, 

Greetings from Syncfusion Support. 

You can add the custom field to an appointment and the same can be edited in the editor window by making use of popupOpen event. We have demonstrated the sample for this requirement which is available in below link. 






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'); 
            } 
        }  

Output: 
  

Sample: https://ej2.syncfusion.com/angular/demos/#/material/schedule/editor-custom-field 

Kindly check the above sample and get back to us if you would require any further assistance. 

Regards, 
Vengatesh