Week and month style are different

[matteomessmer]

Hi,

I'm having this issue, the style for the Timeline week view is different from the timeline month view.

This is my timeline month, which has the correct style:

this is the timeline week which is different:

The main problem here is that I am not able to set the background color of only the non-working days cell to gray, which is what I'd like to achieve (like it is in the timeline month).

Do you have any suggestion?

Thank you in advance,

Matteo Messmer

[Ruksar Moosa Sait]

Hi Matteo,

You can achieve your requirement by disabling the timescale and adding the Date option in the Header row like the below code snippet.

<ScheduleComponent

        height="650px"

        ref={(schedule) => (this.scheduleObj = schedule)}

        selectedDate={new
Date(2021, 11, 10)}

        workDays={this.workDays}

        eventSettings={{ dataSource:
this.data }}

        group={{ resources: ['Owners'] }}

        rowAutoHeight={true}

        timeScale={{ enable:
false }}

      >

<HeaderRowsDirective>

          <HeaderRowDirective
option="Week"
/>

          <HeaderRowDirective
option="Date"
/>

          <HeaderRowDirective
option="Hour"
/>

        </HeaderRowsDirective>

You can find the sample below.

Sample: https://stackblitz.com/edit/react-weekend-color-timeline-week?file=index.js

Regards,

Ruksar Moosa Sait

[matteomessmer]

Hi, thank you. I managed to make it work thanks to your answer, but I had to remove the css that set the color of non weekdays cell background:

.e-work-cells:not(.e-work-days) {

    background-color: #b1b1b1 !important;

}

How could a different color be set for both week and month views?

Thank you again,

Matteo Messmer

[Ruksar Moosa Sait]

Hi Matteo,

You can set the different background colors for timeline week and timeline month by overriding the CSS class like below.

/* for Timeline week view*/

.e-schedule
.e-timeline-view
.e-work-cells:not(.e-work-hours) {

  background-color: red;

}

/*for Timeline month view*/

.e-schedule
.e-timeline-month-view
.e-work-cells:not(.e-work-days) {

  background-color:lightblue;

}

Sample: https://stackblitz.com/edit/react-weekend-color-timeline-week-2euekg?file=index.css

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait

[matteomessmer]

Thank you very much, did not know this, it works perfectly.

Best regards,

Matteo 

[Vengatesh Maniraj]

Hi Matteo,

You are most welcome.

Regards,

Vengatesh