代码之家 › 专栏 › 技术社区 › Alexander Solonik

React BigCalendar拖放示例不起作用

react-big-calendar react-dnd reactjs

4

Alexander Solonik · 技术社区 · 7 年前

我刚刚看了一个大日历拖放示例 HERE . 我试图自己创建一个拖放的本地示例,只是想看看拖放如何与bigcalendar一起工作。我创建了以下内容:

DNDJS

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)

小精灵

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 . 为什么拖放示例在我的项目中不起作用?

我在本地创建的示例也可以看到我的repo here .

3 回复 | 直到 7 年前

1

6

grizzthedj dusa bhargava 7 年前

似乎不支持 create-react-app 默认情况下,因此 .less 导入 dragAndDrop 在你 Dnd.js 不起作用。

您可以在项目中设置较少的内容,也可以只导入 .css 直接归档,因为它已经存在了。

使用 CSS 文件,在您的 dnd.js 文件,更改此导入…

import 'react-big-calendar/lib/addons/dragAndDrop/styles.less';

对此…

import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';

2

1

Pikeo 7 年前

检查你的风格装载机。可能并不是所有的样式都按原样应用,拖放需要大量的css定位。我的项目也有类似的问题。

3

-2

Ð¡ÐµÑÐ³ÐµÐ¹ Ð¡ÐµÐ´ÑÑ 7 年前

 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;