Using Scheduler with Client Side Data

Webix JS
1

I am new to Webix & Jet and just purchased the pro version. I am working on a Jet app that uses Dexie.js to store data on the client side. For each data store I am creating a local service as follows:

this.setService(“localName”, new MyData());

MyData points to a class that creates a new webix.DataCollection and defines the methods used to manipulate the data collection and post the operations through Dexie. All my views are classes where the local service is defnied in the class’ init() method and used in certain methods of the class. Everything is working as expected until I tried to apply the same principles to the Scheduler plugin. It is not clear how I should structure my use of this plugin. As of now, my view looks as follows:

import {JetView} from 'webix-jet';
export default class SchedulerView extends JetView {
   config() {
        return {
            view: 'scheduler',
            localId: 'scheduler',
            date: new Date(),
            override: new Map([
                [scheduler.services.Backend, MyBackend]
            ])
        };
    }  // end of config

I am not sure if the next code block is necessary but was included after reading the documentation for Scheduler.

class MyBackend extends scheduler.services.Backend {
    init() {
        this.eventData = this.app.getService('localName');
    }
    events() {
        const events =  this.eventData.getRecords();
        return webix.promise.resolve(events);
    }
    calendars() {
        const calendars = [];
        return webix.promise.resolve(calendars);
    }
    addEvent(event) {
        this.eventData.addRecord(event).then(res => res.json());
    }
    removeEvent(id) {
        this.eventData.deleteRecord(id).then(res => res.json());
    }
    updateEvent(id, obj, mode) {
        this.eventData.updateRecord(id, obj).then(res => res.json());
    }
}

If this is the correct way to incorporate the local data source with Scheduler, it is not working for me. Any comments are appreciated.

2

Hello James_S_Hackney,

To redefine the existing methods of the scheduler view you still have to consider the return value of these methods. All these methods addEvent(), removeEvent(), updateEvent() return a promise. So to make these methods work you need to return a promise as well.

Moreover method addEvent() returns a promise that resolves with an object containing ID of the new event.

Please take a look at the example: Code Snippet

3

Thank you. I incorporated your results and everything works as expected.

4

Hello @Natalia_Shilova I have similar need. I have an angular project and data is getting loaded from http services. How can I feed that data to webix scheduler? I am able to run the project successfully but during runtime webix initialization still calls url instead of loading local data.

5

Hi @Sandeep_Parmar

but during runtime webix initialization still calls url instead of loading local data

By default, every operation (loading/updating) in Scheduler relies on a server-side request. Here’s the description of the methods.

First of all, please make sure that the Backend service was overwritten with the custom instance and your customization is applied correctly:

view: "scheduler",
override: new Map([
   [scheduler.services.Backend, CustomBackend]
])

Regarding the customization, please note that the methods described in documentation have to return specific values (e.g. a promise resolved with some data). Updates on the client-side are performed once the promise in a Backend service method was resolved correctly.
By default, request to the default URL is awaited, but you can replace these requests with any desired code.
Here’s an example for the most common operations in Scheduler (requests are replaced so that all operations immediately applied on the client-side): https://snippet.webix.com/yq3v0640

If you are still having trouble with loading/updating data in Scheduler, could you please share an example of your implementation?