Reagieren großen Kalender, Bootstrap Popover Ereignis hinzufügen?

Question

Sieht so aus, als könnten Sie benutzerdefinierte Komponenten für die reaktive Kalenderkomponente erstellen. Ich schaute auf dieses Beispiel:

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

Es ist jedoch nicht klar, wie eine benutzerdefinierte Ereigniskomponente erstellt wird. Ich bin auch durch die Dokumentation sah, aber es gibt keine expliziten Beispiele:

http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-components

Ich bin besonders daran interessiert, einen Tooltip für jedes Ereignis zu schaffen, die eine detailliertere Beschreibung der Ereignisse zeigt.

Kann jemand auf ein Beispiel verweisen, wo jemand eine benutzerdefinierte Komponente für react-big-calendar erstellt hat?

UPDATE: Hier ist ein Bild des Kalenders und einige Ereignisse in der Monatsansicht gerendert. Ich denke, eine benutzerdefinierte Veranstaltung sollte auf jeden Fall das 'rbc-event' und 'rbc-event-content' beinhalten. Um die Bootstrap-Werkzeugspitze hinzufügen Ich bin in der benutzerdefinierten Ereigniskomponente in etwa so zu denken:

Und hier ist, wo das Ereignis Zellkomponente in der Reaktion-big-Kalender Quellcode erstellt wird.

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

Ich beschloss, die EventCell Komponente versuchen erstreckt, wenn ich es in als Stütze Event-Komponente übergeben, wird das Ereignis nicht mehr über Inhalte. Nicht sicher, wie Ereignisdetails in das Ereignis 'rcb-event' innerhalb der EventCell-Komponente übergeben werden. Siehe unten ..

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 
} 

Hier bin ich vorbei die Komponenten Objekt ich nur auf die MyCalendar Präsentationskomponente erstellt unten:

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> 
     ); 
    } 
} 

Und schließlich die Komponenten Objekt über Requisiten auf die Präsentationskomponente übergeben. Was in der Ansicht erfolgreich gerendert wird, aber wie gesagt - ohne Inhalt.

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 
}; 

Scheint, dass ich über diese andere Weise gehen soll ... Irgendwelche Vorschläge?

Answer 1

Das ist, was ich gefunden habe, ich bin sicher, es könnte aufgeräumt werden - aber es funktioniert.

Erstellen Sie benutzerdefinierte Ereigniskomponente, die den Popover-Inhalt enthält.

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> 
     ); 
    } 
} 

hinzufügen Ereignis-Listener:

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(); 
     } 
    }); 
} 

Pass benutzerdefinierte Requisiten MyCalendar Präsentationskomponente:

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 
};