Agfdhyk

I am using sync Fusion’s React schedule to build a scheduler application using Meteor/React.

In my meteor application, in client/components folder, there lies a file ’schedule.js’.

It has the following piece of code :

function onEventRendered(args) {

    categoryColor=args.data.Teacher;

  console.log(args.data, );

  if (!args.element || !categoryColor) {

    return;

  }

  if (this.currentView === 'Agenda') {

    (args.element.firstChild).style.borderLeftColor = categoryColor;

  } else {

    args.element.style.backgroundColor = categoryColor;

  }

}

Whenever onEventRendered triggers, it automatically calls one of the methods that lie in node_modules/ej2-schedule/src/schedule/actions/crud.js

Crud.prototype.addEvent = function (eventData) {

        var fields = this.parent.eventFields;

        var promise = null;

        var editParms = { addedRecords: , changedRecords: , deletedRecords:  };

        var args = {

            cancel: false,

            data: (eventData instanceof Array) ? eventData : [eventData],

            requestType: 'eventCreate'

        };

        this.parent.trigger(events.actionBegin, args);

        if (args.cancel) {

            return;

        }

        if (eventData instanceof Array) {

            for (var _i = 0, _a = eventData; _i < _a.length; _i++) {

                var event_1 = _a[_i];

                this.processCrudTimezone(event_1);

                editParms.addedRecords.push(event_1);

            }

            promise =

                this.parent.dataModule.dataManager.saveChanges(editParms, fields.id, this.getTable(), this.getQuery());

        }

        else {

            this.processCrudTimezone(eventData);

            promise = this.parent.dataModule.dataManager.insert(eventData, this.getTable(), this.getQuery());

        }

        var crudArgs = { requestType: 'eventCreated', cancel: false, data: eventData, promise: promise };

        this.refreshData(crudArgs);

    };

I want to just add a line to call a meteor method ‘event.add’ in this method, so that data can be saved in database. How can this be achieved?

We can perform CRUD using MongoDB in our application level without modifying any source file in node_modules. We have prepared a sample for your reference which can be downloaded from the below location.
http://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample1414642222

In the above sample, we have added CRUD actions code snippet in server.js.

app.post("/GetData", (req, res) => {  //executes on initial loading and for each CRUD actions

    dbo.collection('ScheduleData').find({}).toArray((err, cus) => {

        res.send(cus);

    });

});

app.post("/BatchData", (req, res) => {

    var eventData = ;

    if (req.body.action == "insert" || (req.body.action == "batch" && req.body.added.length > 0)) {  //this block will execute while adding events

        (req.body.action == "insert") ? eventData.push(req.body.value) : eventData = req.body.added;

        for (var i = 0; i < eventData.length; i++) {

            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]); //to add the events in MongoDB collection

        }

    }

    if (req.body.action == "update" || (req.body.action == "batch" && req.body.changed.length > 0)) { //this block will execute while editing events

        (req.body.action == "update") ? eventData.push(req.body.value) : eventData = req.body.changed;

        for (var i = 0; i < eventData.length; i++) {

            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 }, eventData[i]); //to update the events in MongoDB collection

        }

    }

    if (req.body.action == "remove" || (req.body.action == "batch" && req.body.deleted.length > 0)) { //this block will execute while deleting events

        (req.body.action == "remove") ? eventData.push(req.body.value) : eventData = req.body.deleted;

        for (var i = 0; i < eventData.length; i++) {

            dbo.collection('ScheduleData').deleteOne({ "Id": eventData[i].Id }, eventData[i]); //to delete the events in MongoDB collection

        }

    }

    res.send(req.body);

});

In the below code we have given the GetData and BatchData url path to initial fetching and for performing CRUD actions using UrlAdaptor and assigned it to the scheduler datasource.

let data = new DataManager({ url: 'http://localhost:5000/GetData', crudUrl: 'http://localhost:5000/BatchData', adaptor: new UrlAdaptor, crossDomain: true });

eventSettings={{ dataSource: data }}

Steps to run the sample:

• Run MongoDB and create the collection named ‘ScheduleData’ in ‘mydb’ database.



• Run the below comments




• npm install



• npm run server


• npm start