React component: How to set actual timeRanges and provide timeRanges feature configuration?

[TFAlex]

In the example for TimeRanges the feature "timeRanges" and the property "timeRanges" of the scheduler are both configured (https://www.bryntum.com/docs/scheduler/ ... TimeRanges). I now want to do the same in the React scheduler.
I already configured the feature "timeRanges" for the "showCurrentTimeLine" property. But how can I provide an actual timeRanges array to the scheduler? It seems, as if there is a naming clash.

[TFAlex]

FYI: This is my current workaround:

        this.schedulerRef.schedulerEngine.features.timeRanges.store.removeAll();
        this.schedulerRef.schedulerEngine.features.timeRanges.store.add(this.timeRanges);

[TFAlex]

And one question regarding time ranges: In your TimeRanges-Demo the time ranges have custom backgrounds and display labels. How can I achieve that? Couldn't find anything on this in the docs.

Edit: Found the cls property in the TimeSpan. I still don't know how to display the labels

[TFAlex]

Btw.: Would be great if the examples for the new scheduler directly had the code to achieve what is visible there in place, just as it is the case for the ExtJS scheduler.

[pmiklashevich]

Hello Alex,

If CrudManager is specified it adds TimeRanges store to the collection and starts tracking it. It's not obvious, agree. I'll change the docs and describe it. The store config by default is equal to:

            store : {
                modelClass : TimeSpan,
                storeId    : 'timeRanges'
            },

That means if you pass "timeRanges" key to your data.json (server response) the records will be taken from there and features.timeRanges.timeRanges config will be ignored.

{
    "success"  : true,
    "timeRanges"    : {
        "rows": []
    }
}

To have an access to the timeRanges store, you can get it from the crud manager by its ID:

scheduler.crudManager.getStore('timeRanges')

I've created a ticket to provide a public property to the crud manager: https://app.assembla.com/spaces/bryntum/tickets/8069-provide-public-timeranges-property-on-crudmanager/details

The timeRanges config is just an array of local data provided to the store. You can define it like this:

    features : {
        timeRanges : {
            timeRanges : [
                {
                    'name'      : 'Morning coffee',
                    'cls'       : 'coffee',
                    'startDate' : '2019-02-07 08:00',
                    'endDate'   : '2019-02-07 09:00'
                }
            ]
        }
    },

Or you can specify the store and place inline data there:

    features : {
        timeRanges : {
            store : {
                modelClass : TimeSpan,
                storeId    : 'timeRanges',
                data       : [
                    {
                        'name'      : 'Morning coffee',
                        'cls'       : 'coffee',
                        'startDate' : '2019-02-07 08:00',
                        'endDate'   : '2019-02-07 09:00'
                    }
                ]
            }
        }
    },

Since items are instances of TimeSpan class, cls and style fields are available. That's how you can customize your zones.

I hope I covered all issues. If I missed something, please let me know.

Best wishes,
Pavel

P.S.

Btw.: Would be great if the examples for the new scheduler directly had the code to achieve what is visible there in place, just as it is the case for the ExtJS scheduler.

We have a ticket to have a code editor next to all demos with the code needed to create it.

[TFAlex]

That means if you pass "timeRanges" key to your data.json (server response) the records will be taken from there and features.timeRanges.timeRanges config will be ignored.

I don't know how to apply that to our react component. We fetch events and resources separately from our server, and add timeRanges for holidays as requested by the user (can be changed live while viewing the calendar). For now I think I'd stick to my workaround, where I also work directly on the timeRanges store.

The timeRanges config is just an array of local data provided to the store. You can define it like this:

    features : {
        timeRanges : {
            timeRanges : [
                {
                    'name'      : 'Morning coffee',
                    'cls'       : 'coffee',
                    'startDate' : '2019-02-07 08:00',
                    'endDate'   : '2019-02-07 09:00'
                }
            ]
        }
    },

I tried that when using the react component (setting the timeRanges array as property of the timeRanges react component property), but it didn't have any effect.

We have a ticket to have a code editor next to all demos with the code needed to create it.

Sounds great. I'm really looking forward to it, since it will be really helpful

[pmiklashevich]

Hello Alex,

The problem is in name collision. TimeRanges is a feature config from the point of react app view and data config of the feature from the point of scheduler view. Ticket here: https://app.assembla.com/spaces/bryntum/tickets/8160-timeranges-name-collision/details

Btw, in our React Typescript demo type ranges array is specified but doesn't work as well. Ticket here: https://app.assembla.com/spaces/bryntum/tickets/8161-timeranges-doesn--39-t-work-in-react-typescript-demo/details (will be fixed in next nightlies)

The solution here is to specify the store explicitly. For example in our demo (examples/react/typescript/basic/src/App.tsx) need to apply next code:

import {TimeSpan} from 'bryntum-scheduler/scheduler.umd.js';
...
    state = {
        ...
        timeRanges : null
    };
...
                <BryntumScheduler
                    ref={'scheduler'}
                    timeRanges={{
                        store: {
                            modelClass: TimeSpan,
                            storeId: 'timeRanges',
                            data: this.state.timeRanges
                        }
                    }}

The data will be taken from examples/react/typescript/basic/public/data/data.json

Cheers,
Pavel

[TFAlex]

Ah, thanks, this seems to work!

[TFAlex]

I've just seen, that the component isn't updated automatically by changing the value of the timeRanges component property as you described. It only updates, when calling setTimeSpan explicitly on the scheduler. Up to now i had this accidentally called everytime the ranges changed, but now changed it to only be called if the actual timespan to show changes.

So to be clear, if I only change in the timeRanges property the value for "data" in the store object, the scheduler doesn't update. I can see, in the React component, that the feature value for timeRanges is applied on the scheduler engine. So it seems, that changing the store value alone, doesn't trigger a re-rendering. Is this a bug or something I misunderstood?
If necessary, I can provide some example code.

[pmiklashevich]

Hello Alex,

Sorry for the delay. Is this problem still actual for you? What version do you use?

I've just tried within our online demo.

scheduler.timeRanges = [{startDate : new Date(2019, 1, 7, 11), endDate: new Date(2019, 1, 7, 12), name : 'test'}]

Снимок экрана 2019-05-20 в 10.39.24.png (144.6 KiB) Viewed 2379 times

As you can see scheduler is updated and there is only one zone called "test".

scheduler.features.timeRanges.store.data = [{startDate : new Date(2019, 1, 7, 12), endDate: new Date(2019, 1, 7, 13), name : 'test2'}]

Снимок экрана 2019-05-20 в 10.47.46.png (102.38 KiB) Viewed 2379 times

Same here, when you set to the store.data the scheduler is updated as well.

It sounds like an issue in the React wrapper. Could you please provide a small runnable testcase, which shows the issue?

Best regards,
Pavel