Our powerful JS Calendar component
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 (15.38 KiB) Viewed 1268 times
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
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?
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 (28.2 KiB) Viewed 1241 times
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.
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 (13.07 KiB) Viewed 1236 times
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 (88.96 KiB) Viewed 1234 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 (151.01 KiB) Viewed 1234 times
Pavlo Miklashevych
Sr. Frontend Developer
Thank you for your support