Our pure JavaScript Scheduler component


Post by Mukilan »

hi,

Am getting the the error "Cannot read property 'overAnyHandle' of undefined" when clicking on any event. This happens when I use feature={} in my React scheduler. Below is my config

<BryntumScheduler
ref={scheduler}
id="schedulerComponent"
rowHeight={50}
barMargin={4}
features={{ // This is causing the issue
stripe: true,
group: 'Shift',
sort: 'Name',
resourceTimeRanges: {
store: availability,
},
}}
columns={[
{ text: 'Name', field: 'Name', width: 130 },
{ text: 'Location', field: 'Location', flex: 1 },
{ text: 'Tot PP', field: 'totPP', flex: 1 },
]}
crudManager={{
resourceStore: resources,
eventStore: events,
}}
resources={props.resources}
resourceTimeRanges={props.availableData}
events={props.eventsData}
eventRenderer={eventRender}
viewPreset={{
base: 'hourAndDay',
columnLinesFor: 0,
headers: [
{
unit: 'd',
align: 'center',
dateFormat: 'ddd DD MMM',
},
{
unit: 'h',
align: 'center',
dateFormat: 'HH:mm',
},
],
}}
startDate={new Date(2020, 2, 23, 5)}
endDate={new Date(2020, 2, 23, 17)}
/>

Post by saki »

Features must be set as one-by-one with "Feature" suffix, not as one object. For example:
"stripeFeature" = {true}
This way the wrapper automatically passes data to the corresponding underlying object and also takes care of feature changing at runtime.

Post by mats »

@Mukilan please also always use CODE tags when you post code.

Post by Mukilan »

mats wrote: Thu Apr 02, 2020 10:00 am @Mukilan please also always use CODE tags when you post code.
Goi it thanks

Post by Mukilan »

saki wrote: Thu Apr 02, 2020 9:45 am Features must be set as one-by-one with "Feature" suffix, not as one object. For example:
"stripeFeature" = {true}
This way the wrapper automatically passes data to the corresponding underlying object and also takes care of feature changing at runtime.

Thanks seems to be working, though am getting a new error "Cannot delete property 'resourceTimeRanges' of #<_0x5c9eb4>" when i set
resourceTimeRangesFeature={{
          store: availability,
 }}
this was working when i used
features={{
	resourceTimeRanges: {
		store: availability,
	}
}}

Post by saki »

There is no apparent reason why it shouldn't work. features as an object should be even ignored by the latest Scheduler with a console warning. Try first to download the latest 3.1.1 version and if the problem persists, post please the code we can study/run/debug here locally.

Post by saki »

I've tested resourceTimeRanges with our simple React demo and adding these lines to containers/Main.js shows resource time ranges:
          resourceTimeRangesFeature={true}
          resourceTimeRanges={[
            {
              id: 1,
              resourceId: 'a',
              startDate: '2017-02-07 15:00',
              endDate: '2017-02-07 17:00',
              name: 'Dentist'
            },
            {
              id: 2,
              resourceId: 'c',
              startDate: '2017-02-07 09:00',
              endDate: '2017-02-07 12:30',
              name: 'Parental leave'
            }
          ]}


Post by Mukilan »

saki wrote: Thu Apr 02, 2020 11:37 am I've tested resourceTimeRanges with our simple React demo and adding these lines to containers/Main.js shows resource time ranges:
          resourceTimeRangesFeature={true}
          resourceTimeRanges={[
            {
              id: 1,
              resourceId: 'a',
              startDate: '2017-02-07 15:00',
              endDate: '2017-02-07 17:00',
              name: 'Dentist'
            },
            {
              id: 2,
              resourceId: 'c',
              startDate: '2017-02-07 09:00',
              endDate: '2017-02-07 12:30',
              name: 'Parental leave'
            }
          ]}

Can you try with a store and model defined to the resourceTimeRangesFeature. I tried with 3.1.1 same result.
	resourceTimeRangesFeature={{
		store: resourceTimeRangeStore,
	}}

Post by saki »

The following works for me (tested in simple React Scheduler demo, file containers/Main.js):
                <BryntumScheduler
                    ref={'scheduler'}

                    resourceTimeRangesFeature={{
                        store:resourceTimeRangeStore
                    }}
where resourceTimeRangeStore is created beforehand in render method:
render = () => {
    const resourceTimeRangeStore =
        this.resourceTimeRangeStore ||
        new ResourceTimeRangeStore({
        data: [
            {
            id: 1,
            resourceId: 'a',
            startDate: '2017-02-07 15:00',
            endDate: '2017-02-07 17:00',
            name: 'Dentist'
            },
            {
            id: 2,
            resourceId: 'c',
            startDate: '2017-02-07 09:00',
            endDate: '2017-02-07 12:30',
            name: 'Parental leave'
            }
        ]
        });
    return (
        <Aux>
            <Header
ResourceTimeRangeStore class must be imported, of course:
import { Toast, ResourceTimeRangeStore } from '....';
The result is:
Screen Shot 2020-04-03 at 10.18.08.png
Screen Shot 2020-04-03 at 10.18.08.png (428.92 KiB) Viewed 1489 times

Post Reply