ron2015schmitt / ngx-mat-tui-calendar Goto Github PK

Hi there,
I have spent weeks on this issue, but I haven't been able to resolve it myself.
I think I am doing something wrong and it is causing the calendar to render as you see below. All the rows of the calendar are squished together.

I have created a separate project where I think I have isolated the problem. I have literally copied the package.json, app component and template files and the app module file from the project within this Github.

I would really appreciate any help with this issue as I have been completely stuck with this for a while.

I am compiling my code with:
ng serve --open

And here is the output from the compiler when the site is run on localhost:

ng serve --open
- Generating browser application bundles (phase: setup)...
√ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   8.03 MB |
styles.css, styles.js | styles        | 460.63 kB |
polyfills.js          | polyfills     | 318.57 kB |
main.js               | main          | 124.41 kB |
runtime.js            | runtime       |   6.55 kB |

| Initial Total |   8.92 MB

...

Warning: C:\Users\****\Documents\****************\***************************\projects\ngx-mat-tui-calendar\src\lib\ngx-mat-tui-calendar-editor-dialog\ngx-mat-tui-calendar-editor-dialog.component.ts depends on 'tui-calendar'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: C:\Users\****\Documents\****************\***************************\projects\ngx-mat-tui-calendar\src\lib\ngx-mat-tui-calendar.component.ts depends on 'distinct-colors'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

In this scenario I get the below error

Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

Looking a bit the angular documentation, it seems the BrowserModule should only be loaded once by the main module and since it is also being imported within the NgxMatTuiCalendarModule I must only import NgxMatTuiCalendarModule in the app.module, the problem with that is that the initial bundle size increases almost 1MB mainly because of the tui-calendar

Big initial bundle size is not good for the UX since it takes more time to load on bad internet connections or low end devices, it also decreases the score for google SEO.

Can we have support lazy loading ?

Thanks in advance

Is it possible to make those header icons configurable( on/ off)?

For example

I don't need the highlighted ones.