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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use NodeJs + PostgreSQL/Mysql to CRUD schedules

Thread ID:

Created:

Updated:

Platform:

Replies:

150433 Jan 7,2020 09:52 AM UTC Mar 11,2020 04:54 AM UTC React - EJ 2 23
loading
Tags: Schedule
Moses
Asked On January 7, 2020 09:52 AM UTC

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

Vengatesh Maniraj [Syncfusion]
Replied On January 8, 2020 09:07 AM UTC

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 


Moses
Replied On January 8, 2020 01:45 PM UTC

The Zip file attached is an empty project

Moses
Replied On January 8, 2020 05:02 PM UTC

Thank you very much. All sorted 

Vengatesh Maniraj [Syncfusion]
Replied On January 9, 2020 07:36 AM UTC

Hi Moses, 

You are most welcome. 

Regards, 
Vengatesh 


Moses
Replied On January 9, 2020 11:34 AM UTC

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

Vengatesh Maniraj [Syncfusion]
Replied On January 10, 2020 05:20 AM UTC

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 


Moses
Replied On January 10, 2020 01:00 PM UTC

  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

Moses
Replied On January 10, 2020 09:27 PM UTC

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

Vengatesh Maniraj [Syncfusion]
Replied On January 13, 2020 05:37 AM UTC

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 


Moses
Replied On January 16, 2020 07:39 PM UTC

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.

Hareesh Balasubramanian [Syncfusion]
Replied On January 17, 2020 06:00 PM UTC

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 


Moses
Replied On January 17, 2020 08:30 PM UTC

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 

Karthigeyan Krishnamurthi [Syncfusion]
Replied On January 20, 2020 06:58 AM UTC

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


Moses
Replied On January 20, 2020 08:15 AM UTC

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

Vengatesh Maniraj [Syncfusion]
Replied On January 21, 2020 07:16 AM UTC

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 


Moses
Replied On January 22, 2020 06:37 AM UTC

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

Vengatesh Maniraj [Syncfusion]
Replied On January 23, 2020 08:48 AM UTC

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. 


Moses
Replied On January 23, 2020 09:47 AM UTC

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

Vengatesh Maniraj [Syncfusion]
Replied On January 24, 2020 09:33 AM UTC

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 


Moses
Replied On January 24, 2020 11:52 PM UTC

Totally resolved. Thanks very much


Vengatesh Maniraj [Syncfusion]
Replied On January 27, 2020 05:17 AM UTC

Hi Moses, 

You are most welcome. 

Regards, 
Vengatesh 


Rasmus
Replied On March 10, 2020 09:10 AM UTC

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

Vengatesh Maniraj [Syncfusion]
Replied On March 11, 2020 04:54 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon