Our pure JavaScript Scheduler component


Post by glennvl91 »

Hi

I have following setup of a scheduler (pro):

var schedulerContainer = document.getElementById('scheduler');

async function getData() {
    let data;

await fetch(schedulerContainer.dataset.resourcesUrl)
    .then(res => res.json())
    .then(json => data = json);

return data;
}

async function createScheduler() {
    const data = await getData();

const visibleDate = bryntum.schedulerpro.DateHelper.clearTime(new Date());
visibleDate.setHours((new Date()).getHours()+12);

const scheduler = await new bryntum.schedulerpro.SchedulerPro({
    appendTo : schedulerContainer,

    infiniteScroll: true,
    visibleDate : visibleDate,
    viewPreset  : 'hourAndDay',
    continuous  : false,
    workingTime : { fromHour: 11, toHour: 22 },
    weekStartDay: 1,

    rowHeight : 50,
    barMargin : 3,

    maxZoomLevel : 15,
    minZoomLevel : 15,

    zoomOnMouseWheel          : false,
    zoomOnTimeAxisDoubleClick : false,

    columns : [
        { field : 'room', text: 'Zaal', hidden : true},
        { field : 'name', text : 'Naam', flex : 1 },
        { field : 'amount', text : '#pers', flex : 1 }
    ],

    project : {
        // Configure urls used by the built in CrudManager
        autoLoad: true,
        autoSync: true,
        transport : {
            load : {
                url : schedulerContainer.dataset.resourcesUrl
            },
            sync : {
                url : schedulerContainer.dataset.syncResourcesUrl
            }
        }
    },

    tbar: {},

    features : {
        stripe : true,
        group  : 'room',
        sort   : 'name',
        timeAxisHeaderMenu : {
            items : {
                zoomLevel : false
            }
        },
        dependencies : {
            radius : 5
        },
        dependencyEdit: {
            editorConfig : {

            }
        }
    }
});

scheduler.tbar.add([
    {
        type : 'button',
        ref  : 'reloadButton',
        icon : 'b-fa b-fa-sync',
        text : 'Schema herladen',
        onAction() {
            scheduler.project.load()
                .then(() => bryntum.schedulerpro.WidgetHelper.toast('Data vernieuwd'))
                .catch(() => bryntum.schedulerpro.WidgetHelper.toast('Vernieuwen mislukt'));
        }
    },
    {
        type: 'button',
        ref: 'todayButton',
        text: 'Huidige shift',
        tooltip: 'Bekijk huidige reservaties',
        onAction() {
            const today = bryntum.schedulerpro.DateHelper.clearTime(new Date());
            today.setHours((new Date()).getHours()-1);
            scheduler.scrollToDate(today, {'block':'start', 'animate':true});
        }
    },
    {


                label      : 'Ga naar',
                inputWidth : '7em',
                width      : 'auto',
                type       : 'datefield',
                value      : bryntum.schedulerpro.DateHelper.clearTime(new Date()),
                step       : '1d',
                listeners  : {
                    change({ userAction, value }) {
                        if (userAction) {
                            scheduler.scrollToDate(bryntum.schedulerpro.DateHelper.set(value, 'hour', 12), { block : 'center', animate : 500 });
                        }
                    }
                },
                highlightExternalChange : false
            }

]);

}

createScheduler();

But when I change something in the schedule, it does automatically call the sync method to the provided url but it calls it twice. Once with POST like expected, but then it immediately does a redirect (301) to the same url but with a GET. Because of this I lost the payload and I can't handle the request on the server side.

Screenshot 2022-09-26 at 11.47.02.png
Screenshot 2022-09-26 at 11.47.02.png (188.78 KiB) Viewed 194 times

Any idea what I am doing wrong here?


Post by saki »

Does 301 come from the server? Normally, the server sends response codes so the browser can responds accordingly. It seems highly improbably that the redirect would be generated or triggered by the scheduler itself.

If the problem persists, post please a runnable showcase, preferably with json-server as your server emulation so that we can run the app locally completely.


Post by glennvl91 »

Apparently I used a wrong url as sync url. The initiator of the 301 was the scheduler js that's why I was confused.

But you were right, it was server side off course. my bad.. ;-)


Post Reply