Our pure JavaScript Scheduler component


Post by ws1001 »

Hi,

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
Timeresolution.JPG (39.86 KiB) Viewed 657 times

Post 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;
            }
        },

Docs
https://bryntum.com/docs/scheduler/#Scheduler/view/Scheduler#property-timeResolution

You can also set tickSize in the same way, either set it in your viewPreset JSON or do it anytime at runtime.

https://bryntum.com/docs/scheduler/#Scheduler/view/mixin/TimelineEventRendering#property-tickSize


Post by ws1001 »

Hi,

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
Timeresolution2.JPG (31.58 KiB) Viewed 652 times

Post 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'
            }
        ]
    },

Please also read these docs:
https://www.bryntum.com/docs/scheduler/#Scheduler/view/mixin/TimelineZoomable
https://www.bryntum.com/docs/scheduler/#Scheduler/preset/PresetManager

Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by ws1001 »

Thanks Pavel.


Post Reply