---
title: toolbarElements
---

Defines an arbitrary custom html element for use in [headerToolbar](headerToolbar) or [footerToolbar](footerToolbar).

<div class='spec'>

Object

</div>

A map of renderers. Each value is a [content injector](content-injection). For use as a string token in the start/center/end toolbar sections.

Example:

```js
var calendar = new Calendar(calendarEl, {
  toolbarElements: {
    myCustomElement: () => (
      'some text',
      // OR... { html: '<i>some html</i>' }
      // OR... { domNodes: arrayOfDomNodes }
      // OR... JSX for React
    ),
  },
  headerToolbar: {
    start: 'prev,next today myCustomElement', // <-- wire up here
    center: 'title',
    end: 'dayGridMonth,timeGridWeek,timeGridDay'
  }
});
```