[ANGULAR] how to change eventstyle after event modifiction by drag or event window

[plus]

When I load my data I use rounded eventstyle. Wht I wish to do is to change eventstyle after modification
What is the right way o obtain this result? I tried to change style in evenstore events, I do this because I have to change a filed in my table (modified true/false)

eventStore.on('change', (event) => {
      if ((event.action = 'update')) {
          event.record.eventStyle = 'plain';

This doesn'have any effect on scheduler

Maybe, I have to use beforeEventDropFinalize?
In beforeEventDropFinalize I tried to use repaintEventsForResource ma doesn'twork
The strange thing is that when I call repaintEventsForResource eventStyle is 'plain' (as i want)

I suppose that I have to use eventrender but this event is raised only when I load my data for the first time not when I change a data

Do you have any suggest?

[pmiklashevich]

You can extend the EventModel and implement getter and setter for the eventStyle field. Please try it in the Basic demo (non-angular demo, but the same is true for angular):

Scheduler/examples/basic/app.js

import EventModel from '../../lib/Scheduler/model/EventModel.js';

class StyledEventModel extends EventModel {
    static get $name() {
        return 'StyledEventModel';
    }

get eventStyle() {
    return super.eventStyle || (this.isModified ? 'line' : 'rounded');
}

set eventStyle(style) {
    super.eventStyle = style;
}
}

.....
const scheduler = new Scheduler({
    appendTo         : 'container',
    minHeight        : '20em',
    resources        : resources,
    //events           : events,
    eventStore       : {
        modelClass : StyledEventModel,
        data : events
    },

Cheers!

[plus]

I tried your code but I have this error (view attachment)

(property) StyledEventModel.eventStyle: string
'eventStyle' is defined as a property in class 'EventModel', but is overridden here in 'StyledEventModel' as an accessor.ts(2611)

[plus]

this is EventiModel class

 export class EventModel extends TimeSpan implements RecurringTimeSpan, EventModelMixin {        

        allDay: boolean;
        assignments: AssignmentModel[];
        draggable: boolean;
        eventColor: string;
        eventStyle: string;

eventStyl in the lat row

[pmiklashevich]

What angular/typescript version are you using? I don't see this error in our Angular Basic demo. But the error message looks correct. Since you know that you override a field which is declared as a property on the EventModel, you can try to suppress the error.

[plus]

What angular/typescript version are you using?

Angular: 10.1.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1001.7
@angular-devkit/build-angular 0.1001.7
@angular-devkit/core 10.1.7
@angular-devkit/schematics 10.1.7
@angular/cli 10.1.7
@schematics/angular 10.1.7
@schematics/update 0.1001.7
rxjs 6.6.3
typescript 4.0.5

you can try to suppress the error

I don't know how to suppress the error... Can you please explain to me?
thanks

[pmiklashevich]

It seems the error you see introduced in typescript v4:
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#properties-overriding-accessors-and-vice-versa-is-an-error

You can use @ts-ignore or @ts-expect-error to suppress the error
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error

class StyledEventModel extends EventModel {
  static get $name(): string {
    return 'StyledEventModel';
  }

  // @ts-ignore
  get eventStyle(): string {
    return this.isModified ? 'line' : 'rounded';
  }
}

We will investigate how we can improve typings to prevent similar errors in the future.

[plus]

Thank for your reply, I used // @ts-nocheck and this solved
Now works, but there si another small problem..
I can see eventstyle change only if I move the bottom scroolbar.

• initial situation (01.png)
• I move an event and I want change eventstyle and use stack position but doesn't change (02.png)
• I move the scroolbar in the bottom and everything is as I want (03.png)

The sideeffect is that this resolve another problem I wrote in another post (When I drag event abobe another I wish stack but this doesn't work if I handle beforeEventDropFinalize)

[pmiklashevich]

Please try to use another approach. Instead of overriding the EventModel property, please define eventRenderer function and set the eventStyle there:

const scheduler = new Scheduler({
    eventRenderer({ eventRecord, renderData }) {
        renderData.eventStyle = eventRecord.isModified ? 'line' : 'rounded';
        return eventRecord.name;
    },

Does this solve the issue?

[plus]

This work in the same way. I prefere this solution but also in this case, I see the right result only after click on scroolbar
How can I force or call a render action?