Support Forum
Zoom levels are configurable. Please see zoomLevels config.
In Configuration demo please select "Minutes" preset from the combo. See min tick is 30 mins. But when you zoomIn/zoomOut zoom level configs are used. If you look at lib/Scheduler/view/mixin/TimelineZoomable.js and search for `zoomLevels`, you'll see minute levels:
`increment` is equal to 15. Zoom levels configurations replace some default configs of the view preset. If you set `increment` to 30 in your zoomLevels you'll get what you want.
If you look at lib/Scheduler/preset/PresetManager.js and search for `minuteAndHour` preset you'll see timeResolution is set to 30 minutes:
Best,
Pavel
In Configuration demo please select "Minutes" preset from the combo. See min tick is 30 mins. But when you zoomIn/zoomOut zoom level configs are used. If you look at lib/Scheduler/view/mixin/TimelineZoomable.js and search for `zoomLevels`, you'll see minute levels:
//MINUTE
{ width : 30, increment : 15, resolution : 5, preset : 'minuteAndHour' },
{ width : 60, increment : 15, resolution : 5, preset : 'minuteAndHour' },
{ width : 130, increment : 15, resolution : 5, preset : 'minuteAndHour' },
If you look at lib/Scheduler/preset/PresetManager.js and search for `minuteAndHour` preset you'll see timeResolution is set to 30 minutes:
minuteAndHour : {
tickWidth : 100, // Time column width
tickHeight : 60,
displayDateFormat : 'll LT', // Controls how dates will be displayed in tooltips etc
shiftIncrement : 1, // Controls how much time to skip when calling shiftNext and shiftPrevious.
shiftUnit : 'hour', // Valid values are "MILLI", "SECOND", "minute", "HOUR", "DAY", "WEEK", "MONTH", "QUARTER", "YEAR".
defaultSpan : 24, // By default, if no end date is supplied to a view it will show 24 hours
timeResolution : { // Dates will be snapped to this resolution
unit : 'minute', // Valid values are "MILLI", "SECOND", "minute", "HOUR", "DAY", "WEEK", "MONTH", "QUARTER", "YEAR".
increment : 30
},
// This defines your header, you must include a "middle" object, top/bottom are optional.
// For each row you can define "unit", "increment", "dateFormat", "renderer", "align", and "thisObj"
headerConfig : {
middle : {
unit : 'minute',
increment : '30',
dateFormat : 'mm'
},
top : {
unit : 'hour',
dateFormat : 'ddd MM/DD, hA'
}
}
},
Pavel
Pavlo Miklashevych
Sr. Frontend Developer
what about the order should be? how does it matter
here last zoom level not working as expected
I need show from minutes to years, is that configurable?
{ width: 60, increment: 30, resolution: 5, preset: 'minuteAndHour' },
{ width: 100, increment: 15, resolution: 5, preset: 'minuteAndHour' },
{ width: 60, increment: 5, resolution: 5, preset: 'minuteAndHour' },
{
width: 80,
increment: 2,
resolution: 30,
preset: 'hourAndDay',
resolutionUnit: 'MINUTE'
},
{
width: 100,
increment: 1,
resolution: 30,
preset: 'hourAndDay',
resolutionUnit: 'MINUTE'
}
I need show from minutes to years, is that configurable?
Yes, that is configurable. width, increment and resolution replace corresponding values from the specified preset. Real zoom level doesn't depend on a position in the zoomLevels array. Real level is calculated based on the values provided in the config, to make able scrolling zooms. But need to be careful, because calculated indexes can be float or some of them can be identical. In this case scrolling through zoom will be broken. We have a ticket to get it fixed: https://app.assembla.com/spaces/bryntum/tickets/7783-zoomin-and-zoomout-get-stuck-at-a-random-level/details
Please try to setup zoom levels you want with correct presets, and then if the order will be wrong or some of levels won't work, I'll help you to adjust them. width, increment, resolution is required to be different for similar view presets to make zoom levels different.
P.S. Please look at our default zoomLevels specified in lib/Scheduler/view/mixin/TimelineZoomable.js to get an idea of what is supposed to be specified.
Best,
Pavel
Please try to setup zoom levels you want with correct presets, and then if the order will be wrong or some of levels won't work, I'll help you to adjust them. width, increment, resolution is required to be different for similar view presets to make zoom levels different.
P.S. Please look at our default zoomLevels specified in lib/Scheduler/view/mixin/TimelineZoomable.js to get an idea of what is supposed to be specified.
Best,
Pavel
Pavlo Miklashevych
Sr. Frontend Developer
Thanks Pavel,
I have a defined zoom level array and zoom is not working from 5th index, could you please explain what is the reason and give me the corrected array as well? (note: zoom level should be from minutes => year)
Thanks
I have a defined zoom level array and zoom is not working from 5th index, could you please explain what is the reason and give me the corrected array as well? (note: zoom level should be from minutes => year)
{ width: 100, increment: 30, resolution: 5, preset: 'minuteAndHour' },
{ width: 150, increment: 30, resolution: 5, preset: 'minuteAndHour' },
{ width: 80, increment: 15, resolution: 5, preset: 'minuteAndHour' },
{ width: 60, increment: 5, resolution: 5, preset: 'minuteAndHour' },
{
width: 100,
increment: 2,
resolution: 30,
preset: 'hourAndDay',
resolutionUnit: 'MINUTE'
},
{
width: 120,
increment: 1,
resolution: 30,
preset: 'hourAndDay',
resolutionUnit: 'MINUTE'
},
{
width: 100,
increment: 1,
resolution: 1,
preset: 'weekAndDay',
resolutionUnit: 'HOUR'
},
{
width: 64,
increment: 2,
resolution: 30,
preset: 'hourAndDay',
resolutionUnit: 'MINUTE'
},
{ width: 20, increment: 1, resolution: 1, preset: 'weekAndDayLetter' },
{
width: 54,
increment: 1,
resolution: 1,
preset: 'weekAndDay',
resolutionUnit: 'HOUR'
},
{
width: 100,
increment: 1,
resolution: 7,
preset: 'monthAndYear',
resolutionUnit: 'DAY'
},
{
width: 30,
increment: 1,
resolution: 1,
preset: 'weekDateAndMonth',
resolutionUnit: 'DAY'
},
{
width: 100,
increment: 1,
resolution: 1,
preset: 'year',
resolutionUnit: 'MONTH'
},
{
width: 160,
increment: 1,
resolution: 1,
preset: 'year',
resolutionUnit: 'MONTH'
},
{
width: 80,
increment: 1,
resolution: 1,
preset: 'manyYears',
resolutionUnit: 'YEAR'
},
{
width: 50,
increment: 1,
resolution: 1,
preset: 'year',
resolutionUnit: 'MONTH'
},
Ok, let me show you how to setup zoom levels. For example lets modify Basic demo (examples/basic/app.js)
How did I find the order? Lets take a look closer. Lets create only 2 zoom levels: FOO & BAR with the same numbers. Then go to the browser and try to change zoom by mouse wheel. See BAR level is 0 but after you zoom to 0 level you can't zoom to FOO. It's not applicable.
Let's change width of FOO to 100 and try again. Now when you scroll up zoom is not getting changed. When you scroll down zoom is infinite. FOO is 0 level, but BAR is -0.5. That means that order in zoom levels array is wrong.
Let's change width of FOO to 50, BAR to 100 and try again. Now there are only 2 zoom levels: one scroll up and one scroll down. Further scrolling has no effect. Foo is 0, Bar is 1. Calculated zoom levels should match array indexes. You can play around other parameters like increment, resolution and resolutionUnit, but please make sure order is correct. That's really important when "preset" of different zoom levels is the same
If you want to have more control over zoom levels you can specify 6 custom view presets. Make sure every view preset is what you expect to see on the screen. So then you know for sure what preset is applied on every level.
Best wishes,
Pavel
let zoomLevels = [
{ name : 'YEAR', preset : 'manyYears', width : 50, increment : 1, resolution : 1, resolutionUnit : 'YEAR' }, // level 0
{ name : 'QUARTER', preset : 'year', width : 50, increment : 1, resolution : 3, resolutionUnit : 'MONTH' }, // level 1
{ name : 'MONTH', preset : 'year', width : 100, increment : 1, resolution : 1, resolutionUnit : 'MONTH' }, // level 2
{ name : 'WEEK', preset : 'weekAndMonth', width : 50, increment : 1, resolution : 4, resolutionUnit : 'WEEK' }, // level 3
{ name : 'DAY', preset : 'weekAndMonth', width : 100, increment : 1, resolution : 7, resolutionUnit : 'DAY' }, // level 4
{ name : 'HOUR', preset : 'hourAndDay', width : 50, increment : 1, resolution : 1, resolutionUnit : 'HOUR' }, // level 5
{ name : 'MINUTE', preset : 'hourAndDay', width : 100, increment : 1, resolution : 1, resolutionUnit : 'MINUTE' } // level 6
];
let scheduler = new Scheduler({
zoomLevels : zoomLevels,
listeners : {
zoomChange({ level }) {
console.log(level, scheduler.zoomLevel);
// level is a row of zoomLevels, scheduler.zoomLevel is a number => calculated zoom level index
}
},
appendTo : 'container',
minHeight : '20em',
resources : resources,
events : events,
startDate : new Date(2017, 0, 1),
// set view preset to match MINUTE zoom level
viewPreset : {
name : 'hourAndDay',
tickWidth : 100 // tick width 100 to match width in the last (index 6) zoom level
},
rowHeight : 50,
barMargin : 5,
multiEventSelect : true,
columns : [
{ text : 'Name', field : 'name', width : 130 }
]
});
let zoomLevels = [
{ name : 'FOO', preset : 'year', width : 50, increment : 1, resolution : 1, resolutionUnit : 'MONTH' }, // not applicable
{ name : 'BAR', preset : 'year', width : 50, increment : 1, resolution : 1, resolutionUnit : 'MONTH' } // 0
];
let scheduler = new Scheduler({
zoomLevels : zoomLevels,
listeners : {
zoomChange({ level }) {
console.log(level, scheduler.zoomLevel);
}
},
let zoomLevels = [
{ name : 'FOO', preset : 'year', width : 100, increment : 1, resolution : 1, resolutionUnit : 'MONTH' }, // 0
{ name : 'BAR', preset : 'year', width : 50, increment : 1, resolution : 1, resolutionUnit : 'MONTH' } // -0.5
];
let scheduler = new Scheduler({
zoomLevels : zoomLevels,
listeners : {
zoomChange({ level }) {
console.log(level, scheduler.zoomLevel);
}
},
let zoomLevels = [
{ name : 'FOO', preset : 'year', width : 50, increment : 1, resolution : 1, resolutionUnit : 'MONTH' }, // 0
{ name : 'BAR', preset : 'year', width : 100, increment : 1, resolution : 1, resolutionUnit : 'MONTH' } // 1
];
let scheduler = new Scheduler({
zoomLevels : zoomLevels,
listeners : {
zoomChange({ level }) {
console.log(level, scheduler.zoomLevel);
}
},
Best wishes,
Pavel
Pavlo Miklashevych
Sr. Frontend Developer
Thanks Pavel,
In examples you mentioned only one preset here, 1st example you have all presets but the order is YEAR to MINUTE. This is NOT what I want
I did the same way.It is working. But I need MINUTE to YEAR zooming. see the code below
here,
how can I show 'hourAndDay' presets ?
Is it not possible to do it by reverse order ?
Can't we have same width values from different presets (in this example width:100) ?
Thanks
In examples you mentioned only one preset here, 1st example you have all presets but the order is YEAR to MINUTE. This is NOT what I want
I did the same way.It is working. But I need MINUTE to YEAR zooming. see the code below
[
{ width: 50, increment: 30, resolution: 5, preset: 'minuteAndHour' }, // 0
{ width: 60, increment: 30, resolution: 5, preset: 'minuteAndHour' }, // 1
{ width: 80, increment: 15, resolution: 5, preset: 'minuteAndHour' }, // 2
{ width: 100, increment: 5, resolution: 5, preset: 'minuteAndHour' }, // 3
{ width: 100, increment: 1, resolution: 30, preset: 'hourAndDay' }, // ? No Zoom Index, not visible
{ width: 150, increment: 1, resolution: 30, preset: 'hourAndDay' } // ? No Zoom Index, not visible
]
how can I show 'hourAndDay' presets ?
Is it not possible to do it by reverse order ?
Can't we have same width values from different presets (in this example width:100) ?
Thanks
Just need to find correct order. It's hard to manually sort that zoom levels to make it work. Please wait until https://app.assembla.com/spaces/bryntum/tickets/7783 is done.how can I show 'hourAndDay' presets ?
Meanwhile please create custom view presets per level. How to register new view presets is shown in examples/configuration demo:
PresetManager.registerPreset('dayNightShift', {...
Please create 'myMinute', 'myHour', 'myDay' presets and so on. Then in zoomLevels specify your preset names. That will explicitly define parameters for zoom levels.
No for now it's not possible. You can zoom to level or zoom to a view preset, but when you zoomIn/zoomOut it takes current level +1 / -1.Is it not possible to do it by reverse order ?
If zoom levels have same view presets and width, increment must be different.Can't we have same width values from different presets (in this example width:100) ?
Pavlo Miklashevych
Sr. Frontend Developer
Hi Pavel,
I have updated your latest version (V3.0.1) and our custom zoom levels do not work anymore.
I tried to find "zoomLevels" property but couldn't. Earlier we have set our custom zoom levels using this property.
I have tested using a new basic example provided with the new version, the custom zoom levels are not working. Here I have attached the file. Whatever zoom level that we set, the scheduler sticks into default preset.
What we are missing here?
I have updated your latest version (V3.0.1) and our custom zoom levels do not work anymore.
I tried to find "zoomLevels" property but couldn't. Earlier we have set our custom zoom levels using this property.
I have tested using a new basic example provided with the new version, the custom zoom levels are not working. Here I have attached the file. Whatever zoom level that we set, the scheduler sticks into default preset.
What we are missing here?
- Attachments
-
- Capture.JPG (73.47 KiB) Viewed 2794 times
-
- app.js
- (3.61 KiB) Downloaded 139 times
Have you read the 3.0 upgrade guide? https://bryntum.com/docs/scheduler/#guides/upgrades/3.0.md