Could not find the drag and drop manager in the context of ResourceEvents. Make sure to wrap the top-level component of your app with DragDropContext.

[gkhan205]

Hi @StephenChou1017 ,

I'm getting this error when I installed and created a top level component for my app as your example/Basic.

Could not find the drag and drop manager in the context of ResourceEvents. Make sure to wrap the top-level component of your app with DragDropContext.

Have tried everything I found on internet but none worked. Please help me with this. its very crucial for me.

import moment from "moment";
import React, {Component} from 'react';
import Scheduler, {SchedulerData, ViewTypes, DATE_FORMAT, DemoData} from 'react-big-scheduler';
import 'react-big-scheduler/lib/css/style.css'

import withDragDropContext from 'library/utilities/withDndContext';

class AppScheduler extends Component {
  constructor(props){
    super(props);

    let schedularData = new SchedulerData(new moment().format(DATE_FORMAT), ViewTypes.Month);
    schedularData.localeMoment.locale('en');
    schedularData.setResources(DemoData.resources);
    schedularData.setEvents(DemoData.events);

    this.state = {
      viewModel: schedularData
    }
  }

  prevClick = (schedulerData)=> {
    schedulerData.prev();
    schedulerData.setEvents(DemoData.events);
    this.setState({
      viewModel: schedulerData
    })
  }

  nextClick = (schedulerData)=> {
    schedulerData.next();
    schedulerData.setEvents(DemoData.events);
    this.setState({
      viewModel: schedulerData
    })
  }

  onViewChange = (schedulerData, view) => {
    schedulerData.setViewType(view.viewType, view.showAgenda, view.isEventPerspective);
    schedulerData.setEvents(DemoData.events);
    this.setState({
      viewModel: schedulerData
    })
  }

  onSelectDate = (schedulerData, date) => {
    schedulerData.setDate(date);
    schedulerData.setEvents(DemoData.events);
    this.setState({
      viewModel: schedulerData
    })
  }

  eventClicked = (schedulerData, event) => {
    alert(`You just clicked an event: {id: ${event.id}, title: ${event.title}}`);
  };

  ops1 = (schedulerData, event) => {
    alert(`You just executed ops1 to event: {id: ${event.id}, title: ${event.title}}`);
  };

  ops2 = (schedulerData, event) => {
    alert(`You just executed ops2 to event: {id: ${event.id}, title: ${event.title}}`);
  };

  newEvent = (schedulerData, slotId, slotName, start, end, type, item) => {

      let newFreshId = 0;
      schedulerData.events.forEach((item) => {
        if(item.id >= newFreshId)
          newFreshId = item.id + 1;
      });

      let newEvent = {
        id: newFreshId,
        title: 'New event you just created',
        start: start,
        end: end,
        resourceId: slotId,
        bgColor: 'purple'
      }
      schedulerData.addEvent(newEvent);
      this.setState({
        viewModel: schedulerData
      })
  }

  updateEventStart = (schedulerData, event, newStart) => {
      schedulerData.updateEventStart(event, newStart);
    this.setState({
      viewModel: schedulerData
    })
  }

  updateEventEnd = (schedulerData, event, newEnd) => {
      schedulerData.updateEventEnd(event, newEnd);
    this.setState({
      viewModel: schedulerData
    })
  }

  moveEvent = (schedulerData, event, slotId, slotName, start, end) => {
      schedulerData.moveEvent(event, slotId, slotName, start, end);
      this.setState({
        viewModel: schedulerData
      })
  }

  onScrollRight = (schedulerData, schedulerContent, maxScrollLeft) => {
    if(schedulerData.ViewTypes === ViewTypes.Day) {
      schedulerData.next();
      schedulerData.setEvents(DemoData.events);
      this.setState({
        viewModel: schedulerData
      });

      schedulerContent.scrollLeft = maxScrollLeft - 10;
    }
  }

  onScrollLeft = (schedulerData, schedulerContent, maxScrollLeft) => {
    if(schedulerData.ViewTypes === ViewTypes.Day) {
      schedulerData.prev();
      schedulerData.setEvents(DemoData.events);
      this.setState({
        viewModel: schedulerData
      });

      schedulerContent.scrollLeft = 10;
    }
  }

  onScrollTop = (schedulerData, schedulerContent, maxScrollTop) => {
    console.log('onScrollTop');
  }

  onScrollBottom = (schedulerData, schedulerContent, maxScrollTop) => {
    console.log('onScrollBottom');
  }

  toggleExpandFunc = (schedulerData, slotId) => {
    schedulerData.toggleExpandStatus(slotId);
    this.setState({
      viewModel: schedulerData
    });
  }

  render() {
    const {viewModel} = this.state;

    return (
      <div>
        <div>
          <Scheduler schedulerData={viewModel}
                     prevClick={this.prevClick}
                     nextClick={this.nextClick}
                     onSelectDate={this.onSelectDate}
                     onViewChange={this.onViewChange}
                     eventItemClick={this.eventClicked}
                     viewEventClick={this.ops1}
                     viewEventText="Ops 1"
                     viewEvent2Text="Ops 2"
                     viewEvent2Click={this.ops2}
                     updateEventStart={this.updateEventStart}
                     updateEventEnd={this.updateEventEnd}
                     moveEvent={this.moveEvent}
                     newEvent={this.newEvent}
                     onScrollLeft={this.onScrollLeft}
                     onScrollRight={this.onScrollRight}
                     onScrollTop={this.onScrollTop}
                     onScrollBottom={this.onScrollBottom}
                     toggleExpandFunc={this.toggleExpandFunc}
          />
        </div>
      </div>
    )
  }
}

export default withDragDropContext(AppScheduler);

withDndContext.js
-------------------

import {DragDropContext} from 'react-dnd'
import HTML5Backend from "react-dnd-html5-backend";

export default DragDropContext(HTML5Backend);

[zainbconf]

I was having the same issue, But with following packages it works fine. This issue comes when you update react-big-scheduler to "0.2.7"

"react-dnd": "5.0.0", "react-dnd-html5-backend": "5.0.1", "react-big-scheduler": "0.2.6",

[gkhan205]

Hi @zainbconf ,

Thank you it worked.

[gkhan205]

@StephenChou1017 , can you please fix this issue in the updated version?

[hraboviyvadim]

@StephenChou1017 any plans for future updates?

[rever96]

this is still broken on updated version :(

[asharafshahi]

Any plans to keep this project alive? Seems to be dead on arrival at the moment.

[kairiruutel]

Any update about the status of this project? ☝️

[ajaxsys]

Try this code:

            import {DragDropContextProvider} from 'react-dnd';
            import HTML5Backend from 'react-dnd-html5-backend';

            // In your render()

            <DragDropContextProvider backend={HTML5Backend}>
                <Scheduler schedulerData={schedulerData}
                        prevClick={prevClick}
                        nextClick={nextClick}
                        onSelectDate={onSelectDate}
                        onViewChange={onViewChange}
                        eventItemClick={eventClicked}
                    />
            </DragDropContextProvider>

[MaxMorrow]

Try this code:

            import {DragDropContextProvider} from 'react-dnd';
            import HTML5Backend from 'react-dnd-html5-backend';

            // In your render()

            <DragDropContextProvider backend={HTML5Backend}>
                <Scheduler schedulerData={schedulerData}
                        prevClick={prevClick}
                        nextClick={nextClick}
                        onSelectDate={onSelectDate}
                        onViewChange={onViewChange}
                        eventItemClick={eventClicked}
                    />
            </DragDropContextProvider>

Hi @ajaxsys , I was running into the same issue and tried your solution with no luck. After wrapping the scheduler in the DragAndDropProvider it still threw the same error.

I was able to get it working by downgrading to version 0.2.6 as @zainbconf suggested.

[Clement-Odrd]

I was having the same issue, But with following packages it works fine. This issue comes when you update react-big-scheduler to "0.2.7"

"react-dnd": "5.0.0", "react-dnd-html5-backend": "5.0.1", "react-big-scheduler": "0.2.6",

Still the same problem in 2021, use this solution it works

[gkhan205]

Closing this issue as there is no response from the author for a long.

[mustafa174]

any fix for this or any other library open source like this I need for project