Data Manager Angular Scheduler endpoint adds '$batch' at the end of my POST endpoint and I get a 404 error code

[Inés]

Hello,

I'm currently developing my bachelor thesis and I'm using Angular Scheduler for that. My problem is that I'm using Data Manager to insert events in my database through my server. As a server I have Node Express and my endpoint is the following:

router.post("/api/appointment/$batch", insert_appointment)

I had to add '$batch' at the end of the endpoint, because Data Manager does the following call:

And this is my Data Manager in frontend:

  private dataManager: DataManager = new DataManager({
   url: 'http://localhost:8080/api/appointment',
   adaptor: new WebApiAdaptor,
   crossDomain: true
});

(I don't know why Data Manager adds '$batch' at the end) . So, I'm getting a 404 code error and I don't know how to fix this.

Please this is very important for me due to it is my bachelor thesis. Thank you in advance.

[Ravikumar Venkatesan]

Hi Inés,

Greetings from Syncfusion support.

We have validated your query “Data Manager Angular Scheduler endpoint adds '$batch' at the end of my POST endpoint and I get a 404 error code” at our end. We suggest you use the UrlAdaptor to bind data and perform CRUD operations with the Schedule as shown in the below code snippet and we have attached the node js express service code for Schedule with this.

[App.vue]

<template>

  <ejs-schedule id="Schedule" ref="ScheduleObj" height="650px" :selectedDate="selectedDate" :currentView="currentView" :eventSettings="eventSettings">

    <e-views>

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

      <e-view option="Week"></e-view>

      <e-view option="WorkWeek"></e-view>

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

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

    </e-views>

  </ejs-schedule>

</template>

 

<script>

import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';

import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, ICalendarExport, ICalendarImport, Resize, DragAndDrop, ViewsDirective, ViewDirective } from "@syncfusion/ej2-vue-schedule";

 

const dataManager = new DataManager({

  url: 'http://localhost:8080/api/scheduleevents/getData',

  crudUrl: 'http://localhost:8080/api/scheduleevents/crudActions',

  adaptor: new UrlAdaptor(),

  crossDomain: true

});

 

export default {

  name: "App",

  components: {

    'ejs-schedule': ScheduleComponent,

    'e-views': ViewsDirective,

    'e-view': ViewDirective

  },

  data: function () {

    return {

      eventSettings: {

        dataSource: dataManager,

        fields: {

          id: 'id',

          subject: { name: 'subject' },

          isAllDay: { name: 'isallday' },

          location: { name: 'location' },

          description: { name: 'description' },

          startTime: { name: 'starttime' },

          endTime: { name: 'endtime' },

          startTimezone: { name: 'starttimezone' },

          endTimezone: { name: 'endtimezone' },

          recurrenceID: { name: 'recurrenceid' },

          recurrenceRule: { name: 'recurrencerule' },

          recurrenceException: { name: 'recurrenceexception' },

          followingID: { name: 'followingid' }

        }

      },

    }

  },

  methods: {

  },

  provide: {

    schedule: [Day, Week, WorkWeek, Month, Agenda, ICalendarExport, ICalendarImport, Resize, DragAndDrop]

  },

};

</script>

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

Regards,

Ravikumar Venkatesan

If this post is helpful, kindly consider accepting it as the solution so that other members can locate it more quickly.

Attachment: nodejsexpresspostgresql_7189cf85.zip