How to change background of the cell for specific date (eg: public holiday)

[Brian]

Hi,

Would need help or assistant one this.

I'm using : @syncfusion/ej2-react-schedule

Below is the code I tried, when searching through this forum to see if there's others trying to do the same as me. I tried "renderCell" but I couldn't get the background of the color changed.

I have set the work hour to be 09:00 to 18:00. Am trying to make those which is holiday to have the same 'grey' color

  function OnCellRendered(args) {

    if (args.elementType === "workCells") {

     //I haven't put any condition yet, am trying to make all the sell to have background color

      return <div class="weather-text"></div>;

    }

    return null;

  }

<ScheduleComponent

renderCell={OnCellRendered.bind(this)}

workHours={{

highlight: true,

start: "9:00",

end: "18:00",

}}

>

<ViewsDirective>

  <ViewDirective

  option="TimelineWeek"

  timeScale={{ enable: true, interval: 180, slotCount: 3 }}

  interval={2}

/>

</ViewsDirective>

</ScheduleComponent>

CSS

.weather-text {

  float: right;

  margin: -20px 2px 0 0;

  background: #ea7a57;

}

[Ravikumar Venkatesan]

Hi Brian, 

  

Greetings from Syncfusion support. 

 

  

We have validated your requirement at our end and achieved it with the help of the renderCell event of the Schedule and for the same, we have prepared a sample which can be available from the below link. 

  

Sample: https://stackblitz.com/edit/ej2-react-schedule-change-the-background-color-of-holida-ypjigb?file=index.js 

 

[index.js] 

  onRenderCell(args) { 

    if (args.date) { 

      let date = new Date(args.date.getFullYear(), args.date.getMonth(), args.date.getDate()).getTime(); 

      if (this.holidays.indexOf(date) > -1) { 

        args.element.classList.add("e-public-holiday"); 

      } 

    } 

  } 

 

[index.css] 

.e-public-holiday { 

  background-color: #909090 !important; 

} 

 

  

Kindly try the above sample and get back to us if you need any further assistance. 

  

Regards, 

Ravikumar Venkatesan 

[Brian]

Hi Brian, 

  

Greetings from Syncfusion support. 

 

  

We have validated your requirement at our end and achieved it with the help of the renderCell event of the Schedule and for the same, we have prepared a sample which can be available from the below link. 

  

Sample: https://stackblitz.com/edit/ej2-react-schedule-change-the-background-color-of-holida-ypjigb?file=index.js 

 

[index.js] 

  onRenderCell(args) { 

    if (args.date) { 

      let date = new Date(args.date.getFullYear(), args.date.getMonth(), args.date.getDate()).getTime(); 

      if (this.holidays.indexOf(date) > -1) { 

        args.element.classList.add("e-public-holiday"); 

      } 

    } 

  } 

 

[index.css] 

.e-public-holiday { 

  background-color: #909090 !important; 

} 

 

  

Kindly try the above sample and get back to us if you need any further assistance. 

  

Regards, 

Ravikumar Venkatesan 

Dear Ravikumar,

Thank you very much. It works like charm !!

    if (holidayName !== undefined) {

      if (args.elementType === "workCells") {

        args.element.classList.add("e-public-holiday");

      }

    }

Just added some checking 'workCells' as I just want to color the work cell only and not the header(Date + Time) - In case someone wanted the same as me.

Thank you very much and have a great day Ravi !  :)

[Nevitha Ravi]

Hi Brain, 

Thanks for your update. 

Yes you can add the class for work cells alone by checking the elementType. We are happy that our provided solution helped you to meet your requirement, please get back to us if you need any assistance. 

Regards, 

Nevitha