Our pure JavaScript Scheduler component


Post by glennvl91 »

Hi

I'm trying to create a scheduler (schedulerpro) with some test data.
I managed to create a working one but only one that can be viewed. When I try to add a crudmanager so I can also update the events, it goes wrong.

The vanilla JS looks like this:

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 }
    ],

    crudManager: {
        resourceStore: {
            // Add some custom fields
            fields: ['amount', 'room']
        },

        // This config enables response validation and dumping of found errors to the browser console.
        // It's meant to be used as a development stage helper only so please set it to false for production systems.
        validateResponse: true,

        transport: {
            load: {
                url: schedulerContainer.dataset.resourcesUrl,
                paramName: 'data'
            }
        },

        autoLoad: true,
        autoSync: true,
        onRequestFail: (event) => {
            const
                {requestType, response} = event,
                serverMessage = response && response.message,
                exceptionText = `Action "${requestType}" failed. ${serverMessage ? ` Server response: ${serverMessage}` : ''}`;

            Toast.show({
                html: exceptionText,
                color: 'b-red',
                style: 'color:white',
                timeout: 3000
            });

            console.error(exceptionText);
        }
    },

    tbar: {},

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

            }
        }
    }
});

scheduler.tbar.add([
    {
        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();

The test data looks like this:

{
success: true,
resources: {
rows: [
{
id: 1,
name: "Tafel 1",
amount: 2,
room: "Zaal 1"
},
{
id: 2,
name: "Tafel 2",
amount: 6,
room: "Zaal 1"
},
{
id: 3,
name: "Tafel 1",
amount: 2,
room: "Zaal 2"
},
{
id: 4,
name: "Tafel 2",
amount: 2,
room: "Zaal 2"
},
{
id: 5,
name: "Tafel 3",
amount: 4,
room: "Zaal 1"
},
{
id: 6,
name: "Tafel 1",
amount: 1,
room: "Zaal 3"
},
{
id: 7,
name: "Tafel 2",
amount: 2,
room: "Zaal 3"
},
{
id: 8,
name: "Tafel 3",
amount: 6,
room: "Zaal 3"
},
{
id: 9,
name: "Tafel 3",
amount: 2,
room: "Zaal 2"
},
{
id: 10,
name: "Tafel 4",
amount: 3,
room: "Zaal 2"
}
]
},
events: {
rows: [
{
id: 1,
startDate: "2022-09-22 12:30:00",
duration: 3,
durationUnit: "h",
name: "Event 1",
style: "border-radius:5px"
},
{
id: 2,
startDate: "2022-09-22 12:30:00",
duration: 3,
durationUnit: "h",
name: "Event 2",
style: "border-radius:5px"
},
{
id: 3,
startDate: "2022-09-23 12:30:00",
duration: 2,
durationUnit: "h",
name: "Event 3",
style: "border-radius:5px"
},
{
id: 4,
startDate: "2022-09-22 17:30:00",
duration: 4,
durationUnit: "h",
name: "Event 4",
style: "border-radius:5px"
},
{
id: 5,
startDate: "2022-09-22 20:00:00",
duration: 2,
durationUnit: "h",
name: "Event 5",
style: "border-radius:5px"
}
]
},
assignments: {
rows: [
{
id: 1,
resourceId: 1,
eventId: 1
},
{
id: 2,
resourceId: 2,
eventId: 2
},
{
id: 3,
resourceId: 3,
eventId: 3
},
{
id: 4,
resourceId: 4,
eventId: 4
},
{
id: 5,
resourceId: 5,
eventId: 5
}
]
},
dependencies: {
rows: [
{
id: 1,
from: 1,
to: 2,
type: 0
}
]
}
}

It doesn't work with other test data or code that I copied from the demo's.

If I remove the 'rows' indexes than I get no error but I also can't see any data in the scheduler.

Do u guys see what's wrong?

Thanks in advance.


Post by alex.l »

Hi glennvl91,

First of all, you enabled autoSync, but did not provide sync URL in transport configs.
Second thing, please format dates according to ISO standards or define format for all date fields in data models.
https://bryntum.com/docs/scheduler-pro/api/Core/data/field/DateDataField#config-format

Example of date format

"startDate"    : "2020-03-23T03:00"

https://bryntum.com/docs/scheduler-pro/api/Core/helper/DateHelper#formatting-dates

Third, I am not sure how relevant is it, the JSON you provided is not valid, it needs to use "" for all properties, but maybe it's only because of the way you copied that. So, I won't bet on it.
And we suggest to use project for SchedulerPro, CrudManager is built-in into ProjectModel.
https://bryntum.com/docs/scheduler-pro/api/SchedulerPro/model/ProjectModel

Full guide is here: https://bryntum.com/docs/scheduler-pro/guide/SchedulerPro/basics/project_data

All the best,
Alex


Post by glennvl91 »

Thanks!

The use of project model made it work!


Post Reply