Our pure JavaScript Scheduler component


Post by nsarvesh14 »

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.

MicrosoftTeams-image (3).png
MicrosoftTeams-image (3).png (513.6 KiB) Viewed 873 times
Attachments
MicrosoftTeams-image (2).png
MicrosoftTeams-image (2).png (138.76 KiB) Viewed 873 times
MicrosoftTeams-image (1).png
MicrosoftTeams-image (1).png (156.83 KiB) Viewed 873 times

Post by mats »

Please look at the reason of the load failure, looks like CORS issue to me (are you trying to load from a remote URL)?

Please study: https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api


Post by nsarvesh14 »

The issue is resolved. It was a CORS issue. We fixed it. Forgot to update in the forum.
Thanks for the prompt response.


Post Reply