[VUE 3] Create new event programatically

[gustavo.rosendo]

Hey guys,

We added a button on the calendar's sidebar to create a new event, but it is yielding a lot of warnings on the console which make the UI freeze.

Could you help us to check if we are creating it correctly and how to resolve these warnings?

Here is how we are adding the button on the sidebar:

sidebar: {
      items: {
        addNew: {
          weight: 0,
          type: 'button',
          text: LocaleManager.locale?.Sidebar.addNew,
          icon: 'b-fa b-fa-circle-plus',
          cls: 'new-event-button',
          listeners: {
            click: 'up.createEvent',
            args: [undefined]
          }
        }
      }
    }

And this is the recurring warning that we are receiving:

[Vue warn]: The `compilerOptions` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka "full build"). Since you are using the runtime-only build, `compilerOptions` must be passed to `@vue/compiler-dom` in the build setup instead.
- For vue-loader: pass it via vue-loader's `compilerOptions` loader option.
- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader
- For vite: pass it via @vitejs/plugin-vue options. See https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#example-for-passing-options-to-vuecompiler-sfc
warn	@	runtime-core.esm-bundler.js:41
get	@	runtime-dom.esm-bundler.js:1481
safeJsonStringify	@	StringHelper.js:238
isEqual	@	ObjectHelper.js:372
isEqual	@	StringDataField.js:44
inSet	@	Model.js:2021
set	@	Model.js:1901
set	@	RecurringTimeSpan.js:158
endBatch	@	Model.js:2650
doCommitAsync	@	SchedulerEventRendering.js:895
await in doCommitAsync (async)		
commitAsync	@	SchedulerEventRendering.js:854
addAsync	@	TimelineScroll.js:341
doCreateEvent	@	AgendaView.js:306
doCreateEvent	@	Calendar.js:2613
createEvent	@	Calendar.js:2613
trigger	@	Events.js:1408
onInternalClick	@	Panel.js:66
handler	@	EventHelper.js:570
nrWrapper	@	development.js:5

It seems to be happening only in the development mode, however we are not confident to release it in production this way.

Any help would be really appreciated.

Best,
Gustavo

[Animal]

The bug is inside some other code that is somehow there.

Two things worry me.

Which field’s equality test needs to convert to JSON?

Why Stringhelper.SafeJsonStringify ends up in this runtime-dom.esm-bundler.js thing.

[gustavo.rosendo]

Hi,

Thanks for your reply!

This runtime-dom.esm-bundler.js is the result of our bundled code.
What is striguing me is that we don't directly call Stringhelper.SafeJsonStringify, but it is being called by some code inside Bryntum, so possibly it is something we are missing in the way we call the createEvent function.

Can you help us check if it is the correct way?
Here is how we are calling it.
We created a custom button in the sidebar and added a listener for the click event, which calls the 'up.createdEvent' :

      addNew: {
          weight: 0,
          type: 'button',
          text: LocaleManager.locale?.Sidebar.addNew,
          icon: 'b-fa b-fa-circle-plus',
          cls: 'new-event-button',
          listeners: {
            click: 'up.createEvent',
            args: [undefined]
          }
        }

Thanks and regards,
Gustavo

[marcio]

Hey Gustavo,

I tried the following snippet on our demo and didn't get the message

sidebar: {
	items: {
		addNew: {
			weight: 0,
			type: 'button',
			text: 'Add New',
			icon: 'b-fa b-fa-circle-plus',
			cls: 'new-event-button',
			listeners: {
				click: 'up.createEvent',
				args: [undefined]
			}
		}
	}
}

https://bryntum.com/products/calendar/examples/basic/

Could you please provide a sample project with your configuration for us to debug and assist you better on this?

[Animal]

Set a breakpoint in your handler function and step it to see exactly what’s happening.