Ionic 4 looks bad

[juan-architect]

Ionic version: (check one with "x") [ ] 2.x [ ] 3.x [X ] 4.x

Ion2-calendar mode: (check one with "x") [X ] components mode [ ] modal mode

I'm submitting a ... (check one with "x") [ X] bug report [ ] feature request [ ] help me

Current behavior:

Expected behavior: Ive installed the module with: npm install ion4-calendar

Steps to reproduce: install de module in ionic 4 proyect via npm, run ionic serve

Related code:

insert short code snippets here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

insert the output from ionic info here

[rajkhan91]

I am facing the same problem, can anyone get the solution?

[juan-architect]

I solve this issue doing this:

In the file global.scss -> add this ->

@import "~ion4-calendar/dist/index.scss"

And then in -> node modules locate the folder ->ion4-calendar.

Then replace all the lines in functions.scss to this:

$colors: ( primary : #488aff, secondary : #32db64, danger : #f53d3d, light : #f4f4f4, dark : #222, cal-color : #ff8732);

@function bindColors($color-value) { @if ($color-value != cal-color) { @return map-get($colors, $color-value) } @else { @if (type-of(map-get($colors, $color-value)) != color) { @return #488aff } @else { @return map-get($colors, $color-value) } } }

Thats it!!

[scarings]

downgrade version to npm install ion2-calendar@2.1.7

[nizovceva]

add the following to the file global.scss:

$colors: ( primary : #488aff, secondary : #32db64, danger : #f53d3d, light : #f4f4f4, dark : #222, cal-color : #ff8732); @import "~ion4-calendar/dist/index.scss"

[sertal70]

This issue applies also to projects using Ionic 3:

Ionic:

   ionic (Ionic CLI)  : 4.5.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

System:

   NodeJS : v8.9.3 (/usr/local/bin/node)
   npm    : 5.5.1
   OS     : macOS Mojave

Thanks to @scarings for posting the easiest workaround to solve it.