Scheduler Angular implementation

Show cool things you have done with our products
Post Reply
User avatar
piyanonm
Posts: 13
Joined: Fri Aug 16, 2019 4:29 am

Scheduler Angular implementation

Post by piyanonm » Fri Aug 16, 2019 6:37 am

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

    Code: Select all

    npm i --save lib/scheduler/build
  2. build and install bryntum-angular-shared

    Code: Select all

    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

    Code: Select all

    "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

    Code: Select all

    <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

Code: Select all

@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.

Code: Select all

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.

User avatar
mats
Core Developer
Core Developer
Posts: 14593
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Scheduler Angular implementation

Post by mats » 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?
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2254
Joined: Fri Apr 01, 2016 11:08 am

Re: Scheduler Angular implementation

Post by pmiklashevich » Fri Aug 16, 2019 9:13 am

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

Code: Select all

@import "bryntum-scheduler/scheduler.material.css";
And then add styles.scss to examples/angular/advanced/angular.json

Code: Select all

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
Pavel Miklashevich - Core Developer

User avatar
piyanonm
Posts: 13
Joined: Fri Aug 16, 2019 4:29 am

Re: Scheduler Angular implementation

Post by piyanonm » Fri Aug 16, 2019 12:45 pm

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.18 MiB) Downloaded 9 times

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2254
Joined: Fri Apr 01, 2016 11:08 am

Re: Scheduler Angular implementation

Post by pmiklashevich » Fri Aug 16, 2019 2:11 pm

Code: Select all

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

Code: Select all

export class AppComponent implements OnInit, AfterViewInit {
  autoHeight = true;
  ...
examples/angular/test-scheduler/src/app/app.component.html

Code: Select all

<bry-scheduler
  #scheduler
  [autoHeight] = "autoHeight"
examples/angular/test-scheduler/src/app/app.component.ts

Code: Select all

export class AppComponent implements OnInit, AfterViewInit {
  minHeight = 400;
  ...
examples/angular/test-scheduler/src/app/app.component.html

Code: Select all

<bry-scheduler
  #scheduler
  [minHeight] = "minHeight"
About theme import, please try to add "~" to the beginning:
examples/angular/test-scheduler/src/app/app.component.scss

Code: Select all

@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
Pavel Miklashevich - Core Developer

User avatar
piyanonm
Posts: 13
Joined: Fri Aug 16, 2019 4:29 am

Re: Scheduler Angular implementation

Post by piyanonm » Mon Aug 19, 2019 12:00 pm

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

Code: Select all

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

Code: Select all

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?

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2254
Joined: Fri Apr 01, 2016 11:08 am

Re: Scheduler Angular implementation

Post by pmiklashevich » Mon Aug 19, 2019 1:35 pm

"Bundle included twice" problem happens when some of classes you import from "umd" bundle, for example:

Code: Select all

import {DateField, DateHelper} from 'bryntum-scheduler/scheduler.umd.js';
and some of classes you import from "module" bundle, for example:

Code: Select all

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.
Pavel Miklashevich - Core Developer

User avatar
piyanonm
Posts: 13
Joined: Fri Aug 16, 2019 4:29 am

Re: Scheduler Angular implementation

Post by piyanonm » Tue Aug 20, 2019 4:39 am

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

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2254
Joined: Fri Apr 01, 2016 11:08 am

Re: Scheduler Angular implementation

Post by pmiklashevich » Tue Aug 20, 2019 8:20 am

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

User avatar
piyanonm
Posts: 13
Joined: Fri Aug 16, 2019 4:29 am

Re: Scheduler Angular implementation

Post by piyanonm » Tue Aug 20, 2019 12:39 pm

Sorry for not reading the guide throughly, I fixed this problem by changing 'bryntum-angular-shared' component import class from

Code: Select all

@import 'bryntum-scheduler/scheduler.umd.js'
to

Code: Select all

@import 'bryntum-scheduler'
and then build the project again.

Thanks.

Post Reply