Editor

A React 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/react-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/react-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 ref or init. Used to read editorData and dispatch actions.
items	EditorItem[]	getEditorItems()	Field config passed to @wx/react-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/react-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

import { useRef, useState } from "react";
import { Calendar, Editor } from "@svar-ui/react-calendar";

function App() {
  const [api, setApi] = useState(null);

  return (
    <>
      <Calendar init={setApi} events={events} date={date} />
      {api && <Editor api={api} />}
    </>
  );
}

Related articles

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