CRUD events with express JS

Question

Hello everyone,I hope you are doing well. I am using the scheduler component for my (MERN stack) application. Is there anyone who used this component with this stack before? I am having a hard time persisting data in the database. The documentation didn't help me a lot.Thank you for your time.Regards,Malek

Balasubramanian Sattanathan · Accepted Answer

Hi Malek Hammou, 

Greetings from Syncfusion Support. 

We have validated your requirement “CRUD events with express JS” at our side and prepared a sample based on that by making use of the below code snippet. And let you know that the CRUD (Create, Read, Update and Delete) actions can be performed easily on Scheduler appointments using the various adaptors available within the DataManager. So we would suggest you to refer the below UG link to know more details about the data-binding 





this.dataManger = new DataManager({ 
  url: 'http://localhost:54738/Home/LoadData', // Here need to mention the web api sample running path 
  crudUrl: 'http://localhost:54738/Home/UpdateData', 
  crossDomain: true, 
  adaptor: new UrlAdaptor 
}); 

Sample: https://stackblitz.com/edit/react-crud-sample-using-url-adaptor?file=index.js 
Service: https://www.syncfusion.com/downloads/support/forum/157730/ze/service_sample204020519.zip 
Data-binding UG: https://ej2.syncfusion.com/react/documentation/schedule/data-binding/ 

Kindly try and follow the above links, let us know if you need further assistance. 

Regards, 
Balasubramanian S

yichen · Answer

Hi Syncfusion,Hope everything is doing well I have also been struggling with performing CRUD on MERN(mongonDB - ExpressJS - ReactJS - NodeJS) stack a few days, sorry I am new to this stack also but time is limited. Currently, I can use postman to test all CRUD at the backend, my question is how should use these url to link with our Schedule component?for example my url is (http://localhost:5000/appointment/viewAllAppointments) to get the data like [    {        "id": "5f72e12534ee525084865a7b",        "subject": "The first event",        "startTime": "2020-09-25T04:00:00.000Z",        "endTime": "2020-09-25T06:00:00.000Z",        "location": "The first location",        "recurrenceID": {}    },    {        "id": "5f72e160fb37ce0974328685",        "subject": "The second_update event",        "startTime": "2020-09-26T01:30:00.000Z",        "endTime": "2020-09-26T03:30:00.000Z",        "location": "The second_update location",        "recurrenceID": {}    }], so how to bind it with our component, I tried to use the sample you gave, using UrlAdaptor but it does not work, may I have a sample for that? also including other activities CUD? C# I really cmi, sorry about that.Thank you for your time.Regards,Yichen

Balasubramanian Sattanathan · Answer

Hi Yichen, 

Thanks for the reply. 

We have validated your requirement “how should use these url to link with our Schedule component?” at our side and suspect that you have used the MongoDB as a service. So we have prepared a MongoDB sample with UrlAdaptor for your reference by making use of the below code snippet. In the below sample, we have maintained the data-source in the “https://localhost:5000/customers”, kindly change it as per your project. 

Code snippet: 




let data = new DataManager({ 
    url: 'http://localhost:5000/customers', 
    adaptor: new UrlAdaptor(), 
    crossDomain: true 
}); 

Procedure to run the sample:   


Install mango DB in your system.
Use the npm install command to install the dependency packages.
Run mango DB server files.
Use the npm run created command to initialize the data collection.
Use the npm run server to start the server connections.
Use the npm start command to start the application

Sample: https://www.syncfusion.com/downloads/support/forum/157730/ze/Schedule-mongoDB-944323966.zip 

Kindly try the above sample and let us know if you need further assistance. 

Regards, Balasubramanian S