[ANSWERED] Turn off time zoom

[lajoj]

How do I turn of the zoom by double-clicking in time header?

[pmiklashevich]

https://www.bryntum.com/docs/scheduler/#Scheduler/view/mixin/TimelineZoomable#config-zoomOnTimeAxisDoubleClick

new Scheduler({
    zoomOnTimeAxisDoubleClick : false,
    ...
});

[lajoj]

zoomOnTimeAxisDoubleClick is not accepted in my schedulerConfig.

Can't bind to 'zoomOnTimeAxisDoubleClick' since it isn't a known property of 'bry-scheduler'.
1. If 'bry-scheduler' is an Angular component and it has 'zoomOnTimeAxisDoubleClick' input, then verify that it is part of this module.
2. If 'bry-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("= "schedulerConfig.displayDateFormat"
    [eventRenderer]     = "schedulerConfig.eventRenderer"
    [ERROR ->][zoomOnTimeAxisDoubleClick] = "schedulerConfig.zoomOnTimeAxisDoubleClick"
    
    [cellTooltipFeatur"): ng:///AppModule/ServiceCallsComponent.html@138:4
    at syntaxError (c:\local\Duroc\new\service-web\node_modules\@angular\compiler\fesm2015\compiler.js:2175:1)
    at TemplateParser.parse (c:\local\Duroc\new\service-web\node_modules\@angular\compiler\fesm2015\compiler.js:11388:1)
    at JitCompiler._parseTemplate (c:\local\Duroc\new\service-web\node_modules\@angular\compiler\fesm2015\compiler.js:25963:1)
    at JitCompiler._compileTemplate (c:\local\Duroc\new\service-web\node_modules\@angular\compiler\fesm2015\compiler.js:25951:61)
    at c:\local\Duroc\new\service-web\node_modules\@angular\compiler\fesm2015\compiler.js:25895:1
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (c:\local\Duroc\new\service-web\node_modules\@angular\compiler\fesm2015\compiler.js:25895:1)
    at c:\local\Duroc\new\service-web\node_modules\@angular\compiler\fesm2015\compiler.js:25808:1
    at Object.then (c:\local\Duroc\new\service-web\node_modules\@angular\compiler\fesm2015\compiler.js:2166:27)
    at JitCompiler._compileModuleAndComponents (c:\local\Duroc\new\service-web\node_modules\@angular\compiler\fesm2015\compiler.js:25807:1)

I have tried to find the setting in the code but cannot find how from the scheduler component variable.

[pmiklashevich]

zoomOnTimeAxisDoubleClick is not in supported properties in Angular wrapper. Please see "Adding properties which are not supported by default" chapter in this guide: https://www.bryntum.com/docs/scheduler/#guides/integration/angular.md

[lajoj]

Thanks!
But there are no scheduler.component.ts in that folder. I can only find scheduler.component.d.ts.

[pmiklashevich]

*.d.ts file is placed here:

Scheduler/examples/angular/_shared/dist/bryntum-angular-shared/lib/scheduler.component.d.ts

Please check your path again. Should be

Scheduler/examples/angular/_shared/projects/bryntum-angular-shared/src/lib/scheduler.component.ts

You need to change sources of the wrapper, then rebuild it.

[lajoj]

Sorry, I was in wrong directory.
Yes, now I have added the zoomOnTimeAxisDoubleClick setting according to the documentation and rebuilt.
Now I can use that setting in my schedulerConfig.
But setting it to false doesn't turn off the doubleclick zoom.

[pmiklashevich]

I've just checked how it works in angular-8 demo.

Please follow the steps.
1. Scheduler/examples/angular/_shared/projects/bryntum-angular-shared/src/lib/scheduler.component.ts:

    private configs : string[] = [
        ....
        'zoomOnMouseWheel',
        'zoomOnTimeAxisDoubleClick'
    ];
    
    @Input() zoomOnMouseWheel: boolean = true;
    @Input() zoomOnTimeAxisDoubleClick: boolean = true;
    ....

2. Build _shared. Go to Scheduler/examples/angular/_shared and run "npm install" then "npm run build"
3. Scheduler/examples/angular/angular-8/src/app/schedulerConfig.ts

const schedulerConfig = {
    zoomOnMouseWheel : false,
    zoomOnTimeAxisDoubleClick : false,
    ....

4. Scheduler/examples/angular/angular-8/src/app/app.component.html

<bry-scheduler
    #scheduler
    [zoomOnMouseWheel] = "schedulerConfig.zoomOnMouseWheel"
    [zoomOnTimeAxisDoubleClick] = "schedulerConfig.zoomOnTimeAxisDoubleClick"
    ....

5. Run angular-8 app. Go to Scheduler/examples/angular/angular-8 and run "npm install" then "npm run start"
Please go to browser and check the result. Double click on the header doesn't zoom any more.
You can run in console:

bryntum.query('scheduler').zoomOnTimeAxisDoubleClick
// false

We will add missing configs to our wrappers: https://github.com/bryntum/support/issues/61

Cheers!

[lajoj]

Hello!
Sorry, but I cannot get it to work.
I have added the properties to the wrapper as described in the docs and the same by you here.
When I check in the apps node_modules/bryntum-angular-shared/lib/scheduler.component.d.ts I can see both zoomOnMouseWheel and zoomOnTimeAxisDoubleClick are there.

I also tried the examples/angular-8. I only added the two lines in schedulerConfig and the same in the html file.
Result = can still zoom by doubleclicking time header.

[pmiklashevich]

Could you please try to remove "node_modules", "dist" and "package-lock.json" in both "_shared" and "angular-8", then in both run "npm install", "npm run build". It has to work. I've just tried it locally. If it still doesn't work for you, please try to debug the code. Set a breakpoint before creating a scheduler instance in Scheduler/examples/angular/_shared/projects/bryntum-angular-shared/src/lib/scheduler.component.ts

debugger
        const engine = this.schedulerEngine = new Scheduler(config);

See what config is, if zoomOnTimeAxisDoubleClick is not there, try to find out why. If it's there, but value is wrong, please try to trace the value from config definition. You can also try to set this value to config manually to make sure documented config works for you fine. Let me know please of your findings. If you get stuck, please zip it up (without node_modules) and attach here, so we can check it. Thanks!