toolbar

Configures the toolbar rendered above the calendar grid. Replaces the default item list, adds a CSS class to the toolbar container, or hides the toolbar entirely — either with null or with an empty configuration ({} or { items: [] }), both of which render no navigation DOM.

Usage

toolbar?: { items?: ToolbarItem[]; css?: string } | null;

Field	Type	Description
items	ToolbarItem[]	Replaces the default toolbar item list. Omit to keep the default layout.
css	string	Extra CSS class applied to the toolbar container.

ToolbarItem:

Field	Type	Description
id	string	Identifier referenced by exec("action", { id }) and routing.
comp	string	Name of any registered toolbar component — not a fixed enum. Built-ins include "dateNav", "todayButton", "spacer", "dateLabel", "richselect", "richselect-navigation", "segmented", "segmented-navigation", "addEventButton", "menuButton"; components you register with registerToolbarItem work the same way.
value	any	Initial value for input-like items.
options	{ id: string; label: string }[]	Option list for selector-type items.

Default value: undefined - renders the default toolbar (getToolbarItems()):

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

The default richselect-navigation view switcher renders as a RichSelect in the bar and as a ButtonList when it moves into the overflow menu. The pinned: true add button stays in the main bar and never collapses into the overflow.

When readonly is true, items with comp: "addEventButton" and items with id: "undo" or id: "redo" are filtered out automatically.

Example

Custom item list:

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

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

<Calendar toolbar={toolbar} events={[]} date={new Date()} />

Hide the toolbar:

<Calendar toolbar={null} events={[]} date={new Date()} />

An empty configuration hides it too — {} or { items: [] } resolves to an empty item list, so no navigation DOM is rendered:

<Calendar toolbar={{}} events={[]} date={new Date()} />

Related articles

• getToolbarItems — fresh copy of the default item list.
• action — fired by menuButton and custom toolbar buttons.
• readonly — strips addEventButton from the toolbar.
• Navigation bar — full toolbar customization guide.