I'm using my custom viewPresets for the scheduler for showing user events weekly, monthly, yearly etc. I'm switching between units (between months for example) via shiftPrevious()/shiftNext() methods.
Also I have a button for returning user to the current week/month/year. But after switching between months and then when I'm trying to reset start and end date of scheduler for current month I'm getting an error
Error: Invalid start/end dates. Start date must be less than end date.
Seems like instead of taking the startDate which I'm trying to set it takes the startDate of current visible area. What I'm doing wrong?
Here's my code snippets
bryntum.config.ts
export enum BryntumSchedulerViewPreset {
Week = 'weekZoomPreset',
Month = 'monthZoomPreset',
Year = 'yearZoomPreset'
}
export const monthZoomPreset = new ViewPreset({
id: BryntumSchedulerViewPreset.Month,
base: 'dayAndMonth', // Extends 'hourAndDay' view preset provided by PresetManager. You can pick out any of PresetManager's view presets: PresetManager.records
shiftIncrement: 1, // Controls how much time to skip when calling shiftNext and shiftPrevious.
shiftUnit: 'month',
tickWidth: 30
});
export const getViewPresetStartDate = (viewPresetName: BryntumSchedulerViewPreset): Date => {
if (viewPresetName === BryntumSchedulerViewPreset.Week) {
// get first day of current week
return DateHelper.startOf(new Date(), 'week', null, 1);
}
if (viewPresetName === BryntumSchedulerViewPreset.Month) {
// get first day of current month
return DateHelper.getFirstDateOfMonth(new Date());
}
if (viewPresetName === BryntumSchedulerViewPreset.Year) {
// get first day of current year
return DateHelper.startOf(new Date(), 'year');
}
return new Date();
};
export const getViewPresetEndDate = (viewPresetName: BryntumSchedulerViewPreset): Date => {
if (viewPresetName === BryntumSchedulerViewPreset.Week) {
// get first day of next week
return DateHelper.startOf(DateHelper.add(new Date(), 1, 'week'), 'week', null, 1);
}
if (viewPresetName === BryntumSchedulerViewPreset.Month) {
// get first day of next month
return DateHelper.add(DateHelper.getLastDateOfMonth(new Date()), 1, 'day');
}
if (viewPresetName === BryntumSchedulerViewPreset.Year) {
// get first day of next year
return DateHelper.startOf(DateHelper.add(new Date(), 1, 'year'), 'year');
}
return new Date();
};
const initialViewPreset = BryntumSchedulerViewPreset.Month;
export const schedulerProConfig: Partial<SchedulerProConfig> = {
columns: [
{
text: 'Name',
field: 'name',
width: 280,
type: 'tree',
}
],
rowHeight: 25,
barMargin: 3,
weekStartDay: 1,
viewPreset: initialViewPreset,
startDate: getViewPresetStartDate(initialViewPreset),
endDate: getViewPresetEndDate(initialViewPreset),
readOnly: true,
presets: [
weekZoomPreset,
monthZoomPreset,
yearZoomPreset
],
};
bryntum-timeline.component.html
<bryntum-project-model
#project
[resources] = "resources"
[events] = "events"
</bryntum-project-model>
<bryntum-scheduler-pro
#schedulerpro
[columns] = "schedulerProConfig.columns"
[startDate] = "schedulerProConfig.startDate!"
[endDate] = "schedulerProConfig.endDate!"
[treeFeature] = "schedulerProConfig.features.tree"
[sortFeature] = "schedulerProConfig.features.sort"
[readOnly]="schedulerProConfig.readOnly"
[project] = "project"
[presets]="schedulerProConfig.presets"
[viewPreset] = "schedulerProConfig.viewPreset"
[weekStartDay] = "schedulerProConfig.weekStartDay"
[rowHeight] = "schedulerProConfig.rowHeight"
[barMargin] = "schedulerProConfig.barMargin"
</bryntum-scheduler-pro>
fragment from bryntum-timeline.component.ts
/**
* Previous calendar unit
*/
navigateCalendarPrev (): void {
this.scheduler.shiftPrevious();
}
/**
* Next calendar unit
*/
navigateCalendarNext (): void {
this.scheduler.shiftNext();
}
/**
* Today (according to current calendar zoom)
*/
navigateCalendarCurrentPeriod(): void {
const viewPresetName = this.schedulerProConfig.viewPreset as BryntumSchedulerViewPreset;
this.schedulerProConfig.startDate = getViewPresetStartDate(viewPresetName);
this.schedulerProConfig.endDate = getViewPresetEndDate(viewPresetName);
}
/**
* Runs after the view (including the child scheduler) is initializes
*/
ngAfterViewInit (): void {
this.scheduler = this.schedulerProComponent.instance;
}