[REACT] customize eventEditor config doesn't work

[wizard.cloud]

Hello.
With our team of developers, we use the bryntum library in the react framework.
We need to intervene on the configuration of the edit window. For example when editing/creating an event, we need the edit window to be a modal that does not close when the focus is lost.
We would also like to be able to change the bbar settings.

However, the only parameter that seems to be taken into account in the config is the "items" parameter.

We tried to use the "editorConfig" parameter but it overwrites all other parameters.

In our main file, we have a react component which include your <BryntumCalendar> component and we pass eventEditorAudiowizard into the eventEditFeature props as you can see below :

		const eventEditorAudiowizard = AWEventEditor({
		agendaStore,
		typesStore,
		stateStore,
		countryStore,
		languageStore,
		createScheduleState,
		currentAgenda,
	})

		return (
		<BryntumCalendar
			ref={calendarRef}
			{...calendarConfig}
			hidden={!(settingsLoaded && agendasLoaded)}
			date={defaultStartDate}
			resources={resources}
			onDataChange={(data: any): void => {
				onDataChange(
					data,
					timeout,
					unsavedChange,
					setSelectedUser,
					setSelectedLaboratory,
					setSelectedDate,
					appointmentFromScheduleSelector
				)
			}}
			eventEditFeature={eventEditorAudiowizard}
			eventTooltipFeature={eventTooltipFeature}
			listeners={eventListeners}
			extraData={{
				attendances,
				agendas,
				agendaAlreadyLoaded,
				typesStore,
				agendaStore,
				appointmentFromScheduleSelector,
			}}
			// sidebar={filters}
		/>
	)

the eventEditorAudiowizard is defined in another file which export the AWEventEditor function :

this is or current configuration (the modification of the item is working but not the other parameters of the configuration):

export const AWEventEditor = ({
}: {
}): any => {
	let lastSearchPatient = ""
	return {
		autoClose: false,
		modal: true,
		closeAction: "destroy",
		closable: true,
		items: {}
	}
}

We also try to put this configuration :

export const AWEventEditor = ({
}: {
}): any => {
	let lastSearchPatient = ""
	return {
		editorConfig: {
			autoClose: false,
			modal: true,
			closeAction: "destroy",
			closable: true,
		},
		items : {}
	}
}

or this one :

export const AWEventEditor = ({
}: {
}): any => {
	let lastSearchPatient = ""
	return {
		editorConfig: {
			autoClose: false,
			modal: true,
			closeAction: "destroy",
			closable: true,
			items : {}
		},
	}
}

none of the two last one worked.

Thank you.

[alex.l]

Using editorConfig is correct approach. Since your code is not runnable, I checked in our 'filtering' React example to use this

const calendarConfig = {
    // ...
    eventEditFeature: {
        editorConfig : {
            modal : true
        }
    },
    

// ...

<BryntumCalendar ref={calendarRef} {...calendarConfig}></BryntumCalendar>

and it works well to me. Please post version you use (try to upgrade, if applicable), and attach a runnable test case, we will check what's wrong.

[wizard.cloud]

Hi ! Thank you for your answer.

We are using the latest version of Bryntum.

We found a solution, using a UseEffect, we update the editorConfig like this :

	useEffect(() => {
		if (calendarRef && calendarRef.current) {
			const calendar = calendarRef.current.instance as AWCalendar
			//...
			Object.assign(calendar.eventEdit.editorConfig, { autoClose: false, modal: true })
		}
	}, [settingsSaved])

It would have been complicated for us to give you a runable example because our project is quite large and divided into several files.

All the best,

[alex.l]

Ok, great that you found a solution. Please let us know if we can help with something else.