Getting Error on Scheduler Recurrence Editor "Cannot read property 'getTime' of undefined"

[Shabbir Ismail]

Hi,

I am trying to get the data for the recurrence rule but I am getting an error on the save button "Cannot read property 'getTime' of undefined".

Below is the HTML part of the scheduler and Component file.

Html:

 <button class="mb-3" ejs-button cssClass='e-info' (click)='editor()'> New Event </button>

            <ejs-schedule [currentView]="setViews" [selectedDate]="setDate" startHour='08:00' endHour='20:00'

                [eventSettings]="eventObject" #scheduleObj (actionBegin)="onActionBegin($event)"

                (popupOpen)="onPopupOpen($event)">

                <e-views>

                    <e-view option='Day'></e-view>

                    <e-view option='Week' isSelected='true'></e-view>

                    <e-view option='Month'></e-view>

                    <!-- <e-view option='MonthAgenda'></e-view>

                    <e-view option='Agenda'></e-view> -->

                </e-views>

                <ng-template #editorTemplate let-data>

                    <table class="custom-event-editor" width="100%" cellpadding="5">

                        <tbody>

                            <tr>

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

                                <td colspan="4">

                                    <!-- <ejs-dropdownlist id='ddlelement' [dataSource]='lessonData' [fields]='lessonfields'

                                        placeholder="Select Lesson"></ejs-dropdownlist> -->

                                    <input type="text" id="lessonMaster" name="lessonMaster" class="e-field"

                                        style="width: 100%" />

                                </td>

                            </tr>

                            <tr>

                                <td class="e-textlabel">Hrs to Schedule</td>

                                <td colspan="4">

                                    <label for="">45 hrs and 30 min</label>

                                </td>

                            </tr>

                            <tr>

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

                                <td>

                                    <!-- <ejs-dropdownlist id='ddlelement' [dataSource]='ArenaData'

                                        placeholder='Select Arena'></ejs-dropdownlist> -->

                                    <input type="text" id="arenaMaster" name="arenaMaster" class="e-field"

                                        style="width: 100%" />

                                </td>

                            </tr>

                            <tr>

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

                                <td colspan="4">

                                    <input id="StartTime" class="e-field" type="text" name="StartTime" />

                                </td>

                            </tr>

                            <tr>

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

                                <td colspan="4">

                                    <input id="EndTime" class="e-field" type="text" name="EndTime" />

                                </td>

                            </tr>

                            <tr>

                                <td colspan="4">

                                    <div id='RecurrenceEditor'>

                                        <!-- <ejs-recurrenceeditor class="e-field"></ejs-recurrenceeditor> -->

                                    </div>

                                </td>

                            </tr>

                            <tr>

                                <td class="e-textlabel">Comments</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>

            </ejs-schedule>

Component :

onPopupOpen(args: PopupOpenEventArgs): void {

    if (args.type === 'Editor') {

      const LessonElement: HTMLInputElement = args.element.querySelector('#lessonMaster') as HTMLInputElement;

      if (!LessonElement.classList.contains('e-dropdownlist')) {

        const dropDownListObject: DropDownList = new DropDownList({

          fields: { text: 'lesson', value: 'oid' },

          placeholder: 'Choose Lesson', value: LessonElement.value,

          dataSource: this.lessonData

        });

        dropDownListObject.appendTo(LessonElement);

        LessonElement.setAttribute('name', 'lessonMaster');

      }

      const ArenaElement: HTMLInputElement = args.element.querySelector('#arenaMaster') as HTMLInputElement;

      if (!ArenaElement.classList.contains('e-dropdownlist')) {

        const dropDownListObject: DropDownList = new DropDownList({

          fields: { text: 'arena', value: 'oid' },

          placeholder: 'Choose Arena', value: ArenaElement.value,

          dataSource: this.ArenaData

        });

        dropDownListObject.appendTo(ArenaElement);

        ArenaElement.setAttribute('name', 'arenaMaster');

      }

 const startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement;

      if (!startElement.classList.contains('e-datetimepicker')) {

        // tslint:disable-next-line: no-unused-expression

        new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);

      }

      const endElement: HTMLInputElement = args.element.querySelector('#EndTime') as HTMLInputElement;

      if (!endElement.classList.contains('e-datetimepicker')) {

        // tslint:disable-next-line: no-unused-expression

        new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement);

      }

      const recurElement: HTMLElement = args.element.querySelector('#RecurrenceEditor');

      if (!recurElement.classList.contains('e-recurrenceeditor')) {

        const recurrObject: RecurrenceEditor = new RecurrenceEditor({

        });

        recurrObject.appendTo(recurElement);

        (this.scheduleObj.eventWindow as any).recurrenceEditor = recurrObject;

      }

      document.getElementById('RecurrenceEditor').style.display = (this.scheduleObj.currentAction === 'EditOccurrence') ? 'none' : 'block';

    }

  }

  onActionBegin(args: ActionEventArgs) {

    if ((args.requestType === 'eventCreate' || args.requestType === 'eventChange')) {

      const eventData: any = args.data as any;

      console.log('Main Event Data : ', eventData);  

  }

  }

core.js:15723 ERROR TypeError: Cannot read property 'getTime' of undefined

    at EventWindow.push../node_modules/@syncfusion/ej2-schedule/src/schedule/popups/event-window.js.EventWindow.recurrenceValidation (event-window.js:1159)

[Hareesh Balasubramanian]

Hi Shabbir, 

Greetings from Syncfusion Support. 

We have prepared schedular sample with recurrenceRule field in editorTemplate which is working fine at our end, which can be viewed from the following link. Kindly try the below sample, if the issue still persists, please share your schedular code / try to reproduce the issue in our sample to serve you better. 

https://stackblitz.com/edit/angular-2icgfu-ulxrm8?file=app.component.ts 

Note: And also we can render the editorTemplate for schedular in Angular standard format also and the same can be viewed from the below link, 

https://stackblitz.com/edit/angular-2icgfu-9tfaez?file=app.component.ts 

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

Regards, 

Hareesh 

[Shabbir Ismail]

Thank You so much. It works as expected.

[Vinitha Devi Murugan]

Hi Shabbir, 

 

Thanks for your update 

 

We are happy to hear that our solution has fulfilled your requirement.  

 

Regards, 

M. Vinitha devi