[ANGULAR] SchedulerPro - timeSelectionFeature

[mv2022]

Hello,

I am having some issues with the time timeSelectionFeature. The first time the component loads, everything is working. If I close the component and reopen it, this.schedulerPro?.features is null. I get this error: "Trying to chain fn SchedulerPro#attachToProject, but plugin fn TimeSelection#attachToProject does not exist."

I'm not sure what I am doing wrong. This only seems to happen with the timeSelectionFeature. Other features like [resourceNonWorkingTimeFeature]="schedulerProConfig.features.resourceNonWorkingTime, will not throw any errors.

  <bryntum-scheduler-pro-project-model
    #project
    [events] = "projectData.events"
    [resources] = "projectData.resources"
    [assignments] = "projectData.assignments"
    [dependencies] = "projectData.dependencies"
</bryntum-scheduler-pro-project-model>

  <bryntum-scheduler-pro
    #schedulerpro
    [startDate]="schedulerProConfig.startDate"
    [endDate]="schedulerProConfig.endDate"
    [viewPreset]="schedulerProConfig.viewPreset"
    [workingTime] = "schedulerProConfig.workingTime"
    [forceFit]="schedulerProConfig.forceFit"
    [columns]="schedulerProConfig.columns"
    [timeSelectionFeature]="schedulerProConfig.features.timeSelection"
</bryntum-scheduler-pro>


 ngAfterViewInit(): void {
    this.schedulerPro = this.schedulerProComponent.instance;
    this.project = this.schedulerProProjectComponent.instance;
   // this.schedulerPro.features.timeSelection.disabled = false;
    this.loadMeetingSchedule();
  }


export const schedulerProConfig = {
  startDate  : '2020-03-23',
  endDate    : '2020-03-25',
  features: {
    timeSelection: {
      disabled: false
    },
    resourceNonWorkingTime : {
      maxTimeAxisUnit : 'week'
    },
    nonWorkingTime: true
  },
  columns    : [
    {
      text           : 'Name',
      field          : 'name',
      showEventCount : false,
      width          : 150
    }
  ]
};

[marcio]

Hey mv2022,

Thanks for reaching out.

When using Angular, you need to use the following syntax to set up the features correctly - https://bryntum.com/products/scheduler/docs/guide/Scheduler/integration/angular/guide#features.

If you still have the issue, please try to update to the latest stable version of our components.

[mv2022]

Hi Marcio,

I tried that as well but its the same problem. I cannot update to the latest version as we are on angular 16.

  <bryntum-scheduler-pro
    #schedulerpro
    [project]="project"
    etc..
    [resourceNonWorkingTimeFeature]="schedulerProConfig.features.resourceNonWorkingTime"
    [timeSelectionFeature]="schedulerProConfig.features.timeSelection"
</bryntum-scheduler-pro>


 ngAfterViewInit(): void {
    this.schedulerPro = this.schedulerProComponent.instance;
    this.project = this.schedulerProProjectComponent.instance;
    this.schedulerPro.features.timeSelection.disabled = false;
    this.loadMeetingSchedule();
  }

[tasnim]

For me, it's working fine without any errors. Please check the updated demo attached below

[mv2022]

Hi Tasnim,

The problem still exists. For example, the first time I open the dialog box, Scheduler Pro displays and everything works correctly. If I close the dialog box and reopen it, I get the following error:

"Trying to chain fn SchedulerPro#attachToProject, but plugin fn TimeSelection#attachToProject does not exist."

This seems to occur only when the [timeSelectionFeature]="schedulerProConfig.timeSelectionFeature" property is set. If I remove it, opening and closing the dialog box works fine.

This also causes the this.schedulerPro.features to be undefined. I think there is something specific to the binding of [timeSelectionFeature] that is causing the problem. The rest of the properties seem to work fine.

[tasnim]

Which dialog box are you referring to? If you mean task editor popup then for me it's working fine

[mv2022]

I meant when opening it in a angular material dialog box . I click on a button > angular dialog box would open displaying the Scheduler Pro . First time it works correctly. Now when we close the dialog box and reopen it, that's when we get the error message regarding the timeSelectionFeature . It only occurs when I add this property.

When we do close the dialog box, I do call this.schedulerPro.destroy(); but it doesn't seem to be helping with the issue.

  ngOnDestroy(): void {
    this.schedulerPro.destroy();
  }

imageOne.jpg (149.27 KiB) Viewed 407 times

[tasnim]

Thanks for sharing the details. As I can't reproduce with your test case inline-data updated.zip, could you please share a test case where we can reproduce this behavior with that Angular dialog box? So it will be easier for us to debug the issue on our side

[mv2022]

Please see the demo to reproduce the bug.

Click on the button, no errors, everything works.
Click outside the dialog box to close it, then click on the button again to see the error message.

Thank you,

[tasnim]

That's a problem in that version 5.6.13, when I upgraded to 6.3.3, it's working fine. Please upgrade to the latest version (currently 6.3.3), and it should be working just fine!