Our pure JavaScript Scheduler component


Post by LMS2021 »

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.

Attachments
Capture.PNG
Capture.PNG (52.46 KiB) Viewed 675 times

Post by Maxim Gorkovsky »

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.


Post by LMS2021 »

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)}
/>
Attachments
Capture.PNG
Capture.PNG (94.04 KiB) Viewed 655 times

Post by alex.l »

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


Post Reply