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.

<script lang="ts">
    import { Calendar, getToolbarItems } from "@wx/svelte-calendar";

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

<Calendar {events} {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.