[Question] Events not show with DemoData

[hoangtrieukd]

This is my component: https://jsfiddle.net/hoangtrieukd/s2d0rpy9/ But events not show: What's wrong with me!

[StephenChou1017]

@hoangtrieukd You can try this demo, it should work.

[MikeDev96]

@hoangtrieukd have you setup the drag and drop context? I had the same issue where no events would show, but wrapping the component with a DND context fixes it.

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

let schedulerData = new SchedulerData("2017-12-20", ViewTypes["Week"]);

schedulerData.setResources(DemoData.resources);

schedulerData.setEvents(DemoData.events);

class Calendar extends React.Component {
  prevClick = e => {
    console.log(e);
  };

  nextClick = e => {
    console.log(e);
  };

  onSelectDate = e => {
    console.log(e);
  };

  onViewChange = e => {
    console.log(e);
  };

  eventClicked = e => {
    console.log(e);
  };

  render() {
    return (
      <div>
        <Scheduler
          schedulerData={schedulerData}
          prevClick={this.prevClick}
          nextClick={this.nextClick}
          onSelectDate={this.onSelectDate}
          onViewChange={this.onViewChange}
          eventItemClick={this.eventClicked}
        />
      </div>
    );
  }
}

export default DragDropContext(HTML5Backend)(Calendar);

[bl5ck]

I also have this problem. Used react-styleguidist to serve the docs site and it also doesn't show events. I tried your solution by copying exactly the script content above, but still the same.

[bl5ck]

I tried with the simplest app version (my current app without sagas, reducers, containers, etc...) and it still shows blank scheduler.

[bl5ck]

It seems to have the same issue with this bug report: https://github.com/StephenChou1017/react-big-scheduler/issues/88

[smoczynskicitiz]

I was having some trouble too to display demo events.

What you need to do is, like the example, create this file (https://github.com/StephenChou1017/react-big-scheduler-demo/blob/master/src/withDnDContext.js) in your project and then, call it from your Component and wrapped it.

import withDragDropContext from "../../utils/withDnDContext";

...

export default compose(
  withDragDropContext,
  ...
)(Component);

It should be ok after that.

[ritapetillo]

Hi, I'm having the same problem with events not showing up in the table. I tried all the solutions mentioned above, but none of them worked.

Any clue how to resolve this problem?

"react": "^16.7.0", "react-big-scheduler": "^0.2.5", "react-dnd": "^7.0.2", "react-dnd-html5-backend": "^7.0.2", "react-dom": "^16.7.0",

[smoczynskicitiz]

Hello @ritapetillo ,

Try to use the following packages with these versions :

"react-dnd": "^5.0.0", "react-dnd-html5-backend": "^5.0.1",

[seanmoghadam]

Hello, I'm having the same problem with missing events. I tried downgrading several libs, but without success

 import React from "react";
 import moment from "moment";
 import Scheduler, {CellUnits, DATE_FORMAT, DemoData, SchedulerData, ViewTypes} from "react-big-scheduler";
 import {DragDropContext} from 'react-dnd'
 import HTML5Backend from 'react-dnd-html5-backend'

 class BookingScheduler extends React.Component {
  constructor(props) {
      super(props);

      let schedulerData = new SchedulerData(moment().format(DATE_FORMAT), ViewTypes.Custom, false, false, {
          customCellWidth: 30,
        nonAgendaDayCellHeaderFormat: "M/D|HH:mm",
        views: [
            {viewName: "One day", viewType: ViewTypes.Custom, showAgenda: false, isEventPerspective: false},
            {viewName: "One week", viewType: ViewTypes.Custom1, showAgenda: false, isEventPerspective: false},
            {viewName: "One month", viewType: ViewTypes.Custom2, showAgenda: false, isEventPerspective: false},
        ],
    }, {
        getCustomDateFunc: this.getCustomDate,
        isNonWorkingTimeFunc: this.isNonWorkingTime
    });
    schedulerData.localeMoment.locale("en");
    schedulerData.setResources(DemoData.resources);
    schedulerData.setEvents(DemoData.events);

    this.state = {
        viewModel: schedulerData,
    }
}

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

    return (
        <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}
            />
        </div>
    )
}
}
export default DragDropContext(HTML5Backend)(BookingScheduler)`

[seanmoghadam]

Resolved my issue, had to downgrade to:

"react-dnd": "^5.0.0", "react-dnd-html5-backend": "^5.0.1"

At my first attempt i missed the ^ flag, so it got still installed in the wrong version. Seems that is also compatible with [email protected].

thanks @smoczynskicitiz !

[reenan]

@smoczynskicitiz and @Krankypanky this indeed fixed the issue for me as well. @StephenChou1017 is there any plan to provide support for the latest versions of react-dnd? Thanks!

[StephenChou1017]

@reenan I'll try:-)

[tuantq10]

Dear @StephenChou1017 ,

I was having some trouble too to display demo events. I have followed suggestion from @Krankypanky, but still not woking.

This is my packages:

"axios": "^0.18.0", "braces": "^2.3.2", "history": "^4.7.2", "i18next": "^15.0.2", "i18next-browser-languagedetector": "^3.0.0", "i18next-xhr-backend": "^2.0.0", "jquery": "^3.3.1", "moment": "^2.24.0", "numeral": "^2.0.6", "react": "16.8.3", "react-big-scheduler": "^0.2.6", "react-dnd": "5.0.0", "react-dnd-html5-backend": "5.0.1", "react-dom": "16.8.3", "react-i18next": "^10.3.0", "react-redux": "^6.0.0", "react-router": "^4.3.1", "react-router-dom": "^4.3.1", "recompose": "^0.30.0", "redux": "^4.0.1", "redux-thunk": "^2.3.0", "toastr": "^2.1.4", "validator": "^10.11.0", "wix-style-react": "6.7.3"

[reenan]

Dear @StephenChou1017 ,

I was having some trouble too to display demo events. I have followed suggestion from @Krankypanky, but still not woking.

@tuantq10 don't forget to delete the node_modules folder and re-run npm i in order to setup the correct versions.

[amansor788]

export default DragDropContext(HTML5Backend)(Calendar); @hoangtrieukd this solution worked for me!!

[QaisernRiaz]

@hoangtrieukd You can try this demo, it should work.

plese check this #125 problem.

[Ramesraina]

Hi, I was having some trouble to integrate this scheduler into my application.

When i am trying with the default demoData which already this scheduler have is working fine. If i will remove all the data except resources, it is working fine only. But if i will remove any resource from that list, It shows,  "**Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.**". 

[premji1528]

Try This https://github.com/StephenChou1017/react-big-scheduler/issues/117#issuecomment-704983192

[KennanObura]

If anyone still have the same issue, these versions seem to work "react-dnd": "^7.5.0", "react-dnd-html5-backend": "^7.5.0", "react-dom": "^17.0.2", "react-big-scheduler": "^0.2.7",

[ppmview]

Still now working

Try This #117 (comment)

[ppmview]

If anyone still have the same issue, these versions seem to work "react-dnd": "^7.5.0", "react-dnd-html5-backend": "^7.5.0", "react-dom": "^17.0.2", "react-big-scheduler": "^0.2.7",

Not working