Reaktywuj duży kalendarz, dodaj popper do początkowego eventu?

Question

Wygląda na to, że można tworzyć niestandardowe komponenty komponentu kalendarza reagowania. Patrzyłem na ten przykład:

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

Nie jest jednak jasne, jak utworzyć niestandardowy komponent zdarzenia. Jestem również przejrzałem dokumentacji, ale nie ma żadnych wyraźnych przykładów:

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

Jestem szczególnie zainteresowany w tworzeniu podpowiedź dla każdego zdarzenia, które przedstawia bardziej szczegółowy opis zdarzenia.

Czy ktoś może wskazać przykład miejsca, w którym ktoś utworzył niestandardowy komponent do reagowania - duży kalendarz?

AKTUALIZACJA: Oto obraz kalendarza i niektórych zdarzeń renderowanych w widoku miesiąca. Myślę, że niestandardowe wydarzenie powinno zdecydowanie zawierać "zdarzenie rbc" i "zawartość zdarzenia rbc". Aby dodać bootstrap podpowiedź myślę coś takiego w składniku zwyczaj wydarzenie:

A oto gdzie składnik komórek wydarzenie jest tworzony w kodzie reagują-big-kalendarza źródłowego.

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

postanowiłem spróbować rozszerzenie komponentu EventCell, kiedy mijałem go jako rekwizytu składnika wydarzenie, zdarzenie nie ma już żadnej treści. Nie wiem, jak przekazać szczegóły wydarzenia do elementu div "zdarzenia rcb" wewnątrz komponentu EventCell. Zobacz poniżej ..

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 
} 

Tutaj jestem przechodzącej elementy object prostu stworzony do komponentu prezentacji MyCalendar:

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

I wreszcie przechodząc elementy object do elementu prezentacji za pomocą rekwizytów. Które z powodzeniem renderuje się w widoku, ale jak już wcześniej powiedziałem - bez treści.

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

Wygląda na to, że powinienem to zrobić w inny sposób ... Jakieś sugestie?

Answer 1

Oto, co wymyśliłem, jestem pewien, że można go wyczyścić - ale działa.

Utwórz niestandardowy komponent zdarzenia, który zawiera treść popover.

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

Dodaj detektory zdarzeń:

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

przekazywania niestandardowych podpory składnikiem prezentacji MyCalendar:

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