Question

看起来您可以为react日历组件创建自定义组件。我在看这个例子：

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

但目前尚不清楚如何创建自定义事件组件。我也查看了文档，但没有明确的例子：

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

我特别感兴趣的是为每个显示更详细的事件描述的事件创建工具提示。

有人能指出某人为反应大日历创建自定义组件的示例吗？

更新：这是日历的图像和月视图中呈现的一些事件。我在想，一个自定义事件肯定应该包含＆＃39; rbc-event＆＃39;和＆＃r; rbc-event-content＆＃39;。要添加引导工具提示，我在自定义事件组件中考虑这样的事情：

这里是在react-big-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'];

我决定尝试扩展EventCell组件，当我将其作为事件组件prop传递时，该事件不再具有任何内容。不确定如何将事件详细信息传递到＆＃39; rcb-event＆＃39;在EventCell组件内部的div。见下文..

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
}

在这里，我将刚刚创建的组件对象传递给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>
        );
    }
}

最后，通过props将组件对象传递给表示组件。哪个在视图中成功渲染，但正如我之前所说 - 没有内容。

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

好像我应该采取另一种方式......有什么建议吗？

Answer 1

这就是我提出的，我确信它可以清理 - 但它确实有效。

创建自定义事件组件，其中包括弹出式内容。

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

添加事件监听器：

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

将自定义道具传递给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
};

Answer 2

只需使用瞬间和 reactstrap 将答案更新为 2020 。

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"}
        components={{
            event: (component: any) => {
                const targetId = "...."
                const {event} = component
                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

反应大日历，添加引导弹出到事件？

2 个答案: