Our pure JavaScript Scheduler component


Post by tomerPlanit »

Hi,
We use scheduler 4.1.0v and angular 11.
After upgrade to scheduler 4.1.0 I can't add recurring time ranges.

My Recurring time range class:

import {
    RecurringTimeSpan,
    TimeSpan,
    RecurringTimeSpansMixin,
    Store
} from '@bryntum/scheduler/scheduler.lite.umd.js';

// Define a new Model extending TimeSpan class
// with RecurringTimeSpan mixin which adds recurrence support
// @ts-ignore
export class RecurringTimeRange extends RecurringTimeSpan(TimeSpan) { }

// Define a new store extending the Store class
// with RecurringTimeSpansMixin mixin to add recurrence support to the store.
// This store will contain time ranges.
// @ts-ignore
export class RecurringTimeRangeStore extends RecurringTimeSpansMixin(Store) {
    static get defaultConfig() {
        return {
            // use our new MyTimeRange model
            modelClass: RecurringTimeRange,
            storeId: 'timeRanges'
        };
    }
}

I saw that you add after the upgrade input to the scheduler "timeRangeStore", so in the schedulerConfig I add property of timeRangesStore like this:

timeRangesStore: new RecurringTimeRangeStore(),

and set it in scheduler's input:

[timeRangeStore] = "schedulerConfig.timeRangesStore"

Then I create some recurring time range like this:

{
        "startDate": "2018-02-07 11:00",
        "durationUnit": "d",
        "duration": 1,
        "recurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
        "cls": "striped"
      }

After all I did I see only one time range.

What I am doing wrong?
If it not the write way, what is the way?

I add example based on angular 8 example of 4.1.0v

Attachments
angular-8.rar
(951.65 KiB) Downloaded 60 times

Post by alex.l »

I was able to reproduce the problem, here is a ticket: https://github.com/bryntum/support/issues/2644

As a workaround please use the config of project -
https://bryntum.com/docs/scheduler/#Scheduler/model/mixin/ProjectModelMixin#config-timeRangeStore instead.

Please change in app.component.html the line:

[timeRangesStore] = schedulerConfig.timeRangesStore"
// to this:
[project] = schedulerConfig.project"

And in the app.config.ts this:

timeRangesStore: new RecurringTimeRangeStore(),
// to this:
project : {
    timeRangeStore: new RecurringTimeRangeStore()
},

All the best,
Alex


Post by tomerPlanit »

Hi,
I move my code use project like you told me and move all my stores inside like this:

project: {
        eventStore: {
            modelClass: EventModel,
        },
        resourceStore: {
            modelClass: ResourceModel
        },
        resourceTimeRangeStore: {
            modelClass: ResourceTimeRangeModel
        },
        dependencyStore: {
            modelClass: DependencyModel
        },
        // Instantiate store for time ranges using our new classes
        timeRangeStore: new RecurringTimeRangeStore(),
    }

and insert the project like this:

[project] ="schedulerConfig.project"

and get this error on resource time range store:

zone.js:852 Uncaught Error: Uncaught (in promise): TypeError: store.add is not a function
TypeError: store.add is not a function
    at ResourceTimeRanges.attachToProject (scheduler.lite.umd.js:173849)
    at ResourceTimeRanges._callee$ (scheduler.lite.umd.js:157069)
    at tryCatch (scheduler.lite.umd.js:213291)
    at Generator.invoke [as _invoke] (scheduler.lite.umd.js:213521)
    at Generator.next (scheduler.lite.umd.js:213346)
    at asyncGeneratorStep (scheduler.lite.umd.js:211965)
    at _next (scheduler.lite.umd.js:211987)
    at scheduler.lite.umd.js:211994
    at new ZoneAwarePromise (zone.js:931)
    at ResourceTimeRanges.<anonymous> (scheduler.lite.umd.js:211983)
    at resolvePromise (zone.js:852)
    at zone.js:762
    at asyncGeneratorStep (scheduler.lite.umd.js:211968)
    at _next (scheduler.lite.umd.js:211987)
    at scheduler.lite.umd.js:211994
    at new ZoneAwarePromise (zone.js:931)
    at ResourceTimeRanges.<anonymous> (scheduler.lite.umd.js:211983)
    at ResourceTimeRanges.afterConstruct (scheduler.lite.umd.js:157086)
    at new Base (scheduler.lite.umd.js:9159)
    at ResourceTimeRanges._createSuperInternal (scheduler.lite.umd.js:56625)

This is code example based on basic angular example on scheduler 4.1.0v

Attachments
basic.rar
(516.17 KiB) Downloaded 66 times

Post by alex.l »

I see an error, here is a ticket: https://github.com/bryntum/support/issues/2655
Thank you for the report!
As a workaround, try to pass an instance:

        resourceTimeRangeStore: new ResourceTimeRangeStore({
            modelClass: ResourceTimeRangeModel
        }),

And import it from the package:

import { ResourceTimeRangeStore } from '@bryntum/scheduler/scheduler.lite.umd.js';

All the best,
Alex

All the best,
Alex


Post Reply