Schedule eventTemplatesHeader,editorTemplate template error

[vytautas janusonis]

Hello, i`m trying to make a custom eventTemplatesHeader ,editorTemplate, but i`m receiving error: 

and html template look like:

<div class="control-section" *ngIf="loaded">
  <ejs-schedule width='100%' height='100%' #scheduleObj
                [firstDayOfWeek]="1" [eventSettings]="eventSettings" [currentView]="'Week'"
                (eventRendered)="oneventRendered($event)" [views]="['Week']"
                (actionBegin)="onActionBegin($event)"
                (actionComplete)="add($event)"
                [dateFormat]="'yyyy-MM-dd'"
                [showTimeIndicator] = "false"
                [showQuickInfo]="false" [classList]="[]">

    <ng-template #eventTemplatesHeader let-data>
      <div *ngIf="data.elementType == 'cell' || data.elementType == 'event'">
        <div class="e-popup-header">
          <div class="e-header-icon-wrapper">
            <div *ngIf="data.elementType == 'event'" class="subject">{{data.Subject}}</div>
            <button class="e-close e-close-icon e-icons" title="Close"></button>
          </div>
        </div>
      </div>
    </ng-template>

    <ng-template #editorTemplate>
      <table class="custom-event-editor" width="100%" cellpadding="5">
        <tbody>
        <tr>
          <td class="e-textlabel module-label">{{'MODULES' | translate}}</td>
          <td colspan="4">
            <ejs-multiselect id="modules" #moduleMultiSelect [dataSource]="moduleDropdownValues"
                             (select)="onMultiSelect($event)" [(value)]="moduleValuesInSelection"
                             (change)="onMultiSelectChange($event)"></ejs-multiselect>
          </td>
        </tr>
        <td colspan="5">
          <div id="warning-message">{{'TEMPERATURE_PERIOD_NOTIFICATION' | translate}}</div>
        </td>
        <tr>
          <td class="e-textlabel turn-on-label">{{'TURN_ON' | translate}}</td>
          <td colspan="4">
            <ejs-timepicker #startTime id="start-time" [value]='scheduleInEdit.turnOn'
                            [enabled]="!scheduleInEdit.disabled"
                            [format]="timeFormat"
                            [locale]="culture"
                            (blur)="onDateFocusOut($event)"
                            (change)="onDateChange($event)"
                            [showClearButton]="false"
                            [enableMask]="true"
                            [maskPlaceholder]="maskPlaceholderValue"></ejs-timepicker>
          </td>
        </tr>
        <tr>
          <td class="e-textlabel turn-off-label">{{'TURN_OFF' | translate}}</td>
          <td colspan="4">
            <ejs-timepicker id="end-time" [value]='scheduleInEdit.turnOff'
                            [format]="timeFormat"
                            [locale]="culture"
                            [enabled]="!scheduleInEdit.disabled"
                            (blur)="onDateFocusOut($event)"
                            (change)="onDateChange($event)"
                            [showClearButton]="false"
                            [enableMask]="true"
                            [maskPlaceholder]="maskPlaceholderValue"></ejs-timepicker>
          </td>
        </tr>
        <tr>
          <td class="e-textlabel all-day-label">{{'ALL_DAY' | translate}}</td>
          <td colspan="4">
            <ejs-checkbox [checked]="scheduleInEdit.isAllDay" (change)="onIsAllDayChange($event)"></ejs-checkbox>
          </td>
        </tr>
        <tr *ngFor="let error of errorMessages">
          <td colspan="5">
            <span id="error-message">{{error.text}}</span>
          </td>
        </tr>
        </tbody>
      </table>
    </ng-template>

  </ejs-schedule>
</div>

 

[Ravikumar Venkatesan]

Hi Vytautas,

Greetings from Syncfusion support.

We have validated your query at our end “str.match is not a function” at our end based on your shared code snippet. But, we are unable to reproduce the problem on our end and we have prepared a sample for your reference. We suspect that you are facing this problem because duplicate packages might be installed in your ‘@syncfusion’ folder of ‘node_modules’. So we suggest you follow the below steps to overcome the reported error.

1. Delete the package-lock.json file from your application.
2. Delete the @syncfusion  package folder from the node_modules.
3. Then install the new packages.

Kindly try the shared solution and let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

Attachment: ej2angularschedulewitheditortemplate_7651fff5.zip