Our pure JavaScript Scheduler component


Post by mikko.suomalainen »

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.

Post by mats »

Is it only when you use the React wrapper that this happens? Or can you reproduce it in the regular vanilla JS samples too?

Post by mikko.suomalainen »

Apparently it happens only with the React wrapper.

Post by pmiklashevich »

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.
It gives the following error:
Uncaught TypeError: Cannot read property 'overLeftHandle' of undefined
Though while I was checking your issue I found 2 other issues related to the feature. Here they are:
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',
and edit examples/react_typescript/src/App.tsx and set the feature to true in BryntumScheduler component:
<BryntumScheduler
    ref={'scheduler'}
    resourceTimeRanges={true}
Now please make sure the demo works fine.
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
Then please try to add zones from console, you should see 2 zones added on the screen
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' }
                    ]
Now let's get back to the code editor. Please edit examples/react_typescript/src/App.tsx again:
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' }
                            ]
                        })
                    }}
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

Pavlo Miklashevych
Sr. Frontend Developer


Post by mikko.suomalainen »

It seems that this brakes the DnD:
features={ {resourceTimeRanges: true} }
I did like you described: added the resourceTimeRanges into the schedulerFeatures and added the resourceTimeRanges with a store for the scheduler and it worked!
Thank you so much!

Post Reply