Discuss anything related to web development but no technical support questions


Post by JbLambert »

Hello,

We try to use Bryntum Scheduler on vuejs project, when i try to implement the demo timeResolution to have a slider to zoomLevel the tbar field doesn't work and when i look on the documentation of vuejs for Bryntum scheduler i don't see this field too.

So, i need to know if i can use it on vuejs or not ? And if yes, how i can use it, please.

Many thanks.


Post by saki »

Please do the following steps:

  1. choose a demo to start working with (I've chosen Animations, you can choose another)

  2. copy tbar from the vanilla demo to schedulerConfig so that it reads:

    export default {
        minHeight: '20em',
        // ...
        config: {
            snap : true,
            tbar: [
                {
                    type: 'checkbox',
                    ref: 'snap',
                    label: 'Use snapping',
                    checked: true,
                    onChange({ checked }) {
                        const scheduler = this.up('scheduler');
                        scheduler.snap = checked;
                    }
                },
                {
                    type: 'slider',
                    ref: 'resolution',
                    width: 130,
                    text: 'Time resolution',
                    showValue: true,
                    min: 5,
                    max: 60,
                    step: 5,
                    value: 30,
                    onChange({ value }) {
                        const scheduler = this.up('scheduler');
                        scheduler.timeResolution = value;
                    }
                },
                '->',
                {
                    type: 'slider',
                    ref: 'zoom',
                    width: 130,
                    text: 'Zoom',
                    showValue: true,
                    min: 0,
                    max: 25,
                    value: 15,
                    onInput({ value }) {
                        const scheduler = this.up('scheduler');
                        scheduler.zoomLevel = value;
                    }
                }
            ]
        },

    Please note that the handlers above are already adjusted to work.

  3. add config to the markup:

    <scheduler
        ref                  = "scheduler"
        :config              = "schedulerConfig.config"
    ...
    ></scheduler>

That should be all to get it on screen and working; you may need your own handlers, of course. It should look like this:

Screen Shot 2020-11-24 at 14.09.40.png
Screen Shot 2020-11-24 at 14.09.40.png (199.82 KiB) Viewed 1851 times

Post by JbLambert »

Hello Saki,

I have tried your solution and it works on my side too.
So, thank you very much for your advice and thanks for your reactivity.


Post Reply