SchedulerSlotProps - Change specific slot background color for schedular

[Stanley]

Hi team,

I would like to change particular slot background color on certain days based on certain condition.

 

I read:
https://www.telerik.com/kendo-react-ui/components/scheduler/customization/slots/

I am aware there is this props:
https://www.telerik.com/kendo-react-ui/components/scheduler/api/SchedulerSlotProps/

isAllDay, isWorkDay, etc

But is there a way for me to add my own custom props like "isOnDuty", and then if true, I can color it with specific colors.

Or certain way to customize the background color based on a condition checking.

 

Something like (I use devtool to edit):

Edit, was able to do using this code:

const CustomSlot = (props) => {
  
  let colorBg;
  if(props.start.getHours() === 8 && props.start.getDay() === 1){
    colorBg = '#f520aa';
  } else if(props.isAllDay || !props.isWorkHour || !props.isWorkDay){
    colorBg = '#ffddcc';
  } else {
    colorBg = '#ccff99';
  }
 
  return (
    <SchedulerSlot
      {...props}
      style={{
        ...props.style,
        backgroundColor: colorBg,
      }}
    />
  );
};

But my main thing is not about this, I would like to somewhat give each slot a way to have its own prop to uniquely identify itself.

 

Thanks and appreciated.

[Konstantin Dikov]

Hello Stanley,

The SchedulerSlot is rendered based on its date range (start and end values) and the "isWorkDay" for example is calculated based on that range. With that in mind, you can use the "props.start" and "props.end" values to determine how to customize the scheduler slot.

If further questions arise, do not hesitate to contact us again. 

 

Regards,
Konstantin Dikov
Progress Telerik