Show cool things you have done with our products


Post by piyanonm »

I have tried to implement Scheduler trial version on my Angular project. I followed https://www.bryntum.com/docs/scheduler/#guides/integration/angular.md to import the library to my project.

Note that I move scheduler trial folder in my project path '/lib/scheduler'

Here's my step
  1. install scheduler/build
    npm i --save lib/scheduler/build
  2. build and install bryntum-angular-shared
    cd lib/scheduler/examples/angular/_shared
    npm i
    npm run build
    cd ../../../../..
    npm i --save lib/scheduler/examples/angular/dist/bryntum-angular-shared
    
  3. Add 'bryntum-angular-shared' and '@angular' to file tsconfig.json
    "paths": {
          "bryntum-angular-shared": ["lib/scheduler/examples/angular/_shared/dist/bryntum-angular-shared"],
          "@angular/*": ["node_modules/@angular/*"]
        }
    
  4. Add 'BryntumAngularSharedModule' to file app.module.ts
  5. Implement '<bry-scheduler>' in app.component.html
    <div>
        <bry-scheduler #scheduler></bry-scheduler>
    </div>
    
I think the instruction told me to import CSS library but I can't import CSS library without using relative path like this
@import '../../lib/scheduler/build/scheduler.material.css';
The running application display list of time and today and tomorrow date on top without CSS styling with the error.
ERROR TypeError: Cannot read property 'name' of null
    at _0x1dcfc4 (scheduler.umd.js:48)
    at _0x206b8d.renderRows (scheduler.umd.js:48)
    at _0x206b8d.onPaint (scheduler.umd.js:15)
    at _0x206b8d.callback (scheduler.umd.js:9)
    at _0x206b8d.trigger (scheduler.umd.js:12)
    at _0x206b8d.triggerPaint (scheduler.umd.js:12)
    at _0x206b8d.render (scheduler.umd.js:12)
    at _0x206b8d.render (scheduler.umd.js:15)
    at _0x206b8d.render (scheduler.umd.js:33)
    at _0x129529.functionChainRunner (scheduler.umd.js:12)
View_AppComponent_0 @ AppComponent.html:1
AppComponent.html:1 ERROR CONTEXT DebugContext_
Is there any missing steps when importing library or some mistakes I did? If no, can anyone tell me next step or give me reference what to do next. Thank you.

Post by mats »

We made a new release yesterday which might have fixed this issue, please try to download a new trial and try again?

Post by pmiklashevich »

It looks like you followed the guide and did everything which is mentioned there.
I think the instruction told me to import CSS library but I can't import CSS library without using relative path like this
Where do you import that? Please try to do similar to our angular/Advanced demo. We import theme in examples/angular/advanced/src/styles.scss
@import "bryntum-scheduler/scheduler.material.css";
And then add styles.scss to examples/angular/advanced/angular.json
ERROR TypeError: Cannot read property 'name' of null
Is it possible for you to zip your app up and send it to us, so we can check if there is something missing? node_modules can be removed, just provide commands I have to run to build and run it.

By the way yesterday we release 2.2.2 version, so I would recommend you to download a new trial to try with the latest code.

Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by piyanonm »

mats wrote: Fri Aug 16, 2019 8:46 am We made a new release yesterday which might have fixed this issue, please try to download a new trial and try again?
Thanks. I download new version trial and the issue is solved.

Next, I try to copy code from '/examples/angular/angular-7' to my test project but the scheduler is not show the events. Could you guide what am I missing in my test project?
test-scheduler.zip
Step to run project
1. Unzip test-scheduler.zip
2. Run command 'npm install' at directory 'test-scheduler'
3. Run command 'ng serve'
(4.17 MiB) Downloaded 422 times

Post by pmiklashevich »

Grid element not sized correctly, please check your CSS styles and review how you size the widget
This error means that html layout is not correct. You can try to get it fixed by setting autoHeight to true, or by setting minHeight.

examples/angular/test-scheduler/src/app/app.component.ts
export class AppComponent implements OnInit, AfterViewInit {
  autoHeight = true;
  ...
examples/angular/test-scheduler/src/app/app.component.html
<bry-scheduler
  #scheduler
  [autoHeight] = "autoHeight"
examples/angular/test-scheduler/src/app/app.component.ts
export class AppComponent implements OnInit, AfterViewInit {
  minHeight = 400;
  ...
examples/angular/test-scheduler/src/app/app.component.html
<bry-scheduler
  #scheduler
  [minHeight] = "minHeight"
About theme import, please try to add "~" to the beginning:
examples/angular/test-scheduler/src/app/app.component.scss
@import "~bryntum-scheduler/scheduler.material.css";
I see there are some styling issues in your app, but I'm not sure from where they came from. It's probably better to get "angular-7" demo running first, make sure it has no issues and then extend it to your purposes.

Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by piyanonm »

Thanks pmiklashevich.

Adding attributes 'autoHeight' and 'minHeight' has solve my problem. As for css reference, I can import it without using relative path (I think I misunderstood I cannot import it before because I could not navigate the reference).

Here's the new problem. I try to use class 'ResourceModel' to be a reference to create schduler resource (the example just use plain structure which I personally don't like it). When I import the library alone, the program works just fine. But when I use its constructor to create object, the error appears
ERROR Error: Uncaught (in promise): Error: Bundle included twice, check cache-busters and file types (.js)
Error: Bundle included twice, check cache-busters and file types (.js)
Here's my app.component.ts
import { SchedulerComponent } from 'bryntum-angular-shared';
import { ResourceModel } from 'bryntum-scheduler';

export class AppComponen implements OnInit, AfterViewInit {

    resources: ResourceModel[] = [];
    
    ngOnInit(): {
        // let resource: ResourceModel = new ResourceModel();        // error when this line is added
        let resource: any = { ... };                                  // the instruction use plain structure not class
        this.resources.push(resource);
    }
    
}
I think the same problem occurrs when I use other classes constructor as well. Could anyone guide me about this problem or should I use plain structure as the instruction?

Post by pmiklashevich »

"Bundle included twice" problem happens when some of classes you import from "umd" bundle, for example:
import {DateField, DateHelper} from 'bryntum-scheduler/scheduler.umd.js';
and some of classes you import from "module" bundle, for example:
import {DateField, DateHelper} from 'bryntum-scheduler';
Please see this part in our guide:
Mind please that you cannot import both normal and UMD version of the Scheduler package in one application. The error Bundle included twice means that both UMD and normal version is imported. In that case revise all your imports and make sure that only one version is used.

Pavlo Miklashevych
Sr. Frontend Developer


Post by piyanonm »

As you see in my example code, I import the class only once and not from UMD bundle. Then why the error still occurred.

Post by pmiklashevich »

Probably there is another import in your application somewhere. Please search you app for "bryntum-scheduler" to find it.

Pavlo Miklashevych
Sr. Frontend Developer


Post by piyanonm »

Sorry for not reading the guide throughly, I fixed this problem by changing 'bryntum-angular-shared' component import class from
@import 'bryntum-scheduler/scheduler.umd.js'
to
@import 'bryntum-scheduler'
and then build the project again.

Thanks.

Post Reply