For our application, we need to change the scroll to a new date around the same time we change the view preset, so that the visible timeline starts at the beginning of the month/week/year.
We're seeing a problem when we do this where the visible area falls out of sync with the scrollbar. After the code in the below example runs, the scheduler looks correct, but the scrollbar is at the year 2003, which causes issues for people who use the scrollbar.
Is there a workaround that will allow us to set these two things together? Thanks in advance
import "./styles.css";
import {
Scheduler,
SchedulerResourceModel,
ViewPreset,
} from "bryntum-schedulerpro";
const startDate = new Date(2000, 0, 1);
const endDate = new Date(2099, 11, 31);
const monthPreset = {
tickWidth: 76,
shiftIncrement: 1,
shiftUnit: "month",
timeResolution: {
unit: "month",
increment: 1,
},
headers: [
{
unit: "year",
},
{
unit: "month",
},
],
columnLinesFor: 0,
} as ViewPreset;
const dayPreset = {
tickWidth: 65,
shiftIncrement: 1,
shiftUnit: "day",
timeResolution: { unit: "day", increment: 1 },
headers: [{ unit: "month" }, { unit: "day", dateFormat: "DD" }],
columnLinesFor: 0,
} as ViewPreset;
const loadSchedule = (): Scheduler => {
class Gate extends SchedulerResourceModel {
static get fields() {
return [
{
name: "capacity",
type: "number",
},
];
}
}
const scheduler = new Scheduler({
appendTo: document.getElementById("scheduler"),
minHeight: "99vh",
eventColor: null,
eventStyle: null,
startDate,
endDate,
features: {
timeRanges: {
showHeaderElements: false,
},
tree: true,
regionResize: true,
},
rowHeight: 60,
barMargin: 5,
columns: [
{
type: "tree",
text: "Name",
width: 220,
field: "name",
},
{
type: "number",
text: "Capacity",
width: 90,
field: "capacity",
},
],
viewPreset: "weekAndMonth",
});
return scheduler;
};
let scheduler: Scheduler;
window.addEventListener("load", () => {
scheduler = loadSchedule();
initializeTimelines();
});
const timeout = (ms: number) => {
return new Promise((resolve) => setTimeout(resolve, ms));
};
const setTimeline = async (date: Date) => {
console.log("scrolling to date " + date.toString());
await scheduler.scrollToDate(date, {
block: "start",
});
};
const initializeTimelines = async () => {
console.log("setting view preset to " + JSON.stringify(monthPreset));
scheduler.viewPreset = monthPreset;
await setTimeline(new Date("2020-12-29"));
await timeout(3000);
console.log("setting view preset to " + JSON.stringify(dayPreset));
scheduler.viewPreset = dayPreset;
await setTimeline(new Date("2020-12-01"));
};