Our pure JavaScript Scheduler component


Post by Samith »

Yes. I can't find any examples regarding custom zoom levels. Do we have to add new viewPresets for each custom presets?

Post by Samith »

Yes! I have tried to add a new custom preset but no luck.
First I got static typing error regarding "PresetManager.add" and uses @ts-ignore to ignore it

Then I have added new preset, but it didn't render what I want.
Im tried to get 15min time spans and this is my preset for it
preset.JPG
preset.JPG (44.81 KiB) Viewed 1455 times
But this is what i got
result.JPG
result.JPG (53.51 KiB) Viewed 1455 times
Im trying to get this
correct result.JPG
correct result.JPG (54.92 KiB) Viewed 1455 times
Which we have achieved using zoomLevels earlier.
Any guideline for creating presets is highly appreciated.

Post by pmiklashevich »

Zooming works through registered ViewPresets only now. This is described in TimelineViewPresets mixin docs. You can specify presets on the Scheduler.

Please try this code in Scheduler Basic demo:
let scheduler = new Scheduler({
    adopt            : 'container',
    minHeight        : '20em',
    resources        : resources,
    events           : events,
    startDate        : new Date(2017, 0, 1, 6),
    endDate          : new Date(2017, 0, 1, 20),
    presets : [
        {
            id                : 'MyHourAndDay',
            name              : 'My days',
            tickWidth         : 100,
            tickHeight        : 80,
            displayDateFormat : 'll LT',
            shiftUnit         : 'day',
            shiftIncrement    : 1,
            defaultSpan       : 5,
            timeResolution    : {
                unit      : 'hour',
                increment : 1
            },
            headers : [
                {
                    unit : 'week',
                    renderer(start) {
                        return DateHelper.getShortNameOfUnit('week') + '.' + DateHelper.format(start, 'WW MMM YYYY');
                    }
                },
                {
                    unit       : 'day',
                    dateFormat : 'dd DD'
                }
            ]
        },
        {
            id                : 'MyWeekAndMonth',
            name              : 'My weeks',
            tickWidth         : 100,
            tickHeight        : 105,
            displayDateFormat : 'll',
            shiftUnit         : 'week',
            shiftIncrement    : 5,
            defaultSpan       : 6,
            timeResolution    : {
                unit      : 'day',
                increment : 1
            },
            headers : [
                {
                    unit       : 'month',
                    dateFormat : 'MMM YYYY' //Jan 2017
                },
                {
                    unit       : 'week',
                    dateFormat : 'DD MMM'
                }
            ]
        }
    ],
    viewPreset       : 'MyHourAndDay',
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,

    columns : [
        { text : 'Name', field : 'name', width : 130 }
    ]
});
Try to Zoom In/Out. See only 2 zoom levels exist.

Pavlo Miklashevych
Sr. Frontend Developer


Post by pmiklashevich »

You can do similar dynamically, for example:
scheduler.presets.removeAll();

scheduler.presets.add([
    {
        base : 'hourAndDay',
        id   : 'MyHourAndDay'
    },
    {
        base : 'weekAndMonth',
        id   : 'MyWeekAndMonth'
    }
]);

scheduler.viewPreset = 'MyHourAndDay';
Pay attention to "base" in preset config. It allows you to reuse configuration from some default presets defined in PresetManager.
I'll update docs to make it more clear.

Also found a bug related to the zooming when you change presets on the fly. Ticket here: https://github.com/bryntum/support/issues/216

Pavlo Miklashevych
Sr. Frontend Developer


Post by Samith »

Hi Pavel,
I have set presets according to your suggestion but still can't create the header that we want. Actually second-level header (0 / 15 /30/45).
It seems
timeResolution: {
        unit: 'minute',
        increment: 15
 },
is not working.
Please follow the attached file which I have modified your basic example.
This change already brakes our major functionalities.I need to fix this as soon as possible.
correct result2.JPG
correct result2.JPG (32.78 KiB) Viewed 1448 times
This is what I got
result-basic.JPG
result-basic.JPG (46.25 KiB) Viewed 1447 times
Attachments
app.js
(3.46 KiB) Downloaded 112 times

Post by pmiklashevich »

Hello,

To create new preset with minimal effort, you can extend 'minuteAndHour' and fix "timeResolution - increment" and "headers - minute - increment":
    presets : [
        {
            base           : 'minuteAndHour',
            id             : 'MyHourAndDay',
            name           : 'My days',
            timeResolution : {
                unit      : 'minute',
                increment : 15
            },
            headers : [
                {
                    unit       : 'hour',
                    dateFormat : 'ddd MM/DD, hA'
                },
                {
                    unit       : 'minute',
                    increment  : 15,
                    dateFormat : 'mm'
                }
            ]
        }
    ],
In your testcase headers were configured wrong:
1. Need to specify increment for the lowest header
2. You set 4 headers which doesn't work well. I've created a ticket to get it fixed: https://github.com/bryntum/support/issues/223
Meanwhile please use up to 3 headers.

I've a bit modified your testcase, please see:
let scheduler = new Scheduler({
    adopt            : 'container',
    minHeight        : '20em',
    resources        : resources,
    events           : events,
    startDate        : new Date(2017, 0, 1, 6),
    endDate          : new Date(2017, 0, 1, 20),
    viewPreset       : 'MyHourAndDay',
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,

    presets : [
        {
            id                : 'MyHourAndDay',
            name              : 'My days',
            tickWidth         : 100,
            tickHeight        : 80,
            displayDateFormat : 'll LT',
            shiftUnit         : 'day',
            shiftIncrement    : 1,
            defaultSpan       : 5,
            timeResolution    : {
                unit      : 'minute',
                increment : 15
            },
            headers : [
                {
                    unit       : 'day',
                    dateFormat : 'ddd MM/DD'
                },
                {
                    unit       : 'hour',
                    dateFormat : 'HH:mm'
                },
                {
                    unit       : 'minute',
                    increment  : 15, // This line is important!
                    dateFormat : 'HH:mm'
                }
            ]
        }
    ],

    columns : [
        { text : 'Name', field : 'name', width : 130 }
    ]
});
Снимок экрана 2020-01-23 в 13.11.43.png
Снимок экрана 2020-01-23 в 13.11.43.png (65.74 KiB) Viewed 1441 times

Also I'd like to highlight the difference between timeResolution increment config and header increment config.
{
    unit       : 'minute',
    increment  : 15,
    dateFormat : 'HH:mm'
}
Header config means only header tick! So every 15 minutes will be a new header tick drawn (see lines in red on the screenshot).
timeResolution    : {
    unit      : 'minute',
    increment : 5
},
timeResolution config means minimal task duration. For example when you drag create a task or drag & drop a task. If increment is 5 that mean that you can create a task 5 mins long, or move it 5 mins forward/backward (see lines in blue on the screenshot). You can also pay attention to the tooltip which changes its text every 5 mins when you move mouse cursor horizontally.
Снимок экрана 2020-01-23 в 13.12.42.png
Снимок экрана 2020-01-23 в 13.12.42.png (60.74 KiB) Viewed 1441 times
Best,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by Samith »

Thanks! It works.

Post Reply