Hi Team,
I want to set the zoom out percentage of the scheduler. I have attached the image in which I want to zoom out a little bit and disallow manual zoom in or out.
Thanks,
Mukesh.
Hello.
To disable user zooming you can disable zoomOnMouseWheel
and zoomOnTimeAxisDoubleClick
configs as described in this doc: https://bryntum.com/docs/scheduler/#Scheduler/view/mixin/TimelineZoomable
Not sure what do you mean by zoom out a little bit but probably zoomToSpan
is what you need.
Hi,
I have my current scheduler zoom as below.
I am trying to zoom out a little so that it will be able to see large portions of the events without making a horizontal scroll. I have my Start Time as 5 Am and End Time as 11:30 PM. ANd my events starts around 10AM.
So there is a huge empty space in the beginning.
If I could zoom out a little bit that would work wonders for me.
Please see the file attached.
<BryntumScheduler
ref={scheduler}
zoomOnMouseWheel ={false}
onBeforeEventEditShow= {(selected: any) => handleChange(selected)}
change= {(selected: any) => handleChange(selected)}
rowHeight= {30}
createEventOnDblClick = {false}
zoomOnTimeAxisDoubleClick ={false}
eventDragCreate = {false}
enableHeaderContextMenu={false}
headerContextMenu = {false}
eventContextMenu = {false}
allowOverlap={false}
viewPreset={{
tickWidth: 30,
zoomToLevel: 70,
base: 'minuteAndHour',
displayDateFormat: 'h:mm', // Controls how dates will be displayed in tooltips etc
shiftIncrement: 15, // Controls how much time to skip when calling shiftNext and shiftPrevious.
shiftUnit: 'minute', // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
defaultSpan: 12, // By default, if no end date is supplied to a view it will show 12 hours
timeResolution: {
// Dates will be snapped to this resolution
unit: 'minute', // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
increment: 15,
},
headers: [
{
unit : 'hour',
dateFormat : 'a'
},
{
unit: 'minute',
increment: 15,
dateFormat: 'h:mm',
},
],
}}
resources={resources}
startDate={getStartDate(scheduleData?.scheduleDay)}
endDate={getendDate(scheduleData?.scheduleDay)}
eventBodyTemplate = {(data: any) => div(data)}
eventRenderer={(selected: any) => check(selected)}
/>
We are talking about https://bryntum.com/docs/scheduler/#Scheduler/preset/ViewPreset here.
You should set https://bryntum.com/docs/scheduler/#Scheduler/view/mixin/TimelineViewPresets#config-viewPreset as you need to have more time at one tick, so your events will fit the space.
Another option is to set startDate
closer to the beginning of your events.
All the best,
Alex