[ANSWERED] Recurring timeranges.

[mtubisz]

Hello !

I've got few questions about timeranges in REACT. I really appreciate your help.

1. Is it possible to add recurring timeranges to my scheduler in REACT ? e.g. timerange that is from 10:00 to 12:00 every day or every weekend ? I couldn't find information or examples about it.

2. If answer for 1st question is yes, is it possible to add exception dates for recurring timeranges ?

3. Every timerange's name covers my timeaxis and in this way hides time information. Is there a way to leave timeaxis and just color content of scheduler when I add timerange ?

Thanks in advance !

[arcady]

Long story short you need to make a new model & store supporting recurrence and add recruring time spans feature to the Scheduler.

And regarding disabling header part of time ranges there is a special config https://www.bryntum.com/docs/scheduler/#Scheduler/feature/TimeRanges#config-showHeaderElements
(yet make sure you don't have https://www.bryntum.com/docs/scheduler/#Scheduler/feature/TimeRanges#config-enableResizing set to true ..it automatically enables showHeaderElements).

Here is the code demonstrating above topics:

// Here we make a new Model extending TimeSpan class with RecurringTimeSpan mixin (which adds support of recurrence to a model)
class MyTimeRange extends RecurringTimeSpan(TimeSpan) {};

// Here we make a new store class extending Store with RecurringTimeSpansMixin mixin (that adds recurrence support to a store).
// That class will use our new MyTimeRange model.
// This store will contain time ranges.
class MyStore extends RecurringTimeSpansMixin(Store) {

    static get defaultConfig() {
        return {
            modelClass : MyTimeRange,
            storeId    : 'timeRanges'
        };
    }

    construct(config) {
        super.construct(config, true);
        // setup recurrence support
        this.setupRecurringTimeSpans();
    }
};

// instantiate store for time ranges using our new classes
const timeRangesStore = new MyStore();

scheduler = new Scheduler({
    ...
    features : {
        // add recurringTimeSpans feature processing timeRangesStore store
        recurringTimeSpans : {
            store : timeRangesStore
        },
        timeRanges : {
            // tell timeRanges feature to use the store we made
            store : timeRangesStore,
            showHeaderElements : false
        }
    },
....

[arcady]

Regarding exception dates - yes they are supported. There is a field on the model class https://www.bryntum.com/docs/scheduler/#Scheduler/model/mixin/RecurringTimeSpan#field-exceptionDates and https://www.bryntum.com/docs/scheduler/#Scheduler/model/mixin/RecurringTimeSpan#function-addExceptionDate method to add exceptions dynamically.

recurringTimeRange.addExceptionDate(new Date())

[mtubisz]

Thanks arcady for you answer.

Now, I'm trying to do this in this way for few hours but it still doesn't work. Can you provide this funcionality in example in React ? (I was looking for it in your react examples but i haven't found it) That would be helpful.

There is no information about config: "recurringTimeSpansFeature". And I'm not sure if this config is supported in React scheduler component. In my scheduler component file BryntumScheduler.js in features array there is no element with "recurring" phrase. I use 3.0.1 scheduler.

There is also no information how should I add array of recurrenced timeranges and how to set it dynamically ? And how to set frequency of timerange ? I tried to use "recurrenceRule: "FREQ=WEEKLY" that I found but it still doesn't work.

p.s. Is there any way to for some timeranges enable showHeaderElements and for some not ? Or do I have to choose between all timeranges with disabled header part of time ranges and all timeranges with this part on timeaxis?

Thanks in advance for you help

[mtubisz]

Hi !

Any updates for this topic ?
Would be great to see an example of this functionality.

Thanks !

[mats]

We're uploading a demo now, check here in an hour: https://bryntum.com/examples/scheduler/recurringtimeranges

[mtubisz]

I appreciate that you uploaded a demo. It was a good choice that I bought scheduler from you . I need to say that your support is very good.

Still I have a problem in REACT. That's my code.

import { RecurringTimeSpan, RecurringTimeSpansMixin, Store, TimeSpan } from 'bryntum-scheduler'

class MyTimeRange extends RecurringTimeSpan(TimeSpan) {};
class MyTimeRangeStore extends RecurringTimeSpansMixin(Store) {

    static get defaultConfig() {
        return {
            modelClass : MyTimeRange,
            storeId    : 'timeRanges'
        };
    }

    construct(config) {
        super.construct(config, true);
        this.setupRecurringTimeSpans();
    }
};

const timeRangeStore = new MyTimeRangeStore();


class MyComp extends Component {
...
<BryntumScheduler
		... 
              timeRanges = {[{
       		id: 1,
        	name: "Friday, yay",
       		recurrenceRule: "FREQ=WEEKLY;BYDAY=MO;",
        	startDate: "2020-02-10 00:00",
        	endDate: "2020-02-10 10:00"}
     	 	]}
              recurringTimeSpansFeature = {{
                store : timeRangeStore
              }}
              timeRangesFeature= {{
                store:                timeRangeStore,
                enableResizing      : true,
                showCurrentTimeLine : true,
                showHeaderElements  : false
              }}
/>

}

I guess that it's something wrong with config "reccuringTimeSpansFeature". Is it a other name for this config in BryntumScheduler React Component ? Can't find any information for React.

[saki]

The feature is not yet among the listed features in examples/react/_shared/src/lib/BryntumScheduler.js.

It should be enough to add it to features array. Then you need to re-build shared and your app and it should work.

We will add it to the wrapper shortly.

[saki]

FYI: The wrappers have been updated so you can download the next nightly build or wait for the next release.

[mtubisz]

Thank you for this information !

It works now