Bryntum Support Forums

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.

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!

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?

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
}

Hey Animal,
thank you for you help. is there any real example of this or an example with Vue.js. I tried this one but wasn't able to use my richTextField since it gives me an error that trying to get dataset of undefined.

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.

Hey Alex, I really appreciate all your helps. It is working prefect. Thank you for this great sample you attached here.