Our powerful JS Calendar component


Post by longevo-florian »

Hi,

I replaced the default editor with a custom one just as described in the docs. However, after opening an NgDialog for our own editor and returning false in the function, the default editor still shows up for a split second.

Is this a bug or can I do something to remove that behaviour?

Below you can see some screenshots of the code and the problem I mentioned.

Screenshot 2021-10-28 at 17.47.15.png
Screenshot 2021-10-28 at 17.47.15.png (136.09 KiB) Viewed 1127 times
Screenshot 2021-10-28 at 17.49.45.png
Screenshot 2021-10-28 at 17.49.45.png (324.43 KiB) Viewed 1127 times
bug.mov
(3.04 MiB) Downloaded 67 times

As you can see in the video, the default editor pops open for just a second and then disappears again. Could you maybe help me with that?


Post by Animal »

Disable the eventEdit feature using configuration:

features : {
    eventEdit : false
}

Post by longevo-florian »

When I disable the feature completely as you mentioned above, the onBeforeEventEdit event is not emitted anymore, and so I cannot show our custom editor.

Is there any way to keep the custom editor, and stop the default editor from appearing?


Post by mats »

Try listening for beforeEventEdit and return false to stop our default editor from showing.


Post by longevo-florian »

That is what I have been doing already if you see the above screenshots. The default editor still shows up for a split second before then disappearing even though I am returning false.


Post by mats »

Ok, sounds very strange. Could you please upload a small test case where this is reproducible (I could not reproduce) so we can debug it?


Post by longevo-florian »

I have prepared a quick example where you can see the problem I mentioned:

custom-editor-sample.zip
(458.7 KiB) Downloaded 73 times

Thanks for your help!


Post by saki »

It is a bug; the ticket is here: https://github.com/bryntum/support/issues/3641

You can workaround it by using:
app.component.ts:

export class AppComponent {
  title = 'custom-editor-sample';

  constructor(public dialog: MatDialog) {}

  listeners = {
    beforeEventEdit() {
      // show your custom dialog here.
      return false;
    }
  }

and app.component.html:

<bryntum-calendar
    [listeners] = "listeners"
>
</bryntum-calendar>

Do not use onBeforeXxxxx that prevents an event before the bug is fixed.


Post by longevo-florian »

Hi,

thanks for looking into it! Sadly, your workaround does not work for me, as I am calling this.dialog.open() using a Material Dialog. When I try to put that logic into the object assignment or the constructor of the component like you show above, I get an error saying it cannot read open() of undefined.

I am guessing the object wrapping messes with the context of the this keyword?


Post by saki »

Yes, you're right this points to nowhere or a wrong place. The solution would be to install the listener during initialization. In your case it would boil down into this app.component.ts:

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { CustomEditorComponent } from './custom-editor/custom-editor.component';
import { Calendar } from '@bryntum/calendar/calendar.lite.umd.js';
import { BryntumCalendarComponent} from '@bryntum/calendar-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
  title = 'custom-editor-sample';
  private calendar!: Calendar;

  @ViewChild('calendar') calendarComponent!: BryntumCalendarComponent

  constructor(public dialog: MatDialog) {}

  ngAfterViewInit() : void {
    this.calendar = this.calendarComponent.instance;
    this.calendar.on({
      beforeEventEdit() {
        const dialogRef = this.dialog.open(CustomEditorComponent, {
          width: '250px',
        });

        dialogRef.afterClosed().subscribe(result => {
          console.log(result)
        });

        // prevent default editor
        return false;
      },
      thisObj: this
    })
  }
}

and the following app.component.html:

<bryntum-calendar
    #calendar>
</bryntum-calendar>

Post Reply