Our pure JavaScript Scheduler component


Post by pmiklashevich »

Are you checking with one of our demos or you already embedded it to your app? I need to be able to reproduce the issue to help you. Please tell me what demo should I check or apply your own testcase for investigation.

Pavlo Miklashevych
Sr. Frontend Developer


Post by vishnukumar »

I already embedded it with my applicaion.
The demo is integrate with vue cdn
https://www.bryntum.com/examples/scheduler/vue/javascript/cdn/

Post by pmiklashevich »

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


Post by pmiklashevich »

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:
        // 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);
and use setTimeSpan instead to prevent situation when new start date > current end date, otherwise you'll get an error
    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


Post by vishnukumar »

Thanks,

its working

Post Reply