我只是在这里浏览 BigCalendar 拖放示例。我试图自己创建一个本地的拖放示例,只是为了看看拖放如何与 BigCalendar 一起工作。我创建了以下内容:
Dnd.js
import React from 'react'
import events from './events'
import HTML5Backend from 'react-dnd-html5-backend'
import { DragDropContext } from 'react-dnd'
import BigCalendar from 'react-big-calendar'
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import 'react-big-calendar/lib/addons/dragAndDrop/styles.less';
const DragAndDropCalendar = withDragAndDrop(BigCalendar)
class Dnd extends React.Component {
constructor(props) {
super(props)
this.state = {
events: events,
}
this.moveEvent = this.moveEvent.bind(this)
}
moveEvent({ event, start, end }) {
const { events } = this.state
const idx = events.indexOf(event)
const updatedEvent = { ...event, start, end }
const nextEvents = [...events]
nextEvents.splice(idx, 1, updatedEvent)
this.setState({
events: nextEvents,
})
alert(`${event.title} was dropped onto ${event.start}`)
}
resizeEvent = (resizeType, { event, start, end }) => {
const { events } = this.state
const nextEvents = events.map(existingEvent => {
return existingEvent.id == event.id
? { ...existingEvent, start, end }
: existingEvent
})
this.setState({
events: nextEvents,
})
alert(`${event.title} was resized to ${start}-${end}`)
}
render() {
return (
<DragAndDropCalendar
selectable
events={this.state.events}
onEventDrop={this.moveEvent}
resizable
onEventResize={this.resizeEvent}
defaultView="week"
defaultDate={new Date(2015, 3, 12)}
/>
)
}
}
export default DragDropContext(HTML5Backend)(Dnd)
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Knight from './knight/knight';
import Square from './square/square';
import Board from './board/board';
import Dnd from './bigcalender/dnd';
import { moveKnight , observe } from './game';
import BigCalendar from 'react-big-calendar'
import SimpleDrag from './simpleDrag/simpleDrag';
import moment from 'moment';
BigCalendar.momentLocalizer(moment);
const rootEl = document.getElementById('root');
ReactDOM.render(
<Dnd />,
rootEl
)
日历显示所有事件都很好,问题是拖放功能不太有效。该代码几乎是来自BigCalendar 拖放源代码的复制粘贴。那么为什么拖放示例在我的项目中不起作用?
我在本地创建的示例也可以在这里看到我的仓库。