Even .cal-hour elements show body background

[l0wlik34G6]

Describe the bug

If you have a background color set on your container, which holds the mwl-calendar-day-view, a line is drawn on the right side of even cal-hour elements.
To avoid this, I changed the angular-calendar.css as follows:

   .cal-day-view .cal-hour:nth-child(odd) `
     background-color: #fafafa; }
+  .cal-day-view .cal-hour:nth-child(even) {
+    background-color: #fff; }
   .cal-day-view .cal-hour:not(:last-child) .cal-hour-segment,
   .cal-day-view .cal-hour:last-child :not(:last-child) .cal-hour-segment {

I don't know if this is the right way to do so, but for me it woked :)

Minimal reproduction of the problem with instructions

For reproduction, just apply a color (except white and #fafafa of course) to your e.g. body and add the mwl-calendar-day-view component to your app component.

body {
    color: #000;
}

Screenshots

Versions

• @angular/core: 7.2.13
• angular-calendar: 0.27.3
• Browser name and version: chrome 73.0

[matts-bot]

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider supporting me on Patreon

[mattlewis92]

Hey, thanks for opening an issue, I tried to reproduce but couldn't, are you able to make a runnable stackblitz that I can debug further that shows your problem? You can fork a starter by hitting the "Edit in stackblitz" button on any of the demos Thanks!

[l0wlik34G6]

Ye Sure: https://stackblitz.com/edit/angular-calendar-951

[mattlewis92]

Ahh I see now, it's because the demos use bootstrap which is fixing whatever issue is causing the problem, thanks! 😄

[mattlewis92]

Should be fixed now in 0.27.4, thanks for reporting and your help reproducing! 😄