Hi,

I have tried this scheduler using import. but not rendered properly and give this error:

addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

My Source code is :

import React from 'react';
import moment from 'moment';
import Scheduler from 'legit-scheduler'
import {RangeDate, DateRange  } from 'legit-scheduler';
import { Row, Col } from '../../components/UI/Layout';
import { Panel } from '../../components/UI/';


var resources = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten'],
    today = new RangeDate(new Date()),
    events = [
      {
        id: 'foobar',
        title: 'Do this',
        startDate: today.advance('days', 1).toRef(),
        duration: 5,
        resource: 'One'
      },
      {
        id: 'barfoo',
        title: 'Do that',
        startDate: today.advance('days', 3).toRef(),
        duration: 4,
        resource: 'Two'
      },
      {
        id: 'barfoobaz',
        title: 'I am disabled',
        startDate: today.advance('days', 2).toRef(),
        duration: 7,
        resource: 'Three',
        disabled: true
      },
      {
        id: 'foobah',
        title: 'Do another thing',
        startDate: today.advance('days', 6).toRef(),
        duration: 14,
        resource: 'Seven'
      },
    ]
class Scheduling extends React.Component{

  constructor(props){
    super(props);
    let from = new RangeDate()
    let to = from.advance('weeks', 2)

    this.state = {
      events : events,
      range: new DateRange(from, to)
    }
  }

  eventChanged(props) {
    const index = this.state.events.findIndex(event => event.id === props.id)
    const newEvents = this.state.events
    newEvents[index] = props
    this.setState({ ...props, events: newEvents })
    console.log(props)
  }

  eventResized(props) {
    const index = this.state.events.findIndex(event => event.id === props.id)
    const newEvents = this.state.events
    newEvents[index] = props
    this.setState({ ...props, events: newEvents })
    console.log(props)
  }

  eventClicked(props) {
    alert(`${props.title} clicked!`)
    console.log(props)
  }

  cellClicked(resource, date) {
    alert(`You clicked on ${resource} - ${date}`)
    console.log(resource, date)
  }

  rangeChanged(range) {
    this.setState({ range: range })
  }

  render() {
    const { events, range } = this.state,
            { from, to } = range
    return (
      <div>
				<Panel>
        <Scheduler
       from={from}
       to={to}
       resources={resources}
       events={events}
       width={1100}
       onEventChanged={this.eventChanged}
       onEventResized={this.eventResized}
       onEventClicked={this.eventClicked}
       onCellClicked={this.cellClicked}
       onRangeChanged={this.rangeChanged}
     />
        </Panel>
      </div>
    );
  }
}

export default Scheduling;

Can someone help me on this
@dphaener

I need to see some additional information per row in a tabular format. Depending upon what I am visualizing, this could be quantity, cost, start/end date, name, or a tree/folder control and summary label like Issue #7

I think this is as simple as cleaning up the callback flags, but we'll see.

As a user, I need to be able to move leaf nodes from one branch to another branch.

So, for a tree data structure, my initial state:

Item 1
  subItem A
  subItem B
  subItem C
Item 2
  subItem X
  subItem Y
  subItem Z

I then drag 'subItem Y' from Item 2 to Item 1:

Item 1
  subItem A
  subItem B
  subItem Y
  subItem C
Item 2
  subItem X
  subItem Z

As a developer, I would like some simple 'starter' css that will (1) make the scheduler look better 'out of the the box' and (2) give examples of how to (further) customize the appearance of the scheduler through the example css.

To reproduce:

> git clone git clone https://github.com/Legitcode/scheduler.git
> cd scheduler
> npm install

Error:

<SNIP>
npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/Cellar/node4-lts/4.4.7/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.4.7
npm ERR! npm  v2.15.8
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.6
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.7
npm ERR! peerinvalid Peer [email protected] wants react@^15.0 || 0.14.x
npm ERR! peerinvalid Peer [email protected] wants react@>=0.11.0

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/matt/code/scheduler/npm-debug.log

I would like to see both 'granular' (e.g. one week) as well as 'summary' (e.g. month, quarter, year) views of the schedule pane.

I would like an easy way to see with mouseover whether my drag action will move or resize the schedule bar. My suggestion is to make 'end caps' affordances that control the resize actions, then mouseover the rest of the schedule bar will show the move signifier.

Nuff said

Right now the scheduler is hard set on a 4 weeks (in days) for display. It would be nice to have it more flexible. It would be nice to be able to send a start date, and end date and get a table that is showing the right range (right now it will distort the entire table).

Hello,

i tried to use this component. But if i just copy the example i got some import problems.

It seems that the objects are not correct imported.

I did the import like this:

import Scheduler from 'legit-scheduler'
import RangeDate from 'legit-scheduler'
import DateRange from 'legit-scheduler'

And get for the example the error code:

TypeError: from.advance is not a function

Even if i get rid from RangeDate and DateRange import the calender gets roughly rendered but throws this error:

TypeError: Cannot read property 'getHeaderColGrouop' of undefined

Modules:

"react": "^15.3.2",
"legit-scheduler": "^0.3.0"

Can someone help me out here?

Especially since some schedule items might overlap preset periods, I would like to smooth scroll along the x axis of the schedule view, ideally with a drag/pan affordance.

I would like to be able to show % progress, status, or some other quantitative value by using two colors within a schedule bar.

It is possible add color to bars according to state or another event attribute?

I'd like to be able to show/hide groups of data by using a tree/folder structure for rows.

This is a hierarchical data structure comprised of branches and leaves like:

Item 1
  subItem A
  subItem B
  subItem C
Item 2
  subItem X
  subItem Y
  subItem Z

Every once in a great while, events disappear when dropped. This is related to an issue where the isDragging prop (from React DnD) remains true and the component isn't rendered. I'm not sure why this is happening, and I can't reproduce it with any accuracy whatsoever. It happens quite randomly, and not very often. The good news is, the event is moved properly and all the callbacks are fired, so data won't be lost, but a page refresh is required. I think we may want to unmount the component while dragging. Not sure if this will help, but we can give it a shot.

I would like to see a rollup of the quantitative value associated with schedule bars as a color at the bottom of each column, with customizable thresholds for each color. Ideally, the thresholds could be defined per period, (e.g. weekend and holidays may have different thresholds).

For instance, if I have three 'requests' for 50 widgets on a given day, and I have a threshold for that of 100, it will be 'over' allocation. Similarly, 100 'at' allocation and 75 would be 'under' allocation.

Can you provide an example file that uses the Scheduler import rahter than one that uses the src code?

After navigation, events don't drop properly. They just disappear.

EDIT: This only happens when you go forward in time, and then back to the original date range.
DOUBLE EDIT: This happens fairly randomly, on multiple types of navigation, and is unpredictable. I am imagining it has to do with the cells and their store data not being properly synced on navigation.

How would I change the start date of the range selection and calendar to use isoWeeks (Monday is always the start of the week ending with Saturday and Sunday rather than the current day.)

I am using this lib, but I am getting this error

TypeError: _react.PropTypes is undefined
./node_modules/legit-scheduler/lib/event.js
node_modules/legit-scheduler/lib/event.js:198

195 |
196 | return Event;
197 | }(_react2.default.Component), _class2.propTypes = {

198 | title: _react.PropTypes.string.isRequired,
199 | startDate: _react.PropTypes.string.isRequired,
200 | duration: _react.PropTypes.number.isRequired,
201 | resource: _react.PropTypes.string.isRequired,

my package.json

{
"name": "react-flask-hotel",
"version": "0.1.0",
"private": true,
"dependencies": {
"legit-scheduler": "^0.3.1",
"material-ui": "^0.20.0",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-flexbox-grid": "^2.0.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"react-scripts": "1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

Getting

Uncaught (in promise) Error: traverseParentPath(....): Cannot traverse from and to the same ID, ``.

Caused by findDOMNode in Cell.jsx

Looks like replacing it with an element ref should fix it?

As a consumer of Scheduler, I need to include its license file and also maintain visibility of which release I'm using and what might change were I to upgrade.