user3318489 user3318489 - 3 months ago 20
AngularJS Question

mwl calendar mark hour in different color

I use the mwl calendar and I will mark the hour from 12 - 13 in another color inday view.
Is there a simple possibility to do this?

mwl calendar

[EDIT]
Now I have tried this one

<style type="text/css">
.cal-day-hour-part:nth-of-type(2n) {
background-color: #f00 !important;
}
</style>


with this plunker example:

Plunker example

and this works fine, than I have tried it with .cal-day-hour-part:nth-of-type(3n) and this does not work. Does anyone know why?

Answer

The DOM is structured like this:

<div class="cal-day-hour">
  <div class="cal-day-hour-part">
  <div class="cal-day-hour-part">
</div>
<div class="cal-day-hour">
  <div class="cal-day-hour-part">
  <div class="cal-day-hour-part">
</div>
...

The :nth-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent. There are at most 2 .cal-day-hour-part children of .cal-day-hour in your DOM. That's why 2n works but 3n does not.

Regarding your original question (and thanks for the edits to clarify), you'll want to use :nth-of-type(n) on .cal-day-hour instead, and stop using the counter n as you don't need it.

.cal-day-hour:nth-of-type(7) {
    background-color: #f00 !important;
}

Here's an updated plunkr