Our pure JavaScript Scheduler component

Post by 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?

Post by 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):


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


Pavel Miklashevich - Core Developer

Post by 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)

errore.png (30.68 KiB) Viewed 153 times

Post by 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

Post by 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.

Pavel Miklashevich - Core Developer

Post by 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?

Post by pmiklashevich »

It seems the error you see introduced in typescript v4:

You can use @ts-ignore or @ts-expect-error to suppress the 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.

Pavel Miklashevich - Core Developer

Post by 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)

03.png (89.27 KiB) Viewed 132 times
02.png (71.59 KiB) Viewed 132 times
01.png (38.51 KiB) Viewed 132 times

Post by 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?

Pavel Miklashevich - Core Developer

Post by 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?

Post Reply