Trying to use the resourceTimeRanges feature with the React TypeScript Scheduler, but it brakes the drag&drop of the events.
It gives the following error:
Uncaught TypeError: Cannot read property 'overLeftHandle' of undefined
I'm using versions:
Scheduler: 2.0.0
React: 16.8.4
ReactDOM: 16.8.4
TypeScript: 3.4.1
Also tested this with the React TypeScript example and it gives the same error. And it gives the error even if I don't have any resource time ranges. It's enough to have the feature enabled to brake the drag&drop.
Support Forum
Hello @mikko.suomalainen
Thanks for your feedback. I've checked how the feature works with the scheduler trial 2.0 as well as with the latest nightly build (available for users which have a license). I couldn't reproduce your issue. I didn't see the error you'd mentioned and the drag and drop feature worked fine.
https://app.assembla.com/spaces/bryntum/tickets/8146-resourcetimeranges-config-of-resourcetimeranges-feature-doesn--39-t-work/details
https://app.assembla.com/spaces/bryntum/tickets/8147-resourcetimeranges-name-collision/details
Could you please follow the steps below and let me know if it works for you?
Please download the latest trial from Bryntum site and unzip it.
Then please open a terminal, change current directory to "scheduler-2.0.0-trial/examples/react_typescript" and run "npm install" and then "npm run start"
Please open https://localhost:3000/ to check if it works.
Now let's add the feature. For that please edit examples/react_typescript/src/components/BryntumScheduler.tsx file and add 'resourceTimeRanges' to the schedulerFeatures definition:
and edit examples/react_typescript/src/App.tsx and set the feature to true in BryntumScheduler component:
Now please make sure the demo works fine.
Please open the browser console and run:
Then please try to add zones from console, you should see 2 zones added on the screen
Now let's get back to the code editor. Please edit examples/react_typescript/src/App.tsx again:
Please go to your browser tab and make sure it works as expected. 2 zones on the screen, no errors found, and drag and drop works fine.
Let me know please if the described steps work for you.
If not, please provide a runnable testcase that I can inspect.
Best regards,
Pavel
Thanks for your feedback. I've checked how the feature works with the scheduler trial 2.0 as well as with the latest nightly build (available for users which have a license). I couldn't reproduce your issue. I didn't see the error you'd mentioned and the drag and drop feature worked fine.
Though while I was checking your issue I found 2 other issues related to the feature. Here they are:It gives the following error:
Uncaught TypeError: Cannot read property 'overLeftHandle' of undefined
https://app.assembla.com/spaces/bryntum/tickets/8146-resourcetimeranges-config-of-resourcetimeranges-feature-doesn--39-t-work/details
https://app.assembla.com/spaces/bryntum/tickets/8147-resourcetimeranges-name-collision/details
Could you please follow the steps below and let me know if it works for you?
Please download the latest trial from Bryntum site and unzip it.
Then please open a terminal, change current directory to "scheduler-2.0.0-trial/examples/react_typescript" and run "npm install" and then "npm run start"
Please open https://localhost:3000/ to check if it works.
Now let's add the feature. For that please edit examples/react_typescript/src/components/BryntumScheduler.tsx file and add 'resourceTimeRanges' to the schedulerFeatures definition:
export default class BryntumScheduler extends React.Component {
// Features requires special handling when used as props
schedulerFeatures = [
'resourceTimeRanges',
<BryntumScheduler
ref={'scheduler'}
resourceTimeRanges={true}
Please open the browser console and run:
bryntum.query('scheduler').resourceTimeRangeStore // you should see the store, if you see "undefined" then the feature is not activated
bryntum.query('scheduler').resourceTimeRangeStore.data = [
{ id : 1, resourceId : 'a', startDate : '2018-02-07T14:00', endDate : '2018-02-07T16:00', name : 'Lunch' },
{ id : 2, resourceId : 'b', startDate : '2018-02-07T14:00', endDate : '2018-02-07T16:00', name : 'Lunch' }
]
import { ResourceTimeRangeStore } from 'bryntum-scheduler/scheduler.umd.js';
<BryntumScheduler
ref={'scheduler'}
resourceTimeRanges={{
store : new ResourceTimeRangeStore({
data : [
{ id : 1, resourceId : 'a', startDate : '2018-02-07T14:00', endDate : '2018-02-07T16:00', name : 'Lunch' },
{ id : 2, resourceId : 'b', startDate : '2018-02-07T14:00', endDate : '2018-02-07T16:00', name : 'Lunch' }
]
})
}}
Let me know please if the described steps work for you.
If not, please provide a runnable testcase that I can inspect.
Best regards,
Pavel
Pavlo Miklashevych
Sr. Frontend Developer