# How to Add a New Event Button to the Avonni Calendar Header

## Overview

This guide shows you how to add a "New" button to the header of the [Avonni Calendar component](/flow/flow-components/calendar.md). When clicked, this button will open a modal box where you can create a new data entry for the Salesforce object linked to the calendar. In this tutorial, clicking the "New" button will bring up a modal for creating a new Salesforce event (related to the event object).

## 1️⃣ Step 1: Access the Header section

* Open the screen element on Flow Builder
* Select the Calendar Component and click the "Open Component Builder" button.
* Expand the Header section
* Click on the "Add Actions" button to create a new button action on the calendar header

<figure><img src="/files/FJziMTv2xUGgBIkz6TTG" alt=""><figcaption></figcaption></figure>

## 2️⃣ Step 2: Create the action button

* Enter a label for your button action
* Select an icon (optional)
* Click on Save.

<figure><img src="/files/iM92M8Bo0TO69pUSGTh3" alt=""><figcaption></figcaption></figure>

## 3️⃣ Step 3: Add an interaction

* Click on the **Interactions Tab**
* Click on the "**Add Toolbar**" button to create the interaction on a toolbar item

<figure><img src="/files/vGCBrKGInAZoRS72mDMu" alt=""><figcaption></figcaption></figure>

## 4️⃣ Step 4: Define the interaction

* Select the target name > select the item mane created in the Step 2
* For **`Type`**, choose **Navigate**
* For **`Page Reference Type`**, choose **Object Page**
* For **`Object API Name`**, choose the Object you'd like to trigger the interaction to
* For **`Action Name`**, choose **New**.
* Click Save.

<figure><img src="/files/Ow9JxKZIB4PS2A3n66RW" alt=""><figcaption></figcaption></figure>

## Final Result

<figure><img src="/files/OIkYs5tzRBRkvBq4MQKM" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-add-a-new-event-button-to-the-avonni-calendar-header.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
