React BigCalendar 拖放示例不起作用
React BigCalendar drag and drop example not working
我刚刚浏览了 BigCalendar 拖放示例 HERE。我尝试自己创建一个拖放的本地示例,只是为了看看拖放如何与 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 drag and drop source code源码的复制粘贴。那么为什么拖放示例在我的项目中不起作用?
我在本地创建的示例也可以在我的仓库中看到 here。
似乎 create-react-app
中默认不支持 LESS,因此 Dnd.js
中 dragAndDrop
的 .less
导入无效。
您可以在您的项目中设置 LESS,或者您可以直接导入 .css
文件,因为它已经存在。
要使用 .css
文件,请在您的 dnd.js
文件中更改此导入 ...
import 'react-big-calendar/lib/addons/dragAndDrop/styles.less';
为此...
import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
检查你的样式加载器。可能并非所有样式都按应有的方式应用,拖放需要大量 CSS 定位。我在我的项目中遇到了类似的问题。
import React, { Component } from 'react';
import moment from 'moment';
import BigCalendar from 'react-big-calendar';
import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
import "react-big-calendar/lib/css/react-big-calendar.css";
const DragAndDropCalendar = withDragAndDrop(BigCalendar);
const localizer = BigCalendar.momentLocalizer(moment)
class Calendar extends Component {
constructor(props) {
super(props);
this.state = {
events: [
{
start: new Date(),
end: new Date(),
title: "Some title",
id: 1,
allDay: false,
},
{
start: new Date('Wed Jan 30 2019 10:06:44 GMT+0200'),
end: new Date('Thu Jan 31 2019 10:06:44 GMT+0200'),
title: "Some another title",
id: 2,
allDay: false,
}
]
};
this.onEventDrop = this.onEventDrop.bind(this);
this.onEventResize = this.onEventResize.bind(this);
}
onEventResize({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,
})
}
onEventDrop({ 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,
})
}
render() {
const { events } = this.state;
return (
<div>
<DragAndDropCalendar
style={{ height: '100vh' }}
localizer={localizer}
culture="en-GB"
events={events}
defaultDate={new Date()}
defaultView="month"
startAccessor="start"
endAccessor="end"
titleAccessor="title"
onEventResize={this.onEventResize}
onEventDrop={this.onEventDrop}
resizable
selectable
/>
</div>
);
}
}
export default Calendar;
我刚刚浏览了 BigCalendar 拖放示例 HERE。我尝试自己创建一个拖放的本地示例,只是为了看看拖放如何与 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 drag and drop source code源码的复制粘贴。那么为什么拖放示例在我的项目中不起作用?
我在本地创建的示例也可以在我的仓库中看到 here。
似乎 create-react-app
中默认不支持 LESS,因此 Dnd.js
中 dragAndDrop
的 .less
导入无效。
您可以在您的项目中设置 LESS,或者您可以直接导入 .css
文件,因为它已经存在。
要使用 .css
文件,请在您的 dnd.js
文件中更改此导入 ...
import 'react-big-calendar/lib/addons/dragAndDrop/styles.less';
为此...
import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
检查你的样式加载器。可能并非所有样式都按应有的方式应用,拖放需要大量 CSS 定位。我在我的项目中遇到了类似的问题。
import React, { Component } from 'react';
import moment from 'moment';
import BigCalendar from 'react-big-calendar';
import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
import "react-big-calendar/lib/css/react-big-calendar.css";
const DragAndDropCalendar = withDragAndDrop(BigCalendar);
const localizer = BigCalendar.momentLocalizer(moment)
class Calendar extends Component {
constructor(props) {
super(props);
this.state = {
events: [
{
start: new Date(),
end: new Date(),
title: "Some title",
id: 1,
allDay: false,
},
{
start: new Date('Wed Jan 30 2019 10:06:44 GMT+0200'),
end: new Date('Thu Jan 31 2019 10:06:44 GMT+0200'),
title: "Some another title",
id: 2,
allDay: false,
}
]
};
this.onEventDrop = this.onEventDrop.bind(this);
this.onEventResize = this.onEventResize.bind(this);
}
onEventResize({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,
})
}
onEventDrop({ 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,
})
}
render() {
const { events } = this.state;
return (
<div>
<DragAndDropCalendar
style={{ height: '100vh' }}
localizer={localizer}
culture="en-GB"
events={events}
defaultDate={new Date()}
defaultView="month"
startAccessor="start"
endAccessor="end"
titleAccessor="title"
onEventResize={this.onEventResize}
onEventDrop={this.onEventDrop}
resizable
selectable
/>
</div>
);
}
}
export default Calendar;