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.