Add click handler to a month view cell or ability to override render of individual cells

Do you want to request a feature or report a bug?

Feature

What’s the current behavior?

Currently the only clickable items in a month view cell are the date and the individual events. There is no way to add a click handler to individuals cells in the month view grid. I would like to add click handler to the cell itself or have a way to pass in a RenderMonthCell Component which receives the date and activities for a given cell as props. If you have a good idea on how to implement, I would be happy to dig in and create a PR.

[PiotrKujawa]

I agree, this calendar should handle something like onSelectDay or onSelectCell. Or selectable prop should accept value of “single” which wouldn’t allow to select more than one slot and then onSelectSlot would be enough.

edit:

@JesusTSeger I just found something which may be useful for you components={{ dateCellWrapper: this.renderCell }}

renderCell is my custom function to return a react component which contains onClick listener

renderCell = props => (
        <Cell
            {...props.children.props}
            onClick={() => {
                this.handleSelect(props.value);
            }}
        >
            {props.children}
        </Cell>
    );

[PatrissolJuns]

I agree, this calendar should handle something like onSelectDay or onSelectCell. Or selectable prop should accept value of “single” which wouldn’t allow to select more than one slot and then onSelectSlot would be enough.

edit:

@JesusTSeger I just found something which may be useful for you components={{ dateCellWrapper: this.renderCell }}

renderCell is my custom function to return a react component which contains onClick listener

renderCell = props => (
        <Cell
            {...props.children.props}
            onClick={() => {
                this.handleSelect(props.value);
            }}
        >
            {props.children}
        </Cell>
    );

Very good idea. I combined it with a style on DateCellWrapper to completely control all events on cells with:

  flex: 1 1;
  height: 100%;
  width: 100%;
  border: 1px solid #EFF1F2;
  background: transparent;
  z-index: 999;
  cursor: pointer;