legitcode / scheduler Goto Github PK
View Code? Open in Web Editor NEWA pure React implementation of a drag and drop scheduler
Home Page: http://legitcode.github.com/scheduler
License: MIT License
A pure React implementation of a drag and drop scheduler
Home Page: http://legitcode.github.com/scheduler
License: MIT License
It is possible add color to bars according to state or another event attribute?
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
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?
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.)
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.
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?
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
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.
I think this is as simple as cleaning up the callback flags, but we'll see.
I would like to be able to show % progress, status, or some other quantitative value by using two colors within a schedule bar.
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.
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 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
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'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
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"
}
}
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.
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
Can you provide an example file that uses the Scheduler import rahter than one that uses the src code?
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).
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.