You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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;
Hi,
I have tried this scheduler using import. but not rendered properly and give this error:
My Source code is :
Can someone help me on this
@dphaener
The text was updated successfully, but these errors were encountered: