[ANGULAR] Adding custom Data to a Calendar Event

[longevo-florian]

Hi,

I have been customizing the EventEditor, extending it with separate fields for client and employee selection:

custom_event_edit.png (104.65 KiB) Viewed 1314 times

I can't seem to figure out how to get the custom data however, as it is not added to the data returned by the 'beforeeventsave' event.

I am reacting to the Event using the onCatchAll property of the component. The configuration is as follows:

calendar_component_setup.png (110.39 KiB) Viewed 1314 times

And the event handler method looks like this:

event_handler.png (104.84 KiB) Viewed 1314 times

Could you please help me and let me know if and how I can add my custom event data to this object, so that I can make a backend request containing the entered calendar data?

[saki]

Have you extended the EventModel to add client and employee fields? Something like:

import { EventModel, EventModelConfig } from '@bryntum/scheduler/scheduler.lite.umd.js';

type AppEventModelConfig = EventModelConfig & {
    client: string;
    employee: string;
}

export default class AppEventModel extends EventModel {

    static get $name(): string {
        return 'AppEventModel';
    }

    static get fields() : object[] {
        return [
            { name : 'client' },
            { name : 'employee' }        ];
    }

    public client: string
    public employee: string

    constructor(config: Partial<AppEventModelConfig>) {
        super(config);
    }
}

and then:

    eventStore = {
        modelClass : AppEventModel
    }

See the https://bryntum.com/examples/scheduler/frameworks/angular/filtering/dist/filtering/ for the complete code.

[longevo-florian]

Thanks, I got it working using your example and response!

[shangsu]

Hi Bryntum Team,

I implemented the AppEventModel as you wrote in above example with Bryntum Scheduler and add it in eventStore (same as above). Now I want to prepare one array of events like following:

let events: AppEventModel[] = [];

Then I want to push some data in this events:

events.push(new AppEventModel({
          id: eventsId,
          resourceId: resourcesId,
          startDate: startDate,
          endDate: endDate,
          client: client
        }));

Then the events will not be displayed in Scheduler, is my way to push data in events array wrong? If I initialise events and push data like following:

let events: any[] = [];
 events.push({
          id: eventsId,
          resourceId: resourcesId,
          startDate: startDate,
          endDate: endDate,
          client: client
        });
 

The events will then be displayed successful in Scheduler. But I want to avoid this any in my project. Could please help me with the right way to push data into events array?

Thanks and best regard,
Shangsu

[alex.l]

Hi Shangsu,

Are we taking about Scheduler or SchedulerPro?

That might be because you created instance of the event model before you put it into EventStore and used resourceId notation for assignment. EventModel can't find any valid resource with id provided and clear that value. You can check it with events[index].resourceId
Try to fill in https://bryntum.com/products/scheduler/docs/api/Scheduler/data/AssignmentStore with data instead of using resourceId.
https://bryntum.com/products/scheduler/docs/api/Scheduler/model/AssignmentModel
https://bryntum.com/products/scheduler/docs/api/Scheduler/view/Scheduler#config-assignments
https://bryntum.com/products/scheduler/docs/api/Scheduler/view/Scheduler#config-assignmentStore

If it won't help, please attach runnable app with data for debugging on our side, we will check what's wrong, that might be some bug as well.

[shangsu]

Hi Alex,

Yes, you are right.

events[index].resourceId = undefined

. Do you have example for using AssignmentStore?

Thanks,
Shangsu

[alex.l]

Hi Shangsu,

Since we do not have a runnable code and full picture about your application (framework, version), I can only give you a theory based on similar problems in past.
In case of using resourceId notation, under the hood, SchedulerPro (and Scheduler) is trying to resolve resource ID you passed, find resource in ResourceStore and create a record in AssignmentStore https://bryntum.com/products/schedulerpro/docs/api/Scheduler/model/AssignmentModel

{
     id : 1,
     resourceId : 'r1',
     eventId : 'ev1'
}

In your case, you created EventModel instance before you put in into EventStore, so resourceId cannot be resolved - there is no access to ResourceStore data. It will be cleaned as invalid.
In this scenario you need to pass simple data into the store instead of model instance to allow Scheduler resolve resourceId while creating a record, or take care of AssignmentStore data by yourself and fill it in with assignment records https://bryntum.com/products/schedulerpro/docs/api/Scheduler/model/AssignmentModel

assignments: [{
     id : 1,
     resourceId : 'r1',
     eventId : 'ev1'
}, {
     id : 2,
     resourceId : 'r1',
     eventId : 'ev2'
}, {
     id : 3,
     resourceId : 'r2',
     eventId : 'ev3'
}]

Examples of work with AssignmentStore you can find in /examples folder of sources you downloaded, as example in demos:
/bigdataset
/conflicts
/constraints
/dependencies

and others.
I don't know if you use framework and which one. Framework based demos are placed in /examples/frameworks/
For Angular you can check
/angular11
/conflicts
/inline-data
and others

For React check demos in examples/frameworks/react folder
For Vue in examples/frameworks/vue folder

[shangsu]

Thanks for your detailed explanation. I understand now why resourceId is null. I will try with assignments.

[marcio]

Hey shangsu,

Let us know if using assignments worked for you!

[shangsu]

Assignments works! Many thanks!