Hi Team,
We are trying to integrate our backend with Bryntum Scheduler Vue.
Please find below code of our Scheduler Vue Code
Scheduler Config.js
import {AjaxHelper,DateHelper} from 'bryntum-scheduler';
const timeRanges = [
{
id: 1,
startDate: new Date(2020,5,29, 8),
endDate: new Date(2020,5,29, 9),
name: "Morning coffee",
cls: 'coffee'
},
{
id: 1,
startDate: new Date(2020,5, 29, 18),
endDate: new Date(2020,5, 29, 19),
name: "Morning coffee",
cls: 'coffee'
}
]
export default {
nonWorkingTimeFeature : true,
eventStore : {
// Additional fields added to EventModel
fields : ['done', 'canceled', 'locked']
},
features : {
eventTooltip : {
template : () => AjaxHelper.get(`https://jsonplaceholder.typicode.com/todos/1`).then(response => response.text())
},
strike:true,
timeRanges: {
enableResizing : false,
showCurrentTimeLine : true,
showHeaderElements : true
},
eventContextMenu : {
items : {
moveLeft : {
text : 'Move left',
icon : 'b-fa b-fa-fw b-fa-arrow-left',
cls : 'b-separator',
onItem({ eventRecord }) {
console.log(eventRecord.startDate);
eventRecord.startDate = DateHelper.add(eventRecord.startDate, -1, 'hour');
}
},
moveRight : {
text : 'Move right',
icon : 'b-fa b-fa-fw b-fa-arrow-right',
onItem({ eventRecord }) {
console.log(eventRecord.startDate);
eventRecord.startDate = DateHelper.add(eventRecord.startDate,1, 'hour');
}
},
split : {
text : 'Split',
icon : 'b-fa b-fa-fw b-fa-cut',
onItem({ eventRecord }) {
eventRecord.split();
}
},
lock : {
text : 'Lock',
icon : 'b-fa b-fa-fw b-fa-lock',
cls : 'b-separator',
onItem({ eventRecord }) {
eventRecord.locked = true;
eventRecord.draggable = false;
eventRecord.resizable = false;
}
}
},
// Process items before context menu is shown, add or remove or prevent it
processItems({ eventRecord, items }) {
if (eventRecord.eventType === 'meeting') {
console.log('coming inside the eventType meeting');
// Add a custom item for meetings
items.cancel = {
text : 'Cancel',
icon : 'b-fa b-fa-fw b-fa-ban',
cls : 'b-separator',
onItem({ eventRecord }) {
eventRecord.canceled = true;
}
};
}
if (eventRecord.eventType === 'activity') {
console.log('coming inside the eventType meeting');
// Remove "Edit" and "Delete" items for activities
items.editEvent = items.deleteEvent = false;
// Add a "Done" item
items.done = {
text : 'Done',
icon : 'b-fa b-fa-fw b-fa-check',
cls : 'b-separator',
weight : 500,
onItem({ eventRecord }) {
eventRecord.done = true;
}
};
}
// Not possible to lock canceled or completed events, disable the item
if (eventRecord.canceled || eventRecord.done) {
items.lock.disabled = true;
}
// Prevent menu for "locked" event
return !eventRecord.locked;
}
},
},
minHeight: '20em',
timeRanges: timeRanges,
startDate: new Date(2020,6,3, 8),
endDate: new Date(2020,6,3,19),
viewPreset: 'hourAndDay',
rowHeight: 50,
barMargin: 5,
multiEventSelect: true,
eventLayout : 'pack',
workingTime : {fromHour : 8,toHour : 19},
forceFit : true,
crudManager : {
autoLoad : true,
transport : {
load : {
method :'GET',
url : 'https://10.177.210.224:8030/byndata/data.json'
}
}
},
columns : [
{
text : 'NAME',
field : 'name',
width : 100,
region : 'left',
htmlEncode : false,
renderer : ({ record }) => `${record.name} <div id="location_${record.id}" style="margin-left: 10px;font-size:20px;color: gray" class="location b-fa b-fa-map-marker"></div>`,
}
],
};
<scheduler v-bind="currentProperties"
ref = "scheduler"
:columns = "schedulerConfig.columns"
[b] :crudManager = "schedulerConfig.crudManager" [/b]
:minHeight = "schedulerConfig.minHeight"
:startDate = "schedulerConfig.startDate"
:endDate = "schedulerConfig.endDate"
:viewPreset = "schedulerConfig.viewPreset"
:rowHeight = "schedulerConfig.rowHeight"
:barMargin = "schedulerConfig.barMargin"
:multiEventSelect = "schedulerConfig.multiEventSelect"
:mode = "schedulerConfig.mode"
:workingTime = "schedulerConfig.workingTime"
:forceFit = "schedulerConfig.forceFit"
:eventLayout = "schedulerConfig.eventLayout"
:timeRanges = "schedulerConfig.timeRanges"
:stripeFeature = "schedulerConfig.features.strike"
:timeRangesFeature= "schedulerConfig.features.timeRanges"
:eventContextMenuFeature = "schedulerConfig.features.eventContextMenu"
:non-working-time-feature = "schedulerConfig.nonWorkingTimeFeature"
:eventTooltipFeature = "schedulerConfig.features.eventTooltip">
</scheduler>
{"success":true,"resources":{"rows":[{"id":"r1","name":"Mike"},{"id":"r2","name":"Tom"},{"id":"r3","name":"Chris"},{"id":"r4","name":"John"},{"id":"r5","name":"Dave"},{"id":"r6","name":"Scott"},{"id":"r7","name":"Alex"}]},"events":{"rows":[{"id":1,"resourceId":"r1","name":"Desk Activity","startDate":"2020-07-03 08:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":2,"resourceId":"r1","name":"Desk Activity","startDate":"2020-07-03 09:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":3,"resourceId":"r1","name":"Desk Activity","startDate":"2020-07-03 10:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":4,"resourceId":"r1","name":"Desk Activity","startDate":"2020-07-03 11:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":5,"resourceId":"r1","name":"Desk Activity","startDate":"2020-07-03 12:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":6,"resourceId":"r1","name":"Desk Activity","startDate":"2020-07-03 13:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":7,"resourceId":"r1","name":"Desk Activity","startDate":"2020-07-03 14:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":8,"resourceId":"r1","name":"Desk Activity","startDate":"2020-07-03 15:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":1,"resourceId":"r2","name":"Desk Activity","startDate":"2020-07-03 08:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":2,"resourceId":"r2","name":"Desk Activity","startDate":"2020-07-03 09:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":3,"resourceId":"r2","name":"Desk Activity","startDate":"2020-07-03 10:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":4,"resourceId":"r2","name":"Desk Activity","startDate":"2020-07-03 11:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":5,"resourceId":"r2","name":"Desk Activity","startDate":"2020-07-03 12:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":6,"resourceId":"r2","name":"Desk Activity","startDate":"2020-07-03 13:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":7,"resourceId":"r2","name":"Desk Activity","startDate":"2020-07-03 14:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":8,"resourceId":"r2","name":"Desk Activity","startDate":"2020-07-03 15:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":1,"resourceId":"r3","name":"Desk Activity","startDate":"2020-07-03 08:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":2,"resourceId":"r3","name":"Desk Activity","startDate":"2020-07-03 09:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":3,"resourceId":"r3","name":"Desk Activity","startDate":"2020-07-03 10:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":4,"resourceId":"r3","name":"Desk Activity","startDate":"2020-07-03 11:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":5,"resourceId":"r3","name":"Desk Activity","startDate":"2020-07-03 12:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":6,"resourceId":"r3","name":"Desk Activity","startDate":"2020-07-03 13:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":7,"resourceId":"r3","name":"Desk Activity","startDate":"2020-07-03 14:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":8,"resourceId":"r3","name":"Desk Activity","startDate":"2020-07-03 15:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":1,"resourceId":"r4","name":"Desk Activity","startDate":"2020-07-03 08:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":2,"resourceId":"r4","name":"Desk Activity","startDate":"2020-07-03 09:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":3,"resourceId":"r4","name":"Desk Activity","startDate":"2020-07-03 10:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":4,"resourceId":"r4","name":"Desk Activity","startDate":"2020-07-03 11:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":5,"resourceId":"r4","name":"Desk Activity","startDate":"2020-07-03 12:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":6,"resourceId":"r4","name":"Desk Activity","startDate":"2020-07-03 13:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":7,"resourceId":"r4","name":"Desk Activity","startDate":"2020-07-03 14:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":8,"resourceId":"r4","name":"Desk Activity","startDate":"2020-07-03 15:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":1,"resourceId":"r5","name":"Desk Activity","startDate":"2020-07-03 08:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":2,"resourceId":"r5","name":"Desk Activity","startDate":"2020-07-03 09:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":3,"resourceId":"r5","name":"Desk Activity","startDate":"2020-07-03 10:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":4,"resourceId":"r5","name":"Desk Activity","startDate":"2020-07-03 11:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":5,"resourceId":"r5","name":"Desk Activity","startDate":"2020-07-03 12:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":6,"resourceId":"r5","name":"Desk Activity","startDate":"2020-07-03 13:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":7,"resourceId":"r5","name":"Desk Activity","startDate":"2020-07-03 14:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":8,"resourceId":"r5","name":"Desk Activity","startDate":"2020-07-03 15:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":1,"resourceId":"r6","name":"Desk Activity","startDate":"2020-07-03 08:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":2,"resourceId":"r6","name":"Desk Activity","startDate":"2020-07-03 09:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":3,"resourceId":"r6","name":"Desk Activity","startDate":"2020-07-03 10:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":4,"resourceId":"r6","name":"Desk Activity","startDate":"2020-07-03 11:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":5,"resourceId":"r6","name":"Desk Activity","startDate":"2020-07-03 12:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":6,"resourceId":"r6","name":"Desk Activity","startDate":"2020-07-03 13:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":7,"resourceId":"r6","name":"Desk Activity","startDate":"2020-07-03 14:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":8,"resourceId":"r6","name":"Desk Activity","startDate":"2020-07-03 15:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":1,"resourceId":"r7","name":"Desk Activity","startDate":"2020-07-03 08:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":2,"resourceId":"r7","name":"Desk Activity","startDate":"2020-07-03 09:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":3,"resourceId":"r7","name":"Desk Activity","startDate":"2020-07-03 10:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":4,"resourceId":"r7","name":"Desk Activity","startDate":"2020-07-03 11:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":5,"resourceId":"r7","name":"Desk Activity","startDate":"2020-07-03 12:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":6,"resourceId":"r7","name":"Desk Activity","startDate":"2020-07-03 13:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":7,"resourceId":"r7","name":"Desk Activity","startDate":"2020-07-03 14:00","duration":1,"durationUnit":"h","eventColor":"orange"},{"id":8,"resourceId":"r7","name":"Desk Activity","startDate":"2020-07-03 15:00","duration":1,"durationUnit":"h","eventColor":"orange"}]}}
Also, see the screenshot from the browser we are able to access it and the JSON is rendering properly with your query params data
But when we try calling from CrudManager the fetch is failing. Please see the below screenshots
The data was loaded successfully when we copy the request and hit it in the browser.