customizing event buttons editor window in syncfusion scheduler with angular 8

Question

I'm working on angular 8 application which integrates syncfusion scheduler. I would like to customize the editor window that shows after double click in cell scheduler, but I'm getting errors. I tried the documentation examples but none of them worked for me please help

I tried the examples provided in the documentation

<div class="control-section">
    <div class="drag-sample-wrapper">
        <div class="schedule-container">
            <!--The calendar-->
            <ejs-schedule #scheduleObj cssClass='schedule-block-events' width='100%' height='500px' [group]="group"
                [currentView]="currentView" [selectedDate]="selectedDate" [eventSettings]="eventSettings">
                <e-resources>
                    <e-resource ffield='EmployeeId' title='Employees' name='Employee' [dataSource]='employeeDataSource'
                        [allowMultiple]='allowMultiple' textField='Text' idField='Id' colorField='Color'
                        name="Employee">
                    </e-resource>
                </e-resources>
                <!--Ressources Template-->
                <ng-template #resourceHeaderTemplate let-data>
                    <div class="template-wrap">

                        <div class="name">{{getEmployeeName(data)}}</div>
                        <div class="designation">{{getEmployeeDesignation(data)}}</div>
                        <div class="leaveBalance">{{getEmployeeLeaveBalance(data)}}</div>
                        <div class="remainingleaveBalance">{{getEmployeeRemainingLeaveBalance(data)}}</div>
                    </div>
                </ng-template>

                <!--The popup to fill leave request-->
                <ng-template #editorTemplate let-data>
                    <table class=custom-event-editor width="100%" cellpadding="5">
                        <tbody>
                            <tr>
                                <td class="e-textlabel">De:</td>
                                <td colspan="4">
                                    <ejs-datetimepicker placeholder='Select  start a date and time' [value]='date'>
                                    </ejs-datetimepicker>
                                </td>
                            </tr>
                            <tr>
                                <td class="e-textlabel">A:</td>
                                <td colspan="4">
                                    <ejs-datetimepicker placeholder='Select end a date and time' [value]='date'>
                                    </ejs-datetimepicker>
                                </td>
                            </tr>
                            <tr>
                                <td class="e-textlabel">Type de congé:</td>
                                <td colspan="4">
                                    <ejs-dropdownlist id='ddlelement' [dataSource]='TypesData'></ejs-dropdownlist>
                                </td>
                            </tr>
                            <tr>
                                <td class="e-textlabel">Commentaire</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>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </ng-template>

                <!--Quick  info content template-->
                <ng-template #quickInfoTemplatesContent let-data>
                    <div class="e-popup-content">
                        <table class="e-popup-table">
                            <tbody>
                                <tr>
                                    <td>
                                        <form class="e-schedule-form e-lib e-formvalidator" onsubmit="return false;"
                                            novalidate="">
                                            <span class="e-input-group e-control-wrapper">
                                                <input class="e-subject e-field e-input" type="text" name="Subject"
                                                    placeholder="Ajouter un titre" aria-placeholder="Ajouter un titre">
                                            </span>
                                        </form>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="e-date-time">
                                            <div class="e-date-time-icon e-icons"></div>
                                            <div class="e-date-time-details e-text-ellipsis">{{date}}</div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </ng-template>

                <!--Quick  info Header template-->
                <ng-template #quickInfoTemplatesFooter let-data>
                    <div class="e-popup-footer">
                        <button class="e-event-details e-text-ellipsis e-control e-btn e-lib e-flat"
                            title="More Details">Plus Details</button>
                        <button class="e-event-create e-text-ellipsis e-control e-btn e-lib e-flat e-primary"
                            title="Save">Enregistrer</button>

                    </div>
                </ng-template>
                <!-- Views-->
                <e-views>
                    <e-view option="TimelineMonth" [allowVirtualScrolling]="virtualscroll">
                        <ng-template #eventTemplate let-data>
                            <div class='template-wrap' [style.background]="data.PrimaryColor">

                            </div>
                        </ng-template>
                    </e-view>
                </e-views>
            </ejs-schedule>
        </div>
    </div>
</div>

ERROR TypeError: Cannot read property 'GroupID' of undefined

Answer 1

In your code example, resource option is used and editor template may not included that field which could the cause. Kindly refer the below link and try at your end. https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/?no-cache=1#how-to-add-resource-options-within-editor-template

<e-resources>
<e-resource field="OwnerId" title="Owner" name="Owners" [dataSource]="ownerDataSource" textField="text" idField="id" colorField="color">
</e-resource>

<tr>
 <td class="e-textlabel">Owner</td>
        <td colspan="4">
               <input type="text" id="OwnerId" name="OwnerId" class="e-field" style="width: 100%" />
        </td>

Note: e-resource field and input id and name has same value