[ANGULAR] RecurringTimeSpan is not callable

[infoalloyit]

Hi,
I added "timeRanges" to color the cells gray (00:00 to 08:00 in the morning, and 18:00 to 23:59 in the evening):

timeRanges: {
    rows: [
      {
        startDate: "2020-08-07 00:00",
        endDate: "2020-08-07 08:00",
      },
      {
        startDate: "2020-08-07 18:00",
        endDate: "2020-08-07 23:59",
      },
    ],
  },

and it works.

This is the html code:

 <bry-scheduler #scheduler [barMargin]="schedulerConfig.barMargin"
                            [rowHeight]="schedulerConfig.rowHeight" [minHeight]="schedulerConfig.minHeight"
                            [eventStyle]="schedulerConfig.eventStyle" [startDate]="schedulerStartDate"
                            [endDate]="schedulerEndDate" [columns]="schedulerConfig.columns" [loadMask]="maskMessage"
                            [eventEditFeature]="schedulerConfig.eventEditFeature"
                            [recurringTimeSpansFeature]="recurringTimeSpans"
                            [timeRanges]="schedulerConfig.timeRanges.rows" [timeRangesFeature]="true"
                            [contextMenuFeature]="schedulerConfig.features.contextMenu" [treeFeature]="true"
                            [events]="events" [resources]="resources" [eventRenderer]="eventRenderer">
              </bry-scheduler>

Now I need to gray out the time range for all calendar days and I found this example https://bryntum.com/examples/scheduler/recurringtimeranges/.

If I add the following lines

class MyTimeRange extends RecurringTimeSpan(TimeSpan) {}; 

class MyTimeRangeStore extends RecurringTimeSpansMixin(Store) { ...... }

with this import

import { RecurringTimeSpan, RecurringTimeSpansMixin } from 'bryntum-scheduler/scheduler.umd.js';

I get the following errors:

RecurringTimeSpan(TimeSpan) --> Value of type 'typeof RecurringTimeSpan' is not callable. Did you mean to include 'new'?ts(2348)

RecurringTimeSpansMixin(Store) --> Value of type 'typeof RecurringTimeSpansMixin' is not callable. Did you mean to include 'new'?ts(2348)

How can I solve it?

[Maxim Gorkovsky]

Hello.
Reproduced. As a workaround I can recommend to use **//@ts-ignore ** on troubled statements. E.g. this snippet works for me:

//@ts-ignore
class MyTimeRange extends RecurringTimeSpan(TimeSpan) {}

//@ts-ignore
class MyTimeRangeStore extends RecurringTimeSpansMixin(Store) {

    static get defaultConfig() {
        return {
            // use our new MyTimeRange model
            modelClass : MyTimeRange,
            storeId    : 'timeRanges'
        };
    }

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

I opened a ticket to improve this behavior: https://github.com/bryntum/support/issues/1308

[infoalloyit]

Hi Maxim,
the calendar is lazy-loaded in a feature module. If I use your code, I get no Typescript error but I get the following error in console when I go to the feature module (calendar-wrapper):

The structure is this:
other module...
AdminModule --> CalendarWrapperModule --> home.component.html ------- > here I use bryntum and here I extend the classes RecurringTimeSpan and RecurringTimeSpansMixin

[Maxim Gorkovsky]

I don't really see how is this issue is related to our code base. It looks like a problem in your application code. Does it work if you comment out everything related to recurringTimeSpans feature?

[infoalloyit]

If I remove

[recurringTimeSpansFeature]="schedulerConfig.recurringTimeSpans"

from <bry-scheduler></bry-scheduler> the problem still persists.

But if I set a timeout, it works:

setTimeout(() => {
  //@ts-ignore
  class MyTimeRange extends RecurringTimeSpan(TimeSpan) { }

  //@ts-ignore
  class MyTimeRangeStore extends RecurringTimeSpansMixin(Store) {
    static get defaultConfig() {
      return {
        modelClass: MyTimeRange,
        storeId: "timeRanges",
      };
    }

construct(config) {
  super.construct(config, true);
  //@ts-ignore
  this.setupRecurringTimeSpans();
}
  }
}, 2000);

@Component({
  selector: 'app-calendar-home',
  templateUrl: './calendar-home.component.html',
  styleUrls: ['./calendar-home.component.scss']
}) 
export class CalendarHomeComponent .......
.....

but it was just for try, because then in CalendarHomeComponent it cannot find name "MyTimeRangeStore"

[Maxim Gorkovsky]

I couldn't reproduce this on a local demo. Please provide a runnable test case and we will inspect it.

[infoalloyit]

It doesn't matter. I'll wait for the main fix.

Thanks for the support anyway!

[Maxim Gorkovsky]

I would expect that to work identically to what you see now with //@ts-ignore. So likely you will have same problem. I recommend to figure out a runnable test case. You can try modifying one of our demos.

[infoalloyit]

Hi, I found a solution and I share it for anyone who has the same problem.
The problem was not in Bryntum, but in Angular. In fact, the preloadingStrategy was set to PreloadAllModules. Removing it, and entering the calendar module, the error I received in the console was much clearer:

Error: Bundle included twice, check cache-busters and file types (.js)

And I find the reason in doc:

Mind please that you cannot import both normal and UMD version of the Scheduler package in one application. The error Bundle included twice means that both UMD and normal version is imported. In that case revise all your imports and make sure that only one version is used.