Respond to a large calendar, add a popup to an event?

Question

It looks like you can create custom components for a calendar response component. I looked at this example:

https://github.com/intljusticemission/react-big-calendar/blob/master/examples/demos/customView.js .

But it’s not clear how to create a custom event component. I also looked through the documentation, but there are no explicit examples:

http://intljusticemission.imtqy.com/react-big-calendar/examples/index.html#prop-components

I am particularly interested in creating a tooltip for each event that shows a more detailed description of the event.

Can someone provide an example of where someone created a custom component for a reaction-large calendar?

UPDATE: Here is a calendar image and some events displayed in the month view. I think a custom event should definitely include "rbc-event" and "rbc-event-content". To add a hint for bootstrap, I think of this in the custom event component:

And this is where the component of the event cell is created in the source code of the reaction-large calendar.

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') > 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']; 

I decided to try expanding the EventCell component, when I passed it as an alert to the event component, the event no longer had any content. You do not know how to transfer event data to the div "rcb-event" inside the EventCell component. See below..

 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 ( <div className="testing"> <EventCell /> </div> ); } } let components = { event: MyEvent } 

Here I pass the component object that I just created to the MyCalendar presentation component:

 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 ( <div> <MyCalendar components={components} events={this.state.events}/> </div> ); } } 

And finally, passing the component object to the presentation component through the details. Which is successfully done in the presentation, but, as I said earlier, without content.

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

Looks like I have to go this other way ... Any suggestions?

Answer 1

This is what I came up with, I'm sure it can be cleaned, but it works.

Create a custom event component that includes popover content.

 import React, { PropTypes } from 'react'; import MyCalendar from '../components/bigCalendar'; import _ from 'lodash'; class MyEvent extends React.Component { constructor(props){ super(props) } componentDidMount(){ MyGlobal.popOver(); } render(){ return ( <div> <div className="custom_event_content" data-toggle="popover" data-placement="top" data-popover-content={"#custom_event_" + this.props.event.id} tabIndex="0" > {this.props.event.title} </div> <div className="hidden" id={"custom_event_" + this.props.event.id} > <div className="popover-heading"> {this.props.event.driver} </div> <div className="popover-body"> {this.props.event.title}<br/> </div> </div> </div> ); } } let components = { event: MyEvent } 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 ( <div> <MyCalendar components={components} events={this.state.events}/> </div> ); } } 

Add event listeners:

 MyGlobal.popOver = function(){ $('body').on('click', function (e) { //did not click a popover toggle or popover if ($(e.target).data('toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) { $('[data-toggle="popover"]').popover('hide'); } }); $("[data-toggle=popover]").popover({ html : true, container: 'body', content: function() { var content = $(this).attr("data-popover-content"); return $(content).children(".popover-body").html(); }, title: function() { var title = $(this).attr("data-popover-content"); return $(title).children(".popover-heading").html(); } }); } 

Passing user details to the MyCalendar presentation component:

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