Error on Scheduler on SharePoint Framework - RangeError: Maximum call stack size exceeded

[Ameet]

I am trying to incorporate your schedule control on SharePoint Framework but I am getting the following error -

Here is my code -

Your help is greatly appreciated.

import { Version } from '@microsoft/sp-core-library';

import {

  BaseClientSideWebPart,

  IPropertyPaneConfiguration,

  PropertyPaneTextField

} from '@microsoft/sp-webpart-base';

import { escape } from '@microsoft/sp-lodash-subset';

import styles from './FirmCalendarWebPart.module.scss';

import * as strings from 'FirmCalendarWebPartStrings';

import {SPHttpClient, SPHttpClientResponse} from '@microsoft/sp-http';

import {Environment, EnvironmentType} from '@microsoft/sp-core-library';

import {Schedule, MonthAgenda} from '@syncfusion/ej2-schedule';

import {extend} from '@syncfusion/ej2-base';

import { forEach } from 'lodash';

require ('../../../node_modules/@syncfusion/ej2/fabric.css');

export interface IFirmCalendarWebPartProps {

  description: string;

}

export default class FirmCalendarWebPart extends BaseClientSideWebPart<IFirmCalendarWebPartProps> {

 

  public render(): void {

    this.domElement.innerHTML = `

      <div class="${ styles.firmCalendar }">

        <div id='Schedule'>

        </div>

      </div>`;

      let eventData = {scheduleData: [{

        "Id": 1,

          "Subject": "RUSSIA vs SAUDI ARABIA",

          "Description": "Group A",

          "StartTime": "2021-06-14T09:30:00.000Z",

          "EndTime": "2021-06-14T11:30:00.000Z",

          "StartTimezone": "Europe/Moscow",

          "EndTimezone": "Europe/Moscow"

      }]};

      let scheduleObj: Schedule = new Schedule({

        width: '100%',

        height: '510px;',

        //views: [ 'MonthAgenda' ],

        selectedDate: new Date(2021, 5, 20),

        eventSettings: {dataSource: eventData.scheduleData}

 

      });

      scheduleObj.currentView = 'MonthAgenda';

      scheduleObj.appendTo('#Schedule');

     

  }

  protected get dataVersion(): Version {

    return Version.parse('1.0');

  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

    return {

      pages: [

        {

          header: {

            description: strings.PropertyPaneDescription

          },

          groups: [

            {

              groupName: strings.BasicGroupName,

              groupFields: [

                PropertyPaneTextField('description', {

                  label: strings.DescriptionFieldLabel

                })

              ]

            }

          ]

        }

      ]

    };

  }

}

[Balasubramanian Sattanathan]

Hi Ameet,

We let you know that you missed to import the Scheduler views. Due to this, the reported script error has occurred. So we would suggest you to refer and follow the below sample.

Code snippet:

import { Schedule, Day, Week, WorkWeek, Month, Agenda, MonthAgenda, Resize, DragAndDrop } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, MonthAgenda, Resize, DragAndDrop);

/**
 * Schedule local data sample
 */

let data: Record<string, any>[] = [{
    "Id": 1,
    "Subject": "RUSSIA vs SAUDI ARABIA",
    "Description": "Group A",
    "StartTime": "2021-06-14T09:30:00.000Z",
    "EndTime": "2021-06-14T11:30:00.000Z",
    "StartTimezone": "Europe/Moscow",
    "EndTimezone": "Europe/Moscow"
}];

let scheduleObj: Schedule = new Schedule({
    width: '100%',
    height: '510px;',
    views: ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda', 'MonthAgenda'],
    currentView: 'MonthAgenda',
    selectedDate: new Date(2021, 5, 20),
    eventSettings: { dataSource: data }
});
scheduleObj.appendTo('#Schedule');

Sample: https://stackblitz.com/edit/1abo5n

Kindly try the above solution and let us know if this is helpful.

Regards,
Balasubramanian S

[Ameet]

Thanks for your help. This fixed it.

Best Regards,

Ameet

[Balasubramanian Sattanathan]

Hi Ameet,

We are happy that our solution has resolved your problem. 

Kindly let us know if you need further assistance. We will be happy to assist you

Regards,
Balasubramanian S