Skip to main content

add-event

Adds a new event to the store. Missing start or end are filled from the active view - rounded to the next hour for time-grid views, set to the current day for date-only views. When edit: true, the editor opens on the new event after creation.

Usage​

type AddEventPayload = {
	event: Partial<CalendarEvent>;
	edit?: boolean;
	id?: EventID;
};
FieldTypeDescription
eventPartial<CalendarEvent>Initial event fields. Rewritten to the normalized event after the action runs.
editbooleanWhen true, sets the new event as editorData and opens the editor.
idstring | numberOutput field. The store writes the generated event id back onto the payload after creation.

The store handler mutates event and id on the payload so downstream consumers receive the final, normalized event with its assigned id.

Trigger​

api.exec("add-event", {
	event: {
		text: "Standup",
		start: new Date(),
		end: new Date(Date.now() + 30 * 60 * 1000),
	},
});

Open the editor on the new event:

api.exec("add-event", {
	event: { text: "New meeting" },
	edit: true,
});

Observe​

api.on("add-event", p => console.log("added", p.id, p.event));

The handler runs after id assignment and normalization, so p.id and p.event reflect the stored values.

Intercept​

api.intercept("add-event", p => Boolean(p.event.text));

Returning false cancels the add before it reaches the store.

Component handler​

<Calendar
  :events="[]"
  :date="new Date()"
  :onaddevent="p => console.log(p.id, p.event, p.edit)"
/>