Support Forum
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 But this is what i got Im trying to get this Which we have achieved using zoomLevels earlier.
Any guideline for creating presets is highly appreciated.
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 But this is what i got Im trying to get this Which we have achieved using zoomLevels earlier.
Any guideline for creating presets is highly appreciated.
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:
Try to Zoom In/Out. See only 2 zoom levels exist.
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 }
]
});
Pavlo Miklashevych
Sr. Frontend Developer
You can do similar dynamically, for example:
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
scheduler.presets.removeAll();
scheduler.presets.add([
{
base : 'hourAndDay',
id : 'MyHourAndDay'
},
{
base : 'weekAndMonth',
id : 'MyWeekAndMonth'
}
]);
scheduler.viewPreset = 'MyHourAndDay';
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
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
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. This is what I got
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
},
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. This is what I got
- Attachments
-
- app.js
- (3.46 KiB) Downloaded 112 times
Hello,
To create new preset with minimal effort, you can extend 'minuteAndHour' and fix "timeResolution - increment" and "headers - minute - increment":
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:
Also I'd like to highlight the difference between timeResolution increment config and header increment config.
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 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.
Best,
Pavel
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'
}
]
}
],
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 }
]
});
Also I'd like to highlight the difference between timeResolution increment config and header increment config.
{
unit : 'minute',
increment : 15,
dateFormat : 'HH:mm'
}
timeResolution : {
unit : 'minute',
increment : 5
},
Pavel
Pavlo Miklashevych
Sr. Frontend Developer