Scheduler - events with custom data model and event template not rendered

[Ercel Sotto]

Hi,

I tried creating a scheduler that's supposed to render all events with a custom event template and custom data model but unfortunately was not able to render anything in the calendar.

I have tried adding the template from the eventSettings property but it's giving me a typescript error on incompatible types.

I tried the solution that I've found in one of the threads in your forum with an issue similar to mine and have reflected the suggested fix (other forum link here). It solve the type errors but it didn't render any of the sample events.

Here's link to the sample code:

https://stackblitz.com/edit/react-ts-c8qajf

Would like to know what caused the issue for the scheduler to not render the events.

[Satheesh Kumar Balasubramanian]

Hi Ercel,

Field mapping is not done properly which is the cause for the reported issue.

https://ej2.syncfusion.com/react/documentation/schedule/appointments/#built-in-fields

Sample: https://stackblitz.com/edit/react-render-appointments?file=components/MyCalendar.tsx

MyCalendar.tsx:     

const getTimeString = (value: Date) => {

  var instance = new Internationalization();

  return instance.formatDate(value, { skeleton: 'hm' });

};  

const eventTemplate = (model: any) => {

    debugger;

    return (

      <div>

        <div className="template-wrap-title">{model.subject}</div>

        <div className="template-wrap-data">

          {getTimeString(model.startDate)}

        </div>

        <div className="template-wrap-data">{getTimeString(model.endDate)}</div>

      </div>

    );

  };

  return (

    <div style={{ height: '98%', margin: '1%' }}>

      <ScheduleComponent

        width="100%"

        height="100%"

        selectedDate={new Date(2022, 1, 2)}

        // delayUpdate="true"

        ref={(t: ScheduleComponent) => (scheduleObj = t)}

        eventSettings={{

          dataSource: testData,

          template: eventTemplate,

          fields: {

            startTime: { name: 'startDate' },

            endTime: { name: 'endDate' },

          },

        }}

      >

        <ViewsDirective>

          <ViewDirective option="Day" eventTemplate={eventTemplate} />

          <ViewDirective option="Week" eventTemplate={eventTemplate} />

          <ViewDirective option="Month" eventTemplate={eventTemplate} />

          <ViewDirective option="Year" eventTemplate={eventTemplate} />

        </ViewsDirective>

        <Inject

          services={[

            Day,

            Week,

            WorkWeek,

            Month,

            Year,

            Agenda,

            Resize,

            DragAndDrop,

          ]}

        />

      </ScheduleComponent>

    </div>

  );

};

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Satheesh Kumar B

[Ercel Sotto]

I have tried out the suggested solution locally but I am running into a problem with the template.js.

I tried downloading the sample solution and created a fresh project out of it. Interestingly, I tried to add debugger breakpoints on the same lines but it never was triggered. However, there's another template.js under ej2-react-base which was the one being called. Is there a way to override this and force the component the use ej2-react-base rather than the ej2-base template.js?

[Satheesh Kumar Balasubramanian]

Hi Ercel, 

  

We have validated your shared script error “str.match is not a function” at our end. We suspect that some duplicate packages might be installed in your ‘@syncfusion’ folder of ‘node_modules’. Please follow the below steps to overcome the reported behavior. 
 

• Delete package.lock.json file from your application.
• Remove the @syncfusion package folder from the node_modules.
• Use same version for all components in package.json file.
• Then install the new packages.

  

UG link: https://ej2.syncfusion.com/react/documentation/common/how-to/update-npm-package/  

  

Kindly refer to the above solution, if the issue persist still share the below details to validate your reported issue and serve you better.  

• Kindly share your scheduler package version/package.json file with us.
• Kindly share the entire schedule rendering code snippets with us.
• If possible, replicate the issue in our previously updated sample.

Regards, 

Satheesh Kumar B 

[Ercel Sotto]

I finally got it working on my end. It definitely had something to do with the inconsistent versions of the syncfusion react components installed in the project.

Also, the previous suggested solution worked perfectly.

Cheers!

Ercel

[Vengatesh Maniraj]

We are happy that your problem is resolved now.