Support Forum
I already embedded it with my applicaion.
The demo is integrate with vue cdn
https://www.bryntum.com/examples/scheduler/vue/javascript/cdn/
The demo is integrate with vue cdn
https://www.bryntum.com/examples/scheduler/vue/javascript/cdn/
Ok, I see now what the problem is. You use reference to Vue component, when Scheduler API works with pure Scheduler component. To get an access to the Scheduler, please use "me.$refs.scheduler.schedulerEngine". If you modify examples/vue/javascript/cdn/app.js you can easily check it:
methods : {
getData : function() {
var me = this;
axios.get('./data/data.json').then(function(response) {
var data = response.data;
me.resources = data.resources.rows;
me.events = data.events.rows;
me.timeRanges = data.timeRanges.rows;
console.log(me.$refs.scheduler === bryntum.query('scheduler')); // false
console.log(me.$refs.scheduler.schedulerEngine === bryntum.query('scheduler')); // true
console.log(me.$refs.scheduler.schedulerEngine.$name); // Scheduler
var sch = me.$refs.scheduler.schedulerEngine;
sch.viewPreset = 'weekAndDay';
sch.startDate = new Date(2019, 5, 1);
sch.endDate = new Date(2019, 10, 1);
});
},
Pavlo Miklashevych
Sr. Frontend Developer
Predicting your questions about why start date is Sun May 26 2019 00:00:00 GMT+0300 and end date is Sun Nov 03 2019 00:00:00 GMT+0200 in this case, I'd like to add that this is because of auto adjustments. To have exact start/end dates please add autoAdjustTimeAxis `false` to examples/vue/javascript/cdn/components/scheduler.js:
and use setTimeSpan instead to prevent situation when new start date > current end date, otherwise you'll get an error
// Create a Bryntum Grid with props as configs
config.autoAdjustTimeAxis = false; // TODO: value is hardcoded for the testcase, has to moved to props
var engine = this.schedulerEngine = new bryntum.scheduler.Scheduler(config);
methods : {
getData : function() {
var me = this;
axios.get('./data/data.json').then(function(response) {
var data = response.data;
me.resources = data.resources.rows;
me.events = data.events.rows;
me.timeRanges = data.timeRanges.rows;
console.log(me.$refs.scheduler === bryntum.query('scheduler')); // false
console.log(me.$refs.scheduler.schedulerEngine === bryntum.query('scheduler')); // true
console.log(me.$refs.scheduler.schedulerEngine.$name); // Scheduler
var sch = me.$refs.scheduler.schedulerEngine;
sch.viewPreset = 'weekAndDay';
// sch.startDate = new Date(2019, 5, 1);
// sch.endDate = new Date(2019, 10, 1);
sch.setTimeSpan(new Date(2019, 5, 1), new Date(2019, 10, 1));
});
},
Pavlo Miklashevych
Sr. Frontend Developer