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).
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;
}
}
]
**/
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'
}
]
},