Our pure JavaScript Scheduler component


Post by dheitinga »

I have 3 stores set up for the Resources, Events and Assignments:

const resourceStore = new bryntum.scheduler.ResourceStore({
    readUrl: 'webservices/Objects/Read',
    autoLoad: true,
    useRestfulMethods: true,
    httpMethods: httpMethods,
    headers: headers,
    listeners: {
        beforeRequest
    }
});

const eventStore = new bryntum.scheduler.EventStore({
    createUrl: 'webservices/Events/Create',
    readUrl: 'webservices/Events/Read',
    autoLoad: true,
    autoCommit: true,
    useRestfulMethods: true,
    httpMethods: httpMethods,
    headers: headers,
    listeners: {
        beforeRequest
    }
});

const assignmentStore = new bryntum.scheduler.AssignmentStore({
    createUrl: 'webservices/Assignments/Create',
    readUrl: 'webservices/Assignments/Read',
    autoLoad: true,
    autoCommit: true,
    useRestfulMethods: true,
    httpMethods: httpMethods,
    headers: headers,
    listeners: {
        beforeRequest
    }
});

const scheduler = new bryntum.scheduler.Scheduler({
    appendTo: instance.element,
    resourceStore,
    eventStore,
    assignmentStore,
    features: {
        tree: true
    },
    columns: [
        {
            type: 'tree',
            text: 'Name',
            width: 250,
            field: 'name'
        }
    ]
});

Whenever I create an event and assignment and save it, it will stay on the resource for 2 seconds then disappear. I do not get any error messages in my console. After refreshing the page the event assignment does show up since its being saved to the database correctly.


Post by mats »

Probably something wrong with the response format. Can you please upload a full test case we can run? Include the data sent by your server (as static JSON files)?


Post by dheitinga »

Hi Mats,

Below a working snippet of our code:

const isEmptyObject = (obj) => {
    if(typeof obj === 'object' && obj != null && obj != undefined && Object.keys(obj).length !== 0){
        return false;
    } else {
        return true;
    }
}

const beforeRequest = (event) => {
    console.log(event);
    
if (isEmptyObject(event.body)) { Object.assign(event, { body: {test: true} }) } } const BryntumScheduler = function () { const instances = {}; let numInstances = 0; const httpMethods = { create: 'POST', read: 'POST', update: 'POST', delete: 'POST' } const fetchOptions = { credentials: 'omit', redirect: 'error' } const headers = { 'Content-Type': 'application/json' } function init(instance){ const resourceStore = new bryntum.scheduler.ResourceStore({ readUrl: 'https://preview.wem.io/41834/webservices/Objects/Read', autoLoad: true, useRestfulMethods: true, httpMethods: httpMethods, fetchOptions: fetchOptions, headers: headers, listeners: { beforeRequest } }); const eventStore = new bryntum.scheduler.EventStore({ createUrl: 'https://preview.wem.io/41834/webservices/Events/Create', readUrl: 'https://preview.wem.io/41834/webservices/Events/Read', autoLoad: true, autoCommit: true, useRestfulMethods: true, httpMethods: httpMethods, fetchOptions: fetchOptions, headers: headers, listeners: { beforeRequest } }); const assignmentStore = new bryntum.scheduler.AssignmentStore({ createUrl: 'https://preview.wem.io/41834/webservices/Assignments/Create', readUrl: 'https://preview.wem.io/41834/webservices/Assignments/Read', autoLoad: true, autoCommit: true, useRestfulMethods: true, httpMethods: httpMethods, fetchOptions: fetchOptions, headers: headers, listeners: { beforeRequest } }); const scheduler = new bryntum.scheduler.Scheduler({ appendTo: instance.element, resourceStore, eventStore, assignmentStore, features: { tree: true }, columns: [ { type : 'tree', text : 'Name', width : 250, field : 'name' } ] }); } function register(elementId) { const element = document.getElementById(elementId); const instance = instances[elementId] = { elementId: elementId, element: element }; init(instance); numInstances++; } function unregister(elementId) { const instance = instances[elementId]; delete instance; numInstances--; } return { register: register, unregister: unregister }; }();

Below is what the server returns for the creation of events:

{
    "data": [
        {
            "id": 35,
            "name": "sf",
            "duration": 15,
            "durationUnit": "day",
            "allDay": false,
            "startDate": "2022-08-30T00:00:00",
            "endDate": null
        }
    ],
    "success": true,
    "message": null
}

Post by dheitinga »

Hi Mats,

Found the issue by going through the the calls to provide you with information. Issue indeed lies within the data returned, the server didnt properly parse the dates which resulted in what you see above. Thanks for the quick reply!


Post by alex.l »

Great to hear you figured out! Good luck!

All the best,
Alex


Post Reply