SchedulerSlotProps - Change specific slot background color for schedular

1 Answer 44 Views
Scheduler
Stanley
Top achievements
Rank 1
Stanley asked on 29 Nov 2023, 09:54 AM | edited on 30 Nov 2023, 01:38 AM

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.

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 30 Nov 2023, 12:14 PM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Tags
Scheduler
Asked by
Stanley
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or