Hello,
I've used some custom presets and when I use zoomLevel slider in timeAxisHeadermenu than it's not maintaining view's startDate and endDate.
As an example I've registered 2 presets and my start date is 17 june 2024 to 15 july 2024 when I change view using zoomlevel than it's showing some different start date.
import { DateHelper, EventModel, Scheduler, PresetManager } from '../../build/scheduler.module.js?477293';
import shared from '../_shared/shared.module.js?477293';
//region Presets & Widgets
PresetManager.registerPreset("dayAndWeek", {
name: "dayAndWeek",
displayDateFormat: 'DD/MM/YYYY HH:mm',
timeResolution: {
unit: "hour",
increment: 24,
},
columnLinesFor: 1,
headers: [
{
unit: "week",
increment: 1,
renderer: (startDate) => `W. ${DateHelper.format(startDate, 'WW MMM YYYY')}`
},
{
dateFormat: "dd DD",
increment: 1,
unit: "day",
},
],
});
PresetManager.registerPreset("twelveHoursPreset", {
name: "twelveHoursPreset", // A human-readable name provided to be used in GUI, e.i. preset picker, etc.
tickWidth: 60, // Time column width in horizontal mode
tickHeight: 50, // Time column height in vertical mode
displayDateFormat: 'DD/MM/YYYY HH:mm',// Controls how dates will be displayed in tooltips etc
shiftIncrement: 1, // Controls how much time to skip when calling shiftNext and shiftPrevious.
shiftUnit: "day", // 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
columnLinesFor: 1,
timeResolution: {
// Dates will be snapped to this resolution
unit: "hour", // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
increment: 12,
},
headers: [
// This defines your header rows from top to bottom
{
// For each row you can define 'unit', 'increment', 'dateFormat', 'renderer', 'align', and 'thisObj'
unit: "day",
dateFormat: "ddd DD/MM",
},
{
unit: "hour",
dateFormat: "HH:mm",
increment: 12,
},
],
});
const
requiredPresetIds = {
dayAndWeek:1,
twelveHoursPreset:1
},
// The set of available Presets is what provides the zoom levels.
presets = PresetManager.records.filter(p => requiredPresetIds[p.id]);
//endregion
//region Data
const
resources = [
{ id : 1, name : 'Arcady', role : 'Core developer', eventColor : 'purple' },
{ id : 2, name : 'Dave', role : 'Tech Sales', eventColor : 'indigo' },
{ id : 3, name : 'Henrik', role : 'Sales', eventColor : 'blue' },
{ id : 4, name : 'Linda', role : 'Core developer', eventColor : 'cyan' },
{ id : 5, name : 'Maxim', role : 'Developer & UX', eventColor : 'green' },
{ id : 6, name : 'Mike', role : 'CEO', eventColor : 'lime' },
{ id : 7, name : 'Lee', role : 'CTO', eventColor : 'orange' }
],
events = [];
//endregion
class EventModelWithPercent extends EventModel {
static get fields() {
return [
{ name : 'percentDone', type : 'number', defaultValue : 0 }
];
}
}
const scheduler = new Scheduler({
appendTo : 'container',
resourceImagePath : '../_shared/images/users/',
features : {
stripe : true,
sort : 'name'
},
columns : [
{
type : 'resourceInfo',
text : 'Staff',
width : '10em'
}
],
resources,
eventStore : {
modelClass : EventModelWithPercent,
data : events
},
startDate : new Date(2024, 6, 17),
endDate : new Date(2024, 7, 15),
// Use our custom list of just the ones we plucked out of the PresetManager
presets,
viewPreset : 'dayAndWeek',
eventRenderer : ({ eventRecord, renderData }) => {
const value = eventRecord.percentDone || 0;
// Add a child to the event element (b-sch-event)
renderData.children.push({
className : 'value',
style : {
width : `${value}%`
},
html : value
});
},
listeners : {
presetChange({ from, to }) {
const
me = this,
{ presetCombo, zoomInButton, zoomOutButton } = me.widgetMap;
// To disable buttons based on zoom levels use this code:
// zoomOutButton.disabled = level <= 0;
// zoomInButton.disabled = level >= this.presets.length - 1;
// To disable buttons based on presets in combo use this code:
const index = this.presets.indexOf(to);
zoomOutButton.disabled = index === 0;
zoomInButton.disabled = index === presetCombo.store.count - 1;
}
},
tbar : [
{
type : 'viewpresetcombo',
width : '16em',
ref : 'presetCombo',
presets : presets.map(p => p.id),
picker : {
maxHeight : 500
}
},
{
type : 'button',
ref : 'zoomInButton',
icon : 'b-icon-search-plus',
text : 'Zoom in',
onClick() {
scheduler.zoomIn();
}
},
{
type : 'button',
ref : 'zoomOutButton',
icon : 'b-icon-search-minus',
text : 'Zoom out',
onClick() {
scheduler.zoomOut();
}
}
]
});
Please find below video as well.
Thanks
