getToolbarItems

Returns a fresh array describing the default toolbar layout. Used as a starting point when a custom toolbar should keep most of the built-in buttons.

Signature

function getToolbarItems(): ToolbarItem[];

Default items

[
	{ id: "nav", comp: "dateNav" },
	{ id: "today", comp: "todayButton" },
	{ comp: "spacer" },
	{ id: "title", comp: "dateLabel" },
	{ comp: "spacer" },
	{ id: "modes", comp: "richselect" },
	{ id: "add-event", comp: "addEventButton" },
];

Item	comp	Description
nav	dateNav	Prev / next arrows.
today	todayButton	Jump-to-today button.
-	spacer	Flexible gap.
title	dateLabel	Centered date-range label.
-	spacer	Flexible gap.
modes	richselect	View switcher dropdown.
add-event	addEventButton	"+" button that opens the editor with a new event.

When readonly is true, the addEventButton is filtered out automatically.

Extending the toolbar

Spread the result and append your own items.

import { Calendar, getToolbarItems } from "@wx/react-calendar";

const toolbar = {
    items: [
        ...getToolbarItems(),
        { id: "export", comp: "button", text: "Export" },
    ],
};

<Calendar events={events} toolbar={toolbar} />

Related articles

• toolbar — Calendar prop that consumes the result.
• action — fired by custom toolbar buttons and menuButton.
• readonly — strips addEventButton from the toolbar.
• Navigation bar — full toolbar customization guide.