Our powerful JS Calendar component


Post by SHQK »

Hi Bryntum team,
I want show popup confirm whenever click button delete in event edit form,
So I used MessageDialog, but I have a bug with this

        calendar.onBeforeEventDelete = () => {
            MessageDialog.confirm({
                title: 'Dialog Title',
                message : 'Are you sure to Delete?'
            }).then(result => {
                if (result === MessageDialog.yesButton) {
                    // The YES button was clicked, so go ahead!
                }
        }

How can I fix this bug?

Attachments
deletefull.PNG
deletefull.PNG (15.38 KiB) Viewed 1243 times

Post by sergey.maltsev »

Hi!

Probably you have not imported MessageDialog in your code.

Try this in our filtering demo (can be found in examples/frameworks/angular/filtering)

Open src/app/app.component.ts

Add MessageDialog to imports

import { Calendar, EventModel, EventStore, MessageDialog } from '@bryntum/calendar/calendar.lite.umd.js';

Find ngAfterViewInit() method and replace with this code:

ngAfterViewInit(): void {
    this.calendar = this.calendarComponent.instance;
    this.eventStore = this.calendar.eventStore;

    this.calendar.on({
        beforeEventDelete({ eventRecords, context }) {
            // Show custom confirmation dialog (pseudo code)
            MessageDialog.confirm({
                title   : 'Dialog Title',
                message : 'Are you sure to Delete?'
            }).then(result => {

                if (result === MessageDialog.yesButton) {
                    // The YES button was clicked, so go ahead!
                    context.finalize(true);
                }
                else {
                    context.finalize(false);
                }
            });

            // Prevent default behaviour
            return false;
        }
    });
}

Here's the docs you can use
https://www.bryntum.com/docs/calendar/#Calendar/mixin/CalendarStores#event-beforeEventDelete


Post by SHQK »

I already add MessageDialog to imports

import { Calendar, Combo, EventEdit, EventEditConfig, EventStore, MessageDialog, ResourceStore } from '@bryntum/calendar/calendar.lite.umd.js';

But I have some problem with asynchronous data so I must to define calendar in @ViewChild

    @ViewChild(BryntumCalendarComponent) set content(content: BryntumCalendarComponent) {
        if (content) { 
            this.calendar = content.instance
            this.eventStore = this.calendar.eventStore;
            this.bindEventListeners(this.calendar);
        }
    }
    calendarComponent: BryntumCalendarComponent;
    private calendar: Calendar;
    private eventStore: EventStore;

And I biding event like this

    bindEventListeners(calendar: Calendar) {
        calendar.onBeforeEventDelete = 
            ({ eventRecords, context }) => {
                // Show custom confirmation dialog (pseudo code)
                MessageDialog.confirm({
                    title   : 'Dialog Title',
                    message : 'Are you sure to Delete?'
                }).then(result => {
    
if (result === MessageDialog.yesButton) { // The YES button was clicked, so go ahead! context.finalize(true); } else { context.finalize(false); } }); // Prevent default behaviour return false; } }

where am I wrong?
Can you please help me fix this bug follow my source code?


Post by SHQK »

sergey.maltsev wrote: Tue Jun 01, 2021 9:39 am

Hi!

Probably you have not imported MessageDialog in your code.

Try this in our filtering demo (can be found in examples/frameworks/angular/filtering)

Open src/app/app.component.ts

Add MessageDialog to imports

import { Calendar, EventModel, EventStore, MessageDialog } from '@bryntum/calendar/calendar.lite.umd.js';

Find ngAfterViewInit() method and replace with this code:

ngAfterViewInit(): void {
    this.calendar = this.calendarComponent.instance;
    this.eventStore = this.calendar.eventStore;

    this.calendar.on({
        beforeEventDelete({ eventRecords, context }) {
            // Show custom confirmation dialog (pseudo code)
            MessageDialog.confirm({
                title   : 'Dialog Title',
                message : 'Are you sure to Delete?'
            }).then(result => {

                if (result === MessageDialog.yesButton) {
                    // The YES button was clicked, so go ahead!
                    context.finalize(true);
                }
                else {
                    context.finalize(false);
                }
            });

            // Prevent default behaviour
            return false;
        }
    });
}

Here's the docs you can use
https://www.bryntum.com/docs/calendar/#Calendar/mixin/CalendarStores#event-beforeEventDelete

Hi, I download your filtering demo and trying follow your guide
But It's still not working

Attachments
messageDialog.PNG
messageDialog.PNG (28.2 KiB) Viewed 1216 times

Post by sergey.maltsev »

Hi!

Please check if you have imported MessageDialog to the imports as shown above.
If doesn't help attach app source code here so we could check.


Post by SHQK »

sergey.maltsev wrote: Wed Jun 02, 2021 11:53 am

Hi!

Please check if you have imported MessageDialog to the imports as shown above.
If doesn't help attach app source code here so we could check.

I'm using trial version 4.1.2
Did my version support MessageDialog ?
Because I don't see any function or property here

Attachments
aaaaaaaa.JPG
aaaaaaaa.JPG (13.07 KiB) Viewed 1211 times

Post by pmiklashevich »

Maybe there was a problem with typings in 4.1.2. Please download the latest trial and try again. In 4.1.4 there are typings to describe "confirm".

Снимок экрана 2021-06-02 в 14.13.40.png
Снимок экрана 2021-06-02 в 14.13.40.png (88.96 KiB) Viewed 1209 times

You can modify Calendar/examples/frameworks/angular/filtering/src/app/app.component.ts to check how it works:

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { BryntumCalendarComponent } from '@bryntum/calendar-angular';
import { Calendar, EventModel, EventStore, MessageDialog } from '@bryntum/calendar/calendar.lite.umd.js';
import { calendarConfig } from './app.config';

@Component({
    selector    : 'app-root',
    templateUrl : './app.component.html'
})
export class AppComponent implements AfterViewInit {
    @ViewChild(BryntumCalendarComponent) set content(content: BryntumCalendarComponent) {
        if (content) {
            this.calendar = content.instance;
            this.eventStore = this.calendar.eventStore;
            this.bindEventListeners(this.calendar);
        }
    }

calendarComponent: BryntumCalendarComponent;
private calendar: Calendar;
private eventStore: EventStore;

// calendar configuration
calendarConfig = calendarConfig;

filterTriggers = {
    filter : {
        align : 'start',
        cls   : 'b-fa b-fa-filter'
    }
};

highlightTriggers = {
    filter : {
        align : 'start',
        cls   : 'b-fa b-fa-highlighter'
    }
};

bindEventListeners(calendar: Calendar): void {
    calendar.onBeforeEventDelete = ({ eventRecords, context }) => {
        // Show custom confirmation dialog (pseudo code)
        MessageDialog.confirm({
            title   : 'Dialog Title',
            message : 'Are you sure to Delete?'
        }).then(result => {

            if (result === MessageDialog.yesButton) {
                // The YES button was clicked, so go ahead!
                context.finalize(true);
            }
            else {
                context.finalize(false);
            }
        });

        // Prevent default behaviour
        return false;
    };
}

onFindChange({ value }: any): void {}

onHighlightChange({ value }: any): void {}

ngAfterViewInit(): void {}

onCalendarEvents(event: EventModel): void {}
}
Снимок экрана 2021-06-02 в 14.13.25.png
Снимок экрана 2021-06-02 в 14.13.25.png (151.01 KiB) Viewed 1209 times

Pavlo Miklashevych
Sr. Frontend Developer


Post by SHQK »

Thank you for your support :D


Post Reply