Discuss anything related to web development but no technical support questions
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.
Please do the following steps:
choose a demo to start working with (I've chosen Animations, you can choose another)
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.
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 (199.82 KiB) Viewed 1912 times
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.