I need to create a scheduler with timeline of 15 min grid but event can snap to 5 min.
I can achieve this using the Time resolution demo by setting Time Resolutio slider = 5 and Zoom Level slider = 18. I would like to know how to achieve this through code without using the slider. Please also advise if possible to reduce the width of each time column (15 min).
Appreciate any advice. Thanks.
Timeresolution.JPG (39.86 KiB) Viewed 675 times
Re: [INFO REQ] Time resolution demo
Posted: Sat Jan 09, 2021 11:15 am
by mats
Sure, just open the demo and you will see the code executed.
{
type : 'slider',
ref : 'resolution',
width : 130,
text : 'Time resolution',
showValue : true,
min : 5,
max : 60,
step : 5,
value : 30,
onChange({ value }) {
scheduler.timeResolution = value;
}
},
I meant that I do not want to have the slider in the scheduler. So I tried commenting out the sliders and adding setting timeResolution to 5 and zoomLevel to 18 in the code. timeResolution behave correctly to snap to 5 min interval but zoomLevel is not showing 15 min interval as per what can be achieved via the slider. What should be the right way to achieve it without using slider ?
startDate : new Date(2021, 0, 1, 8),
endDate : new Date(2021, 0, 1, 19),
viewPreset : 'hourAndDay',
snap : true,
timeResolution : 5,
zoomLevel : 18
/**
tbar : [
{
type : 'checkbox',
ref : 'snap',
label : 'Use snapping',
checked : true,
onChange({ checked }) {
scheduler.snap = checked;
}
},
{
type : 'slider',
ref : 'resolution',
width : 130,
text : 'Time resolution',
showValue : true,
min : 5,
max : 60,
step : 5,
value : 30,
onChange({ value }) {
scheduler.timeResolution = value;
}
},
'->',
{
type : 'slider',
ref : 'zoom',
width : 130,
text : 'Zoom',
showValue : true,
min : 0,
max : 25,
value : 18,
onInput({ value }) {
scheduler.zoomLevel = value;
}
}
]
**/
Timeresolution2.JPG (31.58 KiB) Viewed 670 times
Re: [INFO REQ] Time resolution demo
Posted: Mon Jan 11, 2021 12:25 pm
by pmiklashevich
Hello,
The slider just sets the zoomLevel property. Please check out the docs. The zoomLevel is just an index of the array of view presets the scheduler supports. Please see presets config for details.
timeResolution to 5 and zoomLevel to 18 in the code
Please apply this config to the scheduler:
const scheduler = new Scheduler({
viewPreset : {
id : 'myPreset',
base : 'minuteAndHour',
tickWidth : 130,
timeResolution : {
unit : 'minute',
increment : 5
},
headers : [
{
unit : 'hour',
dateFormat : 'ddd MM/DD, hA'
},
{
unit : 'minute',
increment : 15,
dateFormat : 'mm'
}
]
},