Our pure JavaScript Scheduler component


Post by joanxtb »

Hi. We've downloaded your trial version as we're interested in the Vertical Mode feature of your scheduler. Our product is built on React.js, so we've used your integration guide to create a very simple example. Out of the box on the 'horizontal' version. it renders just fine with the following code:
<BryntumScheduler
                ref={'scheduler'}
                autoHeight={true}
                startDate={new Date(2019, 1, 7, 8)}
                endDate={new Date(2019, 1, 7, 18)}
                eventStyle="colored"
                tickSize={80}
                barMargin={2}
            />

However if we add the attribute mode="vertical", things get nasty. (I'll paste a glimpse of the error code below since is pretty big).

We dig a little into your BryntumScheduler component looking for the Mode attribute, but seems like its not there, at least in the version:
/**
 * @author Saki
 * @date 2019-06-06 19:54:44
 * @Last Modified by: Saki
 * @Last Modified time: 2019-06-13 17:28:18
 */

-----
There are 2 errors: one nasty one like:
TypeError: Cannot read property 'cells' of undefined
VerticalTimeAxis.refresh
/Users/freddytorres/Development/Sportslogic/Admin/scheduler/build/scheduler.module.js:179
  176 | _0x403b2f=releaseEventActions[action],_0x176325=renderEventActions[action];if(_0x403b2f&&oldConfig){const _0x209313=oldConfig[_0x29e5('0x2e0')]['tplData'],_0x5172c1={'tplData':_0x209313,'assignmentRecord':_0x209313[_0x29e5('0x143f')],'eventRecord':_0x209313[_0x29e5('0x117d')],'resourceRecord':_0x209313[_0x29e5('0x11fe')],'element':element};scheduler[_0x29e5('0x194')]('releaseEvent',_0x5172c1);}if(_0x176325){const _0x2f305a=config['elementData'][_0x29e5('0x14d9')],_0x54e3e3={'tplData':_0x2f305a,'assignmentRecord':_0x2f305a[_0x29e5('0x143f')],'eventRecord':_0x2f305a['eventRecord'],'resourceRecord':_0x2f305a[_0x29e5('0x11fe')],'element':element};element[_0x29e5('0x2e0')][_0x29e5('0x16f')]=element;_0x54e3e3[_0x29e5('0x14ec')]=action===_0x29e5('0x14ed');scheduler['trigger ....
. it continues for looong.

The other error is:
TypeError: Cannot read property 'destroy' of undefined
BryntumScheduler.componentWillUnmount
src/components/scheduler/BryntumScheduler.js:153
  150 | 
  151 | // React component removed, destroy engine
  152 | componentWillUnmount() {
> 153 |     this.schedulerEngine.destroy && this.schedulerEngine.destroy();
  154 | }
  155 | 
  156 | // Component about to be updated, from changing a prop using state. React to it depending on what 
changed and


----

Again, this just happens if we add mode="vertical" to the snippet

Post by joanxtb »

Did you guys had any chance to check what's going on ?

Post by Maxim Gorkovsky »

Hello.
Reproduced, thank you for report. Ticket opened here: https://app.assembla.com/spaces/bryntum/tickets/9120-vertical-scheduler-throws-exception-when-autoheight-is-true/details
To get rid of this issue, please remove autoHeight config from the <BryntumScheduler> element, after that scheduler should build normally.

Post by joanxtb »

Still not working for us. We've removed the autoHeight property from the tag <BryntumScheduler /> as well as from the BryntumScheduler react wrapper in the properties array, (and basically everywhere else we found 'autoHeight'). Still getting the error.

----
TypeError: Cannot read property 'cells' of undefined
VerticalTimeAxis.refresh
/Users/freddytorres/Development/Sportslogic/Admin/scheduler/build/scheduler.module.js:179
  176 | _0x403b2f=releaseEventActions[action],_0x176325=renderEventActions[action];if(_0x403b2f&&oldConfig){const _0x209313=oldConfig[_0x29e5('0x2e0')]['tplData'],_0x5172c1={'tplData':_0x209313,'assignmentRecord':_0x209313[_0x29e5('0x143f')],'eventRecord':_0x209313[_0x29e5('0x

Post by joanxtb »

There are another 6 references to 'autoHeight' at the build/scheduler.module.js file, but that file seems pre-compiled or somethings. It makes so much references to memory addresses-like strings. It would not be wise from us to touch that file.

Post by joanxtb »

Maybe this version of the error helps a little more:
Uncaught TypeError: Cannot read property 'cells' of undefined
    at VerticalTimeAxis.refresh (scheduler.module.js:179)
    at VerticalTimeAxis.render (scheduler.module.js:179)
    at VerticalTimeAxisColumn.renderer (scheduler.module.js:179)
    at Row.renderCell (scheduler.module.js:108)
    at Row.render (scheduler.module.js:107)
    at RowManager.renderFromRow (scheduler.module.js:109)
    at RowManager.renderFromRow (scheduler.module.js:180)
    at RowManager.reinitialize (scheduler.module.js:108)
    at Scheduler.renderRows (scheduler.module.js:157)
    at Scheduler.renderRows (scheduler.module.js:180)
    at Scheduler.onPaint (scheduler.module.js:157)
    at Scheduler.callback (scheduler.module.js:9)
    at Scheduler.trigger (scheduler.module.js:9)
    at Scheduler.triggerPaint (scheduler.module.js:11)
    at Scheduler.render (scheduler.module.js:11)
    at Scheduler.render (scheduler.module.js:157)
    at Scheduler.render (scheduler.module.js:175)
    at ScheduleTooltip.functionChainRunner (scheduler.module.js:23)
    at Scheduler._0x343a42.<computed> [as render] (scheduler.module.js:23)
    at Scheduler.finalizeInit (scheduler.module.js:11)
    at Scheduler.finalizeInit (scheduler.module.js:147)
    at Scheduler.construct (scheduler.module.js:11)
    at Scheduler.construct (scheduler.module.js:175)
    at Scheduler.construct (scheduler.module.js:175)
    at Scheduler.construct (scheduler.module.js:175)
    at Scheduler.construct (scheduler.module.js:175)
    at Scheduler.construct (scheduler.module.js:179)
    at new Base (scheduler.module.js:9)
    at new Localizable (scheduler.module.js:9)
    at new Events (scheduler.module.js:9)
    at new Delayable (scheduler.module.js:9)
    at new Widget (scheduler.module.js:11)
    at new Pluggable (scheduler.module.js:23)
    at new State (scheduler.module.js:23)
    at new GridElementEvents (scheduler.module.js:131)
    at new GridFeatures (scheduler.module.js:131)
    at new GridNavigation (scheduler.module.js:131)
    at new GridResponsive (scheduler.module.js:131)
    at new GridSelection (scheduler.module.js:131)
    at new GridState (scheduler.module.js:131)
    at new GridSubGrids (scheduler.module.js:147)
    at new Grid (scheduler.module.js:147)
    at new TimelineDateMapper (scheduler.module.js:175)
    at new TimelineDomEvents (scheduler.module.js:175)
    at new TimelineEventRendering (scheduler.module.js:175)
    at new TimelineScroll (scheduler.module.js:175)
    at new TimelineViewPresets (scheduler.module.js:175)
    at new TimelineZoomable (scheduler.module.js:175)
    at new TimelineBase (scheduler.module.js:175)
    at new SchedulerDom (scheduler.module.js:175)

Post by Maxim Gorkovsky »

I'm trying with react/javascript/filtering demo from the trial distribution, I pasted slightly modified code snippet from the first post and it worked for me:
<BryntumScheduler
    ref={scheduler}
    mode="vertical"
    autoHeight={false}
    startDate={new Date(2019, 1, 7, 8)}
    endDate={new Date(2019, 1, 7, 18)}
    eventStyle="colored"
    tickSize={80}
    barMargin={2}
    />
Are you using typescript or different config? It would help a lot if you could provide a runnable test case.

Post by joanxtb »

We use Javascript. Where can I send you a runnable test case ( I got one ). Tho is easy to replicate:

1. Create a brand new react app with npx create-react-app test-scheduler
2. Copy and paste the Scheduler/build folder that comes at the Trial distribution in the root folder of the app
3. npm install --save Scheduler/build
4. Copy the BryntumScheduler React wrapper file (BryunthumScheduler.js - also comes in the Trial dist) in the root folder app.
5. Change the App.js file to:
-----

import React from 'react';
import './App.css';
import BryntumScheduler from './BryntumScheduler';
import 'bryntum-scheduler/scheduler.stockholm.css';

function App() {
  const resources = [
    { name: 'The field 1', id: 1 },
    { name: 'The field 2', id: 2 },
  ]
  const columns = {
    columnWidth: 140,
    //headerRenderer : ({ resourceRecord }) => `${resourceRecord.id} - ${resourceRecord.name}`
  }
  return (
    <div className="App">
      <BryntumScheduler
        //ref={scheduler}
        mode="vertical"
        autoHeight={false}
        startDate={new Date(2019, 1, 7, 8)}
        endDate={new Date(2019, 1, 7, 18)}
        eventStyle="colored"
        tickSize={80}
        barMargin={2}
      />
    </div>
  );
}

export default App;

----
6. Run npm start

---

It causes the same issue on our end.

Post by Maxim Gorkovsky »

Where can I send you a runnable test case ( I got one )
You can attach zip to a forum post.

Post by joanxtb »

There it is. Unzip -> npm install -> npm start
Attachments
test-scheduler.zip
(3.42 MiB) Downloaded 133 times

Post Reply