Hello everyone!
I have events coming from my gmail account. All events has a description field and participants field but i can't find these fields in Bryntum Calendar eventEditor. I was able to use TextAreaField and ComboField, but; when i am using these fields i can't achieve something like google calendar description and participants field. my description contains raw html that needs a rich text editor not textarea and participants needs a multi select with capability of adding items on enter click.
Support Forum
- Attachments
-
- As you see description shows raw html. I also need participants field above description that user add multiple emails of participants.
- Screenshot 2022-09-29 152308.png (62.56 KiB) Viewed 831 times
Hi ilyaskohistani,
We don't have built-in rich text editor. We have a feature request to add a demo with 3rd party component here
https://github.com/bryntum/support/issues/2698
I will check with product management if we can give it a higher prio!
All the best,
Alex
Hi Alex,
Is there a way i can add my own component or at least make this textarea to show the raw html in correct way. all events has description and i can't ignore description field. so i need to find a way to at least show this part to user.
also if you see there is a guests part where you can add participants. i need something like that but, i can't do it with combo since combo field requires user to select from defined participants. i want user to enter guests and then add it in combo or a field that user can add their participants and as result i get it in array?
- Attachments
-
- This is how they add description
- Screenshot 2022-10-07 094012.png (82.68 KiB) Viewed 811 times
Combos can add undefined values: https://www.bryntum.com/docs/calendar/api/Core/widget/Combo#config-createOnUnmatched
To add a third party rich text editor, you can create your own subclass of Field
https://www.bryntum.com/docs/calendar/api/Core/widget/Field
If I recall correctly, this should work when extending Field:
export default class RichTextField extends Field {
static get $name() {
return 'RichTextField';
}
// Factoryable type name
static get type() {
return 'richtextfield';
}
get innerElements() {
// Create the underlying widget on demand
if (!this.richTextWidget) {
this.richTextWidget = <create the widget>;
// This reference allows it to be extracted into the input property
this.richTextWidget.theRealInputElement.dataset.reference = 'input';
}
// Return the encapsulating element. This gets inserted into the Field's inputWrap element
return this.richTextWidget.outermostElement;
}
}
// Register this widget type with its Factory
RichTextField.initClass();
Then you can simply add it to the items
of your editorConfig
:
{
type : 'richtextfield' // factoryable name of required widget
}
In reality it was more complex, so I've implemented a demo for you with using Quill rich text editor.
Just run
nmp i
npm start
And see extra field in EventEditor with rich text editor.
You'll need to review all the app to see changes we applied.
RichTextEditor.js
with editor field itself,
AppConfig.js with extra field in eventStore
model, and field definition in eventEditFeature
config.
App.vue
with extra CSS loaded for Quill,
package.json
with new "quill" dependency.
- Attachments
-
- filtering.zip
- (170.74 KiB) Downloaded 58 times
All the best,
Alex