Our pure JavaScript Scheduler component


Post by cokguzel »

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;
  }

Post by cokguzel »

Сan anybody help me?


Post by alex.l »

Hi cokguzel,

Sorry for long answer.
What is this.schedulerProConfig ? Not sure if it already worked as I described further, so might be that's the problem.
At runtime you need to change properties on SchedulerPro instance. Config is used only for initialization. The object you need to use to apply dates is this.schedulerProComponent.instance.
Next thing. When you set startDate and endDate one by one, it will first validate startDate, together with old endDate (because it's still old, right?), and after that, if change is valid, startDate will be updated and endDate will be applied and validated.
To change timeSpan we have a method https://bryntum.com/products/schedulerpro/docs/api/Scheduler/data/TimeAxis#function-setTimeSpan that will allow you to change all at once.

this.schedulerProComponent.instance.setTimeSpan(getViewPresetStartDate(viewPresetName), getViewPresetEndDate(viewPresetName));

If it didn't work, please make sure your methods getViewPresetEndDate and getViewPresetStartDate returned valid dates.

Please let us know if it helped you to go forward.

All the best,
Alex


Post by cokguzel »

thanks it worked!


Post Reply