React-big-calendar: Define custom eventWrapper

[kdma]

Hi,
I am trying to define a custom event wrapper but when i use mine es:
const customWrapper = ({event}) => <AppointmentSummary title={event.title} start={event.start} end={event.end}/>
I lose the positioning of the event in the calendar

[jquense]

You are using the wrapper component incorrectly. It is a _wrapper_ not a replacement. you need to render this.props.children which is the event.

[kdma]

This is what i got, if there is a correct way I would be glad if you could show it to me

 MyWrapperComponent ...
 render() {
        const { event, children } = this.props;
        return (<div> className={children.props.className} style={...children.props.style}>
            <AppointmentSummary {...event} />
        </div>);
    }

I need to pass the className (.rbc-event) since it has "position: absolute" while the inline style contains the coordinate informations.

It feels kinda hacky?! Also doing so i cant select the event when using the onSelectedEvent and selectable props.

[jquense]

You just can't use this prop like that. You don't want the wrapper component anyway you want the event component prop. See the custom render example

[kdma]

I've seen the examples, but it just renders the event component while keeping the wrapper, if I do that I cant change the fact that the wrapper has a title with the hour, a blue rectangle etc.
To be honest i feel that the custom rendering part is not well document, whatever I found has been trough issues here.
Maybe its just me but if you could provide a small example I am sure it would helpful for anyone trying this library.
Thanks for your time

[jquense]

The issue is isn't an api for doing what you are trying to do. The Wrapper components are really for addon authors, who need to add a new component _around_ the original event component, you are trying to replace the even component completely, which isn't supported. There is intentionally not a ton of control given over these components because the calendar _needs_ to control their position and style fairly percisely in order to lay them out. You can change the content of the even with the event Component and the styling of the event shape with css or eventPropGetter

[kdma]

Ok thanks for the explanation, for anyone that eventually will encounter this I resorted to using eventPropGetter for overriding the available parts of the wrapper style and defining a custom event component