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 when set to null.

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	Component to render. Built-in: "dateNav", "todayButton", "spacer", "dateLabel", "richselect", "segmented", "addEventButton", "menuButton". Custom names also allowed.
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" },
	{ id: "add-event", comp: "addEventButton" },
];

When readonly is true, items with comp: "addEventButton" are filtered out automatically.

Example

Custom item list:

<script setup>
  import { Calendar, getToolbarItems } from "@svar-ui/vue-calendar";

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

<template>
  <Calendar :toolbar="toolbar" :events="[]" :date="new Date()" />
</template>

Hide the toolbar:

<template>
  <Calendar :toolbar="null" :events="[]" :date="new Date()" />
</template>

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.