Accessing resource in custom header

[developerkam]

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

feature

What's the current behavior?

I want to add some functionality (button or inputs) to day header. When button clicked, I need to pass date and resourceId to my function. Date is already passed to custom header but I cannot access resourceId.

What's the expected behavior?

components={{
  day: {
     header: ({date, label, localizer /* resource may be added here */}) =>
          <div>
              <div>{moment(date).format("DD/MM/YYYY")}</div>
              <button onClick={() => this.doSomething(date, resourceId)}></button>
          </div>
  }
}}

[juan-giovanolli]

Have you found any solution to that?

[developerkam]

Sorry for late reply...

As workaround, I had put resource id to element, then queried the element from dom.

resourceTitleAccessor={(resource) => <div className="custom-resource-header" id={resource.id}>...</div>}

day: { header: ({date, localizer}) => (<CustomInput />) }

class CustomInput extends Component {

componentDidMount() {
    this.resourceId = this.myDiv ?
                            Number(this.myDiv
                                .closest('.rbc-time-header-content')
                                .querySelector('.custom-resource-header')
                                .id)
                            : undefined;
}

render() {
     return (<div ref={ref => this.myDiv = ref}>...</div>);
}

}