React big calendar, add bootstrap popover to event?
<p>Looks like you can create custom components for the react calendar component. I was looking at this example:</p>

<p><a href="https://github.com/intljusticemission/react-big-calendar/blob/master/examples/demos/customView.js" rel="noreferrer">https://github.com/intljusticemission/react-big-calendar/blob/master/examples/demos/customView.js</a>.</p>

<p>But it isn't clear how to create a custom event component. I'm also looked through the documentation, but there are no explicit examples:</p>

<p><a href="http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-components" rel="noreferrer">http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-components</a></p>

<p>I'm particularly interested in creating a tooltip for each event that shows a more detailed event description. </p>

<p>Can anyone point to an example of where someone has created a custom component for react-big-calendar? </p>

<p>UPDATE:
Here is an image of the calendar and some events rendered in the month view. I'm thinking, a custom event should definitely include the 'rbc-event' and 'rbc-event-content'. To add the bootstrap tool tip I'm thinking something like this in the custom event component:</p>

<p><a href="https://i.stack.imgur.com/wnHvx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wnHvx.png" alt="enter image description here"></a></p>

<p>And here is where the event cell component is created in the react-big-calendar source code.</p>

<pre><code>    return _react2.default.createElement(
              'div',
              _extends({}, props, {
                style: _extends({}, props.style, style),
                className: (0, _classnames2.default)('rbc-event', className, xClassName, {
                  'rbc-selected': selected,
                  'rbc-event-allday': isAllDay || _dates2.default.diff(start, _dates2.default.ceil(end, 'day'), 'day') &gt; 1,
                  'rbc-event-continues-prior': continuesPrior,
                  'rbc-event-continues-after': continuesAfter
                }),
                onClick: function onClick() {
                  return onSelect(event);
                }
              }),
              _react2.default.createElement(
                'div',
                { className: 'rbc-event-content', title: title },
                Component ? _react2.default.createElement(Component, { event: event, title: title }) : title
              )
    );
  }
});

exports.default = EventCell;
module.exports = exports['default'];
</code></pre>

<p>I decided to try extending the EventCell component, when I passed it in as the event component prop, the event no longer had any content. Not sure how to pass event details into the 'rcb-event' div inside of the EventCell component. See below..</p>

<pre><code>import React, { PropTypes } from 'react';
import MyCalendar from '../components/bigCalendar';
import _ from 'lodash';
import EventCell from 'react-big-calendar/lib/EventCell.js';

class MyEvent extends React.Component {
    constructor(props){
        super(props)
    }
    render(){
        return (
            &lt;div className="testing"&gt;
                &lt;EventCell /&gt;
            &lt;/div&gt;
        );
    }
}

let components = {
    event: MyEvent
}
</code></pre>

<p>Here, I am passing the components object I just created down to the MyCalendar presentation component:</p>

<pre><code>export default class Calendar extends React.Component {
    constructor(props) {
        super(props);

        var eventsList = Object.keys(props).map(function(k){
            return props[k];
        });

        eventsList.map(function(event){
            event["start"] = new Date(event["start"])
            event["end"] = new Date(event["end"])
        })

        this.state = {
            events: eventsList
        };
    };

    render() {
        return (
            &lt;div&gt;
                &lt;MyCalendar components={components} events={this.state.events}/&gt;
            &lt;/div&gt;
        );
    }
}
</code></pre>

<p>And, finally passing the components object to the presentation component via props. Which does successfully render in the view, but as I said earlier - without content.</p>

<pre><code>const MyCalendar = props =&gt; (
    &lt;div className="calendar-container"&gt;
        &lt;BigCalendar
            selectable
            popup
            components={props.components}
            views={{month: true, week: true, day: true}}
            events={props.events}
            onSelectEvent={event =&gt; onSelectEvent(event)}
            eventPropGetter={eventStyleGetter}
            scrollToTime={new Date(1970, 1, 1, 6)}
            defaultView='month'
            defaultDate={new Date(2015, 3, 12)}
            /&gt;
    &lt;/div&gt;
);

MyCalendar.propTypes = {
    events: PropTypes.array.isRequired,
    components: PropTypes.object.isRequired
};
</code></pre>

<p>Seems like I'm supposed to go about this another way...Any suggestions?</p>