Custom props to CustomCells

[gine]

I'm submitting a...

• Suggestion for improvement
• Documentation or request

Current behavior

Today navigating on documentation i have seen that for angular components is present a method to permit to disable some days meanwhile in react component is missing.

I'm pretty sure that can be done passing some "config data" to the customCell components setting isDisabled, maybe with redux, but i can't undestand how pass props to that component.

What is the motivation or use case for changing the behavior?

It can be useful to permit a more fast customization. I think that often the customer must exclude some days from booking for some reason from their regular working months

[gine]

I'm pretty sure that can be done passing some "config data" to the customCell components setting isDisabled, maybe with redux, but i can't undestand how pass props to that component.

This is my way to solve the problem, but i think that an attribute on MultiViewCalendar can be a better solution.

class CustomCell extends React.Component {
  render() {
    this.props = {
       ...this.props,
       isDisabled: this.props.isDisabled || moment(this.props.myprops).isSame(this.props.value)
     };

    ...

    return (
      <td onClick={this.handleClick} className={className} style={style}>
        <span className="k-link">
          {this.props.children}
        </span>
      </td>
    );
  }
}

export class KendoCalendar extends React.Component {
 ...
  //here the props injection
  injectProps = (props) => {
    const newProps = {
      ...props,
      myprops: '2020-05-11'
    };

    return React.cloneElement(<CustomCell/>, { ...newProps }, props.children);
  }

  render() {
    return (
       <MultiViewCalendar 
          min={min}
          max={max}
          cell={this.injectProps}
       />
    );
  }
}

I hope this part of code can be useful to someone.

[simonssspirit]

@gine Thank you for the code and the suggestion.

We introduced the cell property specifically to cover cases like this one.

We want to follow the ReactJS concept fro reusable components, this is why we provide an option for custom replaceable elements instead of properties for modifications like this one.

Let`s compare the two options:

• cell property - we have a custom reusable component and use it in the cell property. If a change is needed in the cell, we only go and make it in the CustomCell and it is applied to all components that are using it.

• disabled property - Set a field and it is directly working. Then if changed is needed or the field changes, it will require changing it in all Calendars.

[gine]

I'm new with reactjs system so i can't help with this discussion.

I'm talking only about what I would like already built-in from a component like a calendar.

The Feature disable days with an attribute, i think that is normal use case not a customization.

But sure for a lot of other calendar use, cell property(maybe with more documentation) it's the solution.

Let's see other opinions.

[simonssspirit]

@gine thank you for the feedback.

We do have a demo specifically for this use case:

https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/custom-rendering/#toc-overriding-the-default-properties

[kdikov82]

Although that the requirement can be achieved with the suggested solution (or with React Context with functional component), having a property that will accept an array of dates and pass that collection to the cell would be useful.

The property can be "disabledDates" and we can also add disabled state directly to cells. The array can contain explicit dates, day of the week (as string) and maybe even number (for days of month).