Editor

A Svelte component that renders an event editor bound to the Calendar instance. It mounts when api.getReactiveState().editorData carries a selected event and forwards form changes back to the calendar through update-event, delete-event, and select-event.

Signature

import { Editor } from "@svar-ui/svelte-calendar";

type EditorProps = {
	api: CalendarInstanceApi;
	items?: EditorItem[];
	placement?: "sidebar" | "modal";
	layout?: "columns" | "default";
	focus?: boolean;
	css?: string;
	topBar?: any;
	autoSave?: boolean;
	onchange?: (ev: {
		key: string;
		value: any;
		update: Record<string, any>;
	}) => void;
	onsave?: (ev: { values: Record<string, any> }) => void;
	onaction?: (ev: {
		item: { id: string; comp?: string };
		changes?: any;
	}) => void;
};

Other props are forwarded to the underlying Editor from @wx/svelte-editor. The values prop is reserved - the wrapper always binds the form to editorData.

Props

Prop	Type	Default	Description
api	CalendarInstanceApi	required	Calendar instance from bind:this or init. Used to read editorData and dispatch actions.
items	EditorItem[]	getEditorItems()	Field config passed to @wx/svelte-editor.
placement	"sidebar" | "modal"	"sidebar"	Where the editor is rendered.
layout	"columns" | "default"	"default"	Layout preset for the underlying editor.
focus	boolean	true	Forwarded to @wx/svelte-editor.
css	string	""	Extra class appended to the editor's CSS class list.
topBar	any	default top bar	Override the injected top bar; pass null to remove it.
autoSave	boolean	true	Pushes field changes through update-event immediately.
onchange	(ev) => void	undefined	Fires after the wrapper's same-day end-date adjustment runs.
onsave	(ev) => void	undefined	Fires before update-event is dispatched (manual-save flow).
onaction	(ev) => void	undefined	Fires before built-in close handling on top/bottom-bar buttons.

The wrapper applies two classes on every instance: wx-editor-calendar, plus wx-editor-all-day when the selected event has allDay: true. The all-day class hides the time inputs of the built-in date-time-picker fields via CSS.

Built-in top bar

When topBar is left undefined, the wrapper renders a close icon and a Delete button:

Control	Action
Close icon	select-event({ id: null })
Delete button	delete-event({ id }), then select-event({ id: null })

Pass topBar={null} to remove it, or pass a custom { items: [...] } to replace it.

Example

<script>
  import { Calendar, Editor } from "@svar-ui/svelte-calendar";

  let api = $state();
</script>

<Calendar bind:this={api} {events} {date} />
{#if api}
  <Editor {api} />
{/if}

Related articles

• getEditorItems — fresh copy of the default editor field list.
• registerEditorItem — bind a custom Svelte component as a field type.
• select-event — selection drives editor visibility.
• update-event — auto-save dispatches this action.
• Editing — full editor wiring guide.