Hi Team,
We have created our own event dialog which we are opening in the "beforeEventEdit" listener after checking some conditions. We are able to open it and able to create and edit events.
But we are facing one problem:
1) Default calendar event editor is also opening. We don't want to open the default eventeditor.
To use the custom event editor, we have also tried to configure the editor config. but we are getting error.
ERROR Error: Uncaught (in promise): Error: Invalid type name "myCustomEditorType" passed to _0x5edf42 factory
Error: Invalid type name "myCustomEditorType" passed to _0x5edf42 factory
at Function._0x1309bd (calendar.lite.umd.js:10)
at Function._0x190901 (calendar.lite.umd.js:10)
at Function._0x56471b (calendar.lite.umd.js:10)
at _0x46fdd4._0x3955c6 (calendar.lite.umd.js:10)
at _0x46fdd4._0x177f2a (calendar.lite.umd.js:10)
at _0x46fdd4._0x5b2346 (calendar.lite.umd.js:10)
at _0x46fdd4._0xf93a34 (calendar.lite.umd.js:10)
at _0x4bb5e6 (calendar.lite.umd.js:10)
at Generator._0x3e1059 [as _invoke] (calendar.lite.umd.js:10)
at Generator.next (calendar.lite.umd.js:10)
at resolvePromise (zone-evergreen.js:798)
at zone-evergreen.js:705
at _0x22e366 (calendar.lite.umd.js:10)
at _0x2fd5c2 (calendar.lite.umd.js:10)
at calendar.lite.umd.js:10
at new ZoneAwarePromise (zone-evergreen.js:960)
at _0x46fdd4.<anonymous> (calendar.lite.umd.js:10)
at _0x46fdd4._0x376ab6 (calendar.lite.umd.js:10)
at _0x46fdd4._0x24d3ef (calendar.lite.umd.js:10)
at _0x46fdd4._0x481a0e (calendar.lite.umd.js:10)
but we don't want to use default event editor because we are using Angular material dialog.
Re: [ANGULAR] Custom event editor in bryntum calendar
The case when you pass "type" config to the https://www.bryntum.com/docs/calendar/#Calendar/feature/EventEdit#config-editorConfig is not what you're looking for. Let me explain. For example in case of Calendar the default type of editorConfig is 'calendareventeditor'. YOu can see it in our sources. In Calendar/lib/Calendar/feature/EventEdit.js:
static get configurable() {
return {
editorConfig : {
type : 'calendareventeditor',
'calendareventeditor' refers to the private Calendar.widget.EventEditor:
export default class EventEditor extends SchedulerEventEditor {
// Factoryable type name
static get type() {
return 'calendareventeditor';
}
So, for example, you need to override it for some reason. Then you can do:
import EventEditor from '../../lib/Calendar/widget/EventEditor.js';
export default class MyEventEditor extends EventEditor {
// Factoryable type name
static get type() {
return 'myeventeditor';
}
static get $name() {
return 'MyEventEditor';
}
}
// Register this widget type with its Factory
// so you can use { type : 'myeventeditor' }
MyEventEditor.initClass();
const calendar = new Calendar({
features : {
eventEdit : {
editorConfig : {
type : 'myeventeditor'
}
}
},
You can try out this code in Calendar/examples/basic/app.js locally.
MyEventEditor.initClass(); is the line which registers a new "type".
Note, we do not recommend to extend private classes. That was just to show you an example. But you can create your own widget and call initClass to initialize the type and use it later.
we don't want to use default event editor because we are using Angular material dialog.
Re: [ANGULAR] Custom event editor in bryntum calendar
Posted: Fri Dec 04, 2020 5:10 pm
by pmiklashevich
Could you please try to get Scheduler/examples/angular/custom-event-editor example up and running? Let me know if it works for you. If you check Scheduler/examples/angular/custom-event-editor/src/app/app.component.ts file, you'll see:
Are you using Calendar 4.0.3? The example above is from scheduler but it should work exactly the same way in Calendar. It would be nice if you can submit a runnable testcase, so we have something to inspect.
Cheers!
Re: [ANGULAR] Custom event editor in bryntum calendar
Posted: Fri Dec 04, 2020 5:16 pm
by pmiklashevich
Please change ngAfterViewInit to this notation to avoid typings problems. It will be fixed in next release.
Re: [ANGULAR] Custom event editor in bryntum calendar
Posted: Thu Feb 18, 2021 7:34 pm
by pconophy
Was the return false error ever addressed or elevated as a bug?
We've been experiencing the exact same error in v4.0.6 when returning false in beforeeventedit to prevent the internal editor from displaying and using our own. This doesn't appear to be specific to framework implementations as I was able to reproduce it in the customize event editor demo by updating the config object to have a listener for beforeeventedit that returns false.
calendar.module.js?447703:102 Uncaught (in promise) TypeError: Cannot read property 'widgetMap' of undefined
at EventEdit$1.internalShowEditor (calendar.module.js?447703:102)
at EventEdit$1.doEditEvent (calendar.module.js?447703:102)
at EventEdit$1.editEvent (calendar.module.js?447703:102)
at EventEdit$1.onActivateEditor (calendar.module.js?447703:102)
at Calendar.trigger (calendar.module.js?447703:10)
at Calendar.onViewCatchAll (calendar.module.js?447703:102)
at MonthView.trigger (calendar.module.js?447703:10)
at MonthView.onCalendarPointerInteraction (calendar.module.js?447703:102)
at HTMLDivElement._0x1622c6 (calendar.module.js?447703:10)
We've isolated the error to lib/Calendar/feature/EventEdit.js internalShowEditor() method where I assume event is undefined as a result of returning false.
Is there another method to disable the default/internal editor? This is currently preventing us from properly using a custom event editor in our app.
Re: [ANGULAR] Custom event editor in bryntum calendar
Posted: Thu Feb 18, 2021 11:56 pm
by mats
Is there another method to disable the default/internal editor?
features : {
eventEdit : false
},
The best way to disable the editor is simply to disable the feature. That said, we'll fix the bug too for sure, thanks for the reminder. Ticket: https://github.com/bryntum/support/issues/2416