We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to use NodeJs + PostgreSQL/Mysql to CRUD schedules

Hi seams all the Ej2 serverside platform is geared towards ASP.NET and c# technologies. but is there any working example how to integrate the React platform of the Shedule app to work with NodeJs + PostgreSQL/Mysql/sqlLite 

Thanks

27 Replies

VM Vengatesh Maniraj Syncfusion Team January 8, 2020 01:07 AM

Hi Moses, 

Greetings from Syncfusion Support. 

Based on the requirement, we have prepared a CRUD sample which can be downloaded from below link. 


Kindly refer the below UG for more details, 


Kindly try the above sample and revert us for further assistance. 

Regards, 
Vengatesh 



MO Moses January 8, 2020 05:45 AM

The Zip file attached is an empty project


MO Moses January 8, 2020 09:02 AM

Thank you very much. All sorted 


VM Vengatesh Maniraj Syncfusion Team January 8, 2020 11:36 PM

Hi Moses, 

You are most welcome. 

Regards, 
Vengatesh 



MO Moses January 9, 2020 03:34 AM

Hey Good day thank you for your help all along. 
I just have 1 more issue. the app is running fine but the CRUD only works on localhost and not on my other connected PCs on the same local network, 
please help me


VM Vengatesh Maniraj Syncfusion Team January 9, 2020 09:20 PM

Hi Moses, 

Thanks for the update. 

We have validated the reported case at our end and we suspect that the server project and client project are running in different machines. So we suggest you to use the IP Address of the machine(server project running machine) instead of using localhost. 
 
this.data = new DataManager({ 
      url: 'http://localhost:54738/Home/LoadData', // use IP address instead of localhost  
      crudUrl: 'http://localhost:54738/Home/UpdateData', // use IP address instead of localhost  
      crossDomain: true, 
      adaptor: new UrlAdaptor 
    }); 
 
Kindly try the above and revert us for further assistance. 

Regards, 
Vengatesh 



MO Moses January 10, 2020 05:00 AM

  1.  But the asp.net app is running on that localhost:54738 and cannot be changed in Visual studio. (Also am running the asp.net on the same machine as the react-frontend)
  2. Also please on the frontend when i create/edit an event it does not show on the scheduler till i refresh the project. is there a way to make it load in immediately even if it refreshes the page


MO Moses January 10, 2020 01:27 PM

The remote server issues is solved, thank you for the tips.

please last issues is
 please on the frontend when i create/edit an event it does not show on the scheduler till i refresh the project. is there a way to make it load in immediately even if it refreshes the page


VM Vengatesh Maniraj Syncfusion Team January 12, 2020 09:37 PM

Hi Moses, 

We have validated the reported case at our end and it has been working fine. We have shared the video demo for your reference please check the below link. 


Please check the above links and if you still face the problem kindly share us more details like video, image, frontend code changes for Schedule. 

Regards, 
Vengatesh 



MO Moses January 16, 2020 11:39 AM

Thanks this works well from the https://stackblitz.com/ but once downloaded and running locally, it doesn't display event data once created or edited until you refresh the whole app. 
please look in to it again am sorry i have this problems.


HB Hareesh Balasubramanian Syncfusion Team January 17, 2020 10:00 AM

Hi Moses, 

Thanks for your update. 

Based on the your scenario, we have prepared a CRUD sample in React as an individual sample and kindly find the below sample and service links, 


Kindly try the above CRUD sample, if you have any concerns please revert us back for further assistance. 

Regards, 
Hareesh 



MO Moses January 17, 2020 12:30 PM

Quick one.
after:

this.data = new DataManager({ 
      url: 'http://localhost:54738/Home/LoadData', // use IP address instead of localhost  
      crudUrl: 'http://localhost:54738/Home/UpdateData', // use IP address instead of localhost  
      crossDomain: true, 
      adaptor: new UrlAdaptor 
    }); 

how do i see the object /json of the data from my database. before it displays on the schedule 


KK Karthigeyan Krishnamurthi Syncfusion Team January 19, 2020 10:58 PM

Hi Moses,  
 
Thanks for your update 
 
In databinding event, events can be viewed before rendering in Scheduler, kindly refer the below links. 
 
Regards, 
Karthi 



MO Moses January 20, 2020 12:15 AM

Good morning
sorry to be disturbing this morning: 
the schedule displaying after CRUD is still not working ( I've attached my experience ).
works well on the https://stackblitz.com/ and when I was using localData from (browser local storage). 


I can't still get to console log the events from the data manager before binding to the schedule. 
i used this this.scheduleObj.getEvents(); on onDatabound  
only gets event presently being displayed not all events.

i want to get all event existing on the database.

thanks

Attachment: schedule_display_issues_b1c01ea9.zip


VM Vengatesh Maniraj Syncfusion Team January 20, 2020 11:16 PM

Hi Moses, 

Thanks for your update. 

Q1: We suspect that the LoadData function may not triggered after the events are bound into the scheduler, which could be the cause for not loading in UI after saving and if you reloaded the scheduler on initial load for the events it will trigger’s the same event, so you could able to get those events after refreshing the scheduler. Kindly refer the below snippet, 

Code Snippet:  
public JsonResult LoadData(Params param)  // Here we get the Start and End Date and based on that can filter the data and return to Scheduler 
                var data = db.ScheduleEventDatas.Where(app => (app.StartTime >= param.StartDate && app.StartTime <= param.EndDate) || (app.RecurrenceRule != null && app.RecurrenceRule != "")).ToList();  // Here filtering the events based on the start and end date value. 
                return Json(data, JsonRequestBehavior.AllowGet); 

And for further reference, kindly refer the below UG link, 

Q2: Based on your requirement, we suggest you to use the getCurrentViewEvents function, it will helps you retrieves the events that lies on the current date range of the active view of Scheduler. And for further reference, kindly refer the below API link, 

Regards, 
Vengatesh 



MO Moses January 21, 2020 10:37 PM

Good morning is there no way to automate the reload once a new event is created or updated like a regular POST operation. 


VM Vengatesh Maniraj Syncfusion Team January 23, 2020 12:48 AM

Hi Moses, 

Sorry for the inconvenience caused. 

We can able to reproduce the reported issue and we have modified our previously updated service(backend) and it can be downloaded from the following link, 


In Home.Controller file(service side): 
        public JsonResult UpdateData(EditParams param) 
        { 
            if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments 
            { 
                var value = (param.action == "insert") ? param.value : param.added[0]; 
                int intMax = db.ScheduleEventDatas.ToList().Count > 0 ? db.ScheduleEventDatas.ToList().Max(p => p.Id) : 1; 
                DateTime startTime = Convert.ToDateTime(value.StartTime); 
                DateTime endTime = Convert.ToDateTime(value.EndTime); 
                ScheduleEventData appointment = new ScheduleEventData() 
                { 
                   Id = intMax + 1, 
                    StartTime = startTime, 
                    EndTime = endTime, 
                    Subject = value.Subject, 
                    Location = value.Location, 
                    Description = value.Description, 
                    IsAllDay = value.IsAllDay, 
                    StartTimezone = value.StartTimezone, 
                    EndTimezone = value.EndTimezone, 
                    RecurrenceRule = value.RecurrenceRule, 
                    RecurrenceID = value.RecurrenceID, 
                    RecurrenceException = value.RecurrenceException 
                }; 
                db.ScheduleEventDatas.InsertOnSubmit(appointment); 
                db.SubmitChanges(); 
            } 
            if (param.action == "update" || (param.action == "batch" && param.changed != null)) // this block of code will execute while updating the appointment 
            { 
                var value = (param.action == "update") ? param.value : param.changed[0]; 
                var filterData = db.ScheduleEventDatas.Where(c => c.Id == Convert.ToInt32(value.Id)); 
                if (filterData.Count() > 0) 
                { 
                    DateTime startTime = Convert.ToDateTime(value.StartTime); 
                    DateTime endTime = Convert.ToDateTime(value.EndTime); 
                    ScheduleEventData appointment = db.ScheduleEventDatas.Single(A => A.Id == Convert.ToInt32(value.Id)); 
                    appointment.StartTime = startTime; 
                    appointment.EndTime = endTime; 
                    appointment.StartTimezone = value.StartTimezone; 
                    appointment.EndTimezone = value.EndTimezone; 
                    appointment.Subject = value.Subject; 
                    appointment.Location = value.Location; 
                    appointment.Description = value.Description; 
                    appointment.IsAllDay = value.IsAllDay; 
                    appointment.RecurrenceRule = value.RecurrenceRule; 
                    appointment.RecurrenceID = value.RecurrenceID; 
                    appointment.RecurrenceException = value.RecurrenceException; 
                } 
                db.SubmitChanges(); 
            } 
            if (param.action == "remove" || (param.action == "batch" && param.deleted != null)) // this block of code will execute while removing the appointment 
            { 
                if (param.action == "remove") 
                { 
                    int key = Convert.ToInt32(param.key); 
                    ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == key).FirstOrDefault(); 
                    if (appointment != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment); 
                } 
                else 
                { 
                    foreach (var apps in param.deleted) 
                    { 
                        ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == apps.Id).FirstOrDefault(); 
                        if (apps != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment); 
                    } 
                } 
                db.SubmitChanges(); 
            } 
            var data = db.ScheduleEventDatas.ToList(); 
            return Json(data, JsonRequestBehavior.AllowGet); 
        } 

Kindly try the above CRUD sample, if you have any concerns please revert us back for further assistance.  

Regards,  
Vengatesh. 



MO Moses January 23, 2020 01:47 AM

Hey Good morning I just tried the new samples you sent me. 
its just on ends refresh never getting data and jusk keeps rolling. see attached video

Attachment: endless_running_41ef0115.zip


VM Vengatesh Maniraj Syncfusion Team January 24, 2020 01:33 AM

Hi Moses, 

Thanks for your update. 

We have checked your shared video demo and we suspect that the breakpoint is enabled in the service side which could be the cause for the reported issue. And the same we have taken the video with our previously shared sample and the video demo can be downloaded from the following link, 


Kindly refer to the above video demo, if you have any concerns please revert us back for further assistance.  

Regards, 
Vengatesh 



MO Moses January 24, 2020 03:52 PM

Totally resolved. Thanks very much



VM Vengatesh Maniraj Syncfusion Team January 26, 2020 09:17 PM

Hi Moses, 

You are most welcome. 

Regards, 
Vengatesh 



RA Rasmus March 10, 2020 01:10 AM

Hi!
Is there a working example how to integrate the Angular platform of the Sheduler app to work with NodeJs + Express/MongoDB?


VM Vengatesh Maniraj Syncfusion Team March 10, 2020 08:54 PM

Hi Rasmus, 
 
Greetings from Syncfusion Support. 
 
Yes. You can get the working sample for Scheduler app with MongoDB from the below link, 
 
 
private dataManagerDataManager = new DataManager({   
    url: 'http://localhost:5000/GetData',   
    crudUrl: 'http://localhost:5000/BatchData',   
    adaptor: new UrlAdaptor,   
    crossDomain: true   
  });   
 
server.js   
MongoClient.connect(urlfunction (errdb) {   
    if (errthrow err;   
    var dbo = db.db("mydb");   
    app.use(function (reqresnext) {   
        res.header("Access-Control-Allow-Origin""*");   
        res.header("Access-Control-Allow-Headers""Origin, X-Requested-With, Content-Type, Accept");   
        next();   
    });   
    app.post("/GetData", (reqres=> {   
        dbo.collection('ScheduleData').find({}).toArray((errcus=> {   
            res.send(cus);   
        });   
    });   
    app.post("/BatchData", (reqres=> {   
        console.log(req.body);   
        var eventData = [];   
        if (req.body.action == "insert" || (req.body.action == "batch" && req.body.added.length > 0)) {   
            (req.body.action == "insert") ? eventData.push(req.body.value) : eventData = req.body.added;   
            for (var i = 0i < eventData.lengthi++) {   
                var sdate = new Date(eventData[i].StartTime);   
                var edate = new Date(eventData[i].EndTime);   
                eventData[i].StartTime = (new Date(+sdate - (sdate.getTimezoneOffset() * 60000)));   
                eventData[i].EndTime = (new Date(+edate - (edate.getTimezoneOffset() * 60000)));   
                dbo.collection('ScheduleData').insertOne(eventData[i]);   
            }   
        }   
        if (req.body.action == "update" || (req.body.action == "batch" && req.body.changed.length > 0)) {   
            (req.body.action == "update") ? eventData.push(req.body.value) : eventData = req.body.changed;   
            for (var i = 0i < eventData.lengthi++) {   
                delete eventData[i]._id;   
                var sdate = new Date(eventData[i].StartTime);   
                var edate = new Date(eventData[i].EndTime);   
                eventData[i].StartTime = (new Date(+sdate - (sdate.getTimezoneOffset() * 60000)));   
                eventData[i].EndTime = (new Date(+edate - (edate.getTimezoneOffset() * 60000)));   
                dbo.collection('ScheduleData').updateOne({ "Id": eventData[i].Id }, { $set: eventData[i] });   
            }   
        }   
        if (req.body.action == "remove" || (req.body.action == "batch" && req.body.deleted.length > 0)) {   
            (req.body.action == "remove") ? eventData.push({ Id: req.body.key }) : eventData = req.body.deleted;   
            for (var i = 0i < eventData.lengthi++) {   
                dbo.collection('ScheduleData').deleteOne({ "Id": eventData[i].Id });   
            }   
        }   
        res.send(req.body);   
    });   
});   
 
Note: We have removed the local offset time before inserting and updating the events in the database collection to render the appointments without considering system UTC in the scheduler.   
     
Steps to run the sample:   
  1. Run MongoDB and create the collection named ‘ScheduleData’ in ‘mydb’ database.
  2. Run the below commands.
npm install   
npm run server   
npm start   
 
Kindly check the above sample and get back to us if you would require any further assistance. 
 
Regards, 
Vengatesh 



UN Unknown April 30, 2022 06:47 PM

Hi, I'm reading the replies of this post but I want to know if it's too difficult integrate this react scheduler with node.js (express) + postgresql on the server side. I tried to download the file in the first comment, but I couldn't. Can you help me please?

Thanks



VM Vengatesh Maniraj Syncfusion Team May 2, 2022 12:37 AM

Hi Maximiliano,


Yes. Please find the sample from the below link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/service-2131262461


Regards,

Vengatesh 



UN Unknown replied to Vengatesh Maniraj May 2, 2022 05:01 AM

Thank you Vengatesh Maniraj, I was looking the code but I'm little confused to understand some things. I have the Scheduler Component in my React app, but I want to create a Node.js (express) backend with postgresql database to create (and update) events in the React app and save it into the database. Because I want to add different kind of events, but at the same time other people can see the new events in the scheduler. In the post Moses is talking about a React plataform integrate Schedule with NodeJs and PostgreSQL database, can you give me some hint or code example to do this?. I really try to understand the C# code, but I never work with this programming language.

Thanks for all



VM Vengatesh Maniraj Syncfusion Team May 12, 2022 07:25 AM

Hi Maximiliano,


Sorry for the delay.


We have created a react scheduler application with Node.js backend with PostgreSQL database. Please download the projects from the below links.


Service: https://www.syncfusion.com/downloads/support/directtrac/general/ze/nodejs-express-postgresql1918831484

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/react-schedule-nodejs-postgresql-290638409


Prerequisites

Before installing, please make sure to have global installations of

* node v14 or higher

* npm v5 or higher

* PostgreSQL


Installation and Run the application:

  1. Execute npm install to configure the local environment in both projects.
  2. Run the server project with the command node server.js
  3. Run the client project with the command npm start


Please check the above projects and let us know if you need any further assistance.


Regards,

Vengatesh


Loader.
Live Chat Icon For mobile
Up arrow icon