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.