First of all, try to use the default event editor, (not listening to beforeEditEvent) to see if you the problem is still there. If yes you know that it is not related to the editor code. If not the you have smaller chunk of code to investigate.
Support Forum
I think it would be much easier for you to use the provided editor, and style it yourself if you need to.
See https://bryntum.com/examples/calendar/eventedit/
You can use CSS or configuration to make the editor look and behave exactly as you need.
I think calendar with using own dialog error, at now I attempt to use default your dialog like
However I add filepicker or filefield filed when I click it , calendar will open window dialog I chose file, after chosing file upload, default dialog will be closed too,
How make default dialog still open after chosing file
The same error with field button
features : {
eventEdit : {
items : {
// Change the label of the nameField
nameField : {
label : 'Title'
},
// Move the calendar picker to the top
// It's name is "resourceField" because Calendars are the assigned resources.
resourceField : {
label : 'Task',
weight : 0
},
noteField : {
type : 'textarea',
label : 'Notes',
name : 'note'
},
button: {
type : 'button',
label : 'button',
name : 'button',
cls : 'b-raised b-rounded',
icon : 'b-fa-plus-circle',
color : 'green',
onClick : () => {
alert("click");
return false;
}
},
filefield: {
type : 'filepicker',
label : 'upload',
name : 'upload'
}
}
},
eventTooltip:{
showOn : 'hover',
tools : {
left : {
cls : 'b-fa b-fa-copy',
weight : 20,
tooltip : 'copy task'
},
},
renderer : (data: any) => {
},
}
},
You can add code from https://bryntum.com/docs/calendar/api/Calendar/feature/EventEdit#config-autoClose to your feature config. Then it would look like this:
features : {
eventEdit : {
editorConfig : {
autoClose : false,
modal : true
},
items : {
// Change the label of the nameField
nameField : {
label : 'Title'
},
// Move the calendar picker to the top
// It's name is "resourceField" because Calendars are the assigned resources.
resourceField : {
label : 'Task',
weight : 0
},
noteField : {
type : 'textarea',
label : 'Notes',
name : 'note'
},
button : {
type : 'button',
label : 'button',
name : 'button',
cls : 'b-raised b-rounded',
icon : 'b-fa-plus-circle',
color : 'green',
onClick : () => {
alert('click');
return false;
}
},
filefield : {
type : 'filepicker',
label : 'upload',
name : 'upload'
}
}
},
In your configuration, filefield
is a named item so it is added under its name to the parent's widgetMap
.
So you can get the reference to that field in afterSaveEvent
listener this way:
listeners : {
afterEventSave({ source }) {
const widgetMap = source.features.eventEdit.editor.widgetMap;
if (widgetMap) {
widgetMap.filefield.clear();
}
}
},
Checking for existence of widgetMap is necessary because before the event editor has been opened at least once, it does not exist.