javascript - React big calendar, add bootstrap popover to event? - Stack Overflow

admin管理员组

文章数量:1344172

Looks like you can create custom ponents for the react calendar ponent. I was looking at this example:

.js.

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

.html#prop-ponents

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

Can anyone point to an example of where someone has created a custom ponent for react-big-calendar?

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 ponent:

And here is where the event cell ponent is created in the react-big-calendar source 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') > 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 extending the EventCell ponent, when I passed it in as the event ponent prop, the event no longer had any content. Not sure how to pass event details into the 'rcb-event' div inside of the EventCell ponent. See below..

import React, { PropTypes } from 'react';
import MyCalendar from '../ponents/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 ponents = {
    event: MyEvent
}

Here, I am passing the ponents object I just created down to the MyCalendar presentation ponent:

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

And, finally passing the ponents object to the presentation ponent via props. Which does successfully render in the view, but as I said earlier - without content.

const MyCalendar = props => (
    <div className="calendar-container">
        <BigCalendar
            selectable
            popup
            ponents={propsponents}
            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,
    ponents: PropTypes.object.isRequired
};

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

Looks like you can create custom ponents for the react calendar ponent. I was looking at this example:

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

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

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

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

Can anyone point to an example of where someone has created a custom ponent for react-big-calendar?

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 ponent:

And here is where the event cell ponent is created in the react-big-calendar source 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') > 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 extending the EventCell ponent, when I passed it in as the event ponent prop, the event no longer had any content. Not sure how to pass event details into the 'rcb-event' div inside of the EventCell ponent. See below..

import React, { PropTypes } from 'react';
import MyCalendar from '../ponents/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 ponents = {
    event: MyEvent
}

Here, I am passing the ponents object I just created down to the MyCalendar presentation ponent:

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

And, finally passing the ponents object to the presentation ponent via props. Which does successfully render in the view, but as I said earlier - without content.

const MyCalendar = props => (
    <div className="calendar-container">
        <BigCalendar
            selectable
            popup
            ponents={props.ponents}
            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,
    ponents: PropTypes.object.isRequired
};

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

• javascript
• twitter-bootstrap
• reactjs

Share Improve this question Follow edited Aug 8, 2016 at 19:35 malexanders asked Aug 8, 2016 at 6:06 malexandersmalexanders 3,35366 gold badges2727 silver badges4646 bronze badges 6

• Questions asking us to remend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it. – Makyen ♦ Commented Aug 8, 2016 at 6:15
• Added some things I've tried - would be great if you could take a look – malexanders Commented Aug 8, 2016 at 17:08
• "Can anyone point to an example of where someone has created a custom ponent for react-big-calendar?" makes the question off-topic (requesting pointers to off-site resources is specifically off-topic: help center). It would be good to remove it. In general, it is preferable to include information (code, errors, etc.) in the question in text format as opposed to images. An image is better than nothing, but text lets it be copied or searched. An image might be a good idea (even in addition to text) if it provides additional information. Basically: text >>> image >>>>>>>> nothing. – Makyen ♦ Commented Aug 8, 2016 at 17:58
• I added a bunch of code with notes, did you not see this? – malexanders Commented Aug 8, 2016 at 18:17
• I did. Adding that code is a very significant improvement to the question, which will be helpful to someone answering. However, you also added an image of code in the "react-big-calendar source code" which could have been copy&pasted. That would be better. Don't just remove the image: add the code as text, a pointer to the code online, and then remove the image. In addition, the request for an external resource is still in the question (if that is removed, I would retract my close vote and delete the ment about it being off-topic). I'm just providing suggestions for improving the question. – Makyen ♦ Commented Aug 8, 2016 at 18:38

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

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

Create custom Event ponent, which includes the popover content.

import React, { PropTypes } from 'react';
import MyCalendar from '../ponents/bigCalendar';
import _ from 'lodash';

class MyEvent extends React.Component {
    constructor(props){
        super(props)
    }
    ponentDidMount(){
        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 ponents = {
    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 ponents={ponents} 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();
        }
    });
}

Pass custom props to MyCalendar presentation ponent:

const MyCalendar = props => (
    <div className="calendar-container">
        <BigCalendar
            selectable
            popup
            ponents={props.ponents}
            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,
    ponents: PropTypes.object.isRequired
};

Just to update answer to 2020 using moment and reactstrap.

import React, {FC} from "react";
import {Calendar, Event, momentLocalizer, ToolbarProps} from "react-big-calendar";
import {UncontrolledTooltip} from "reactstrap";
import moment from "moment";

const localizer = momentLocalizer(moment);

interface CalendarToolbarProps extends ToolbarProps {

}

const CalendarToolbar: FC<CalendarToolbarProps> = ({date, view: viewMode, onView, ...props}) => {
    return <div>Whatever you want on toolbar</div>
};


const eventPropGetter = (event: any, start: any, end: any, isSelected: boolean) => {
    const style = {
        backgroundColor: "#FF0000",
        paddingLeft: "10px",
        color: 'white',
    };
    return {
        style: style
    };
}

export interface FooEvent extends Event {
}

interface CalendarWithTooltipProps {
    events: Event[]
}

const CalendarWithTooltip: FC<CalendarWithTooltipProps> = ({events, ...props}) => {
    return <Calendar
        events={events}
        localizer={localizer}
        eventPropGetter={eventPropGetter}
        className={"overflow-scroll"}
        ponents={{
            event: (ponent: any) => {
                const targetId = "...."
                const {event} = ponent
                return <div id={targetId}>
                    {event?.title}
                    <UncontrolledTooltip placement={"top"}
                                         autohide={false}
                                         style={{minWidth: 200}}
                                         target={targetId} trigger={"hover"}>
                        Your tooltip content
                    </UncontrolledTooltip>
                </div>
            },
            toolbar: (props) => <CalendarToolbar {...props}/>
        }}
    />
}

export default CalendarWithTooltip

本文标签： javascriptReact big calendaradd bootstrap popover to eventStack Overflow