# How to Color-Code Calendar Entries in the Avonni Calendar

## Overview

This tutorial visually differentiates calendar entries within Salesforce by assigning specific colors based on field values. You'll learn to create a formula text field that maps various field values to distinct colors, such as event types, project statuses, or any other customizable field. This method enhances the visual appeal and usability of the [Avonni Calendar](/flow/flow-components/calendar.md) by enabling users to identify different categories of entries through color-coding quickly.

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

## Guided Steps

### Step 1: **Create a Formula Field for Calendar Color-Coding**

We'll create a formula text field. Each option in your 'type' picklist (like 'Meeting' or 'Task') will get its color. The formula will look at the field, see its 'type', and automatically display the right color. Color choices are made using standard web color codes.

Here's a formula example where each type of meeting is associated with a color.

```
IF(ISPICKVAL(Type__c,'Product Launch'), '#ba0517',
IF(ISPICKVAL(Type__c,'Brand Awareness'), '#d78ff5',
IF(ISPICKVAL(Type__c,'Customer Engagement'), '#fcc003', '#fff000')
)
)
```

{% hint style="info" %}
Replace Type\_\_c by the API name of your field
{% endhint %}

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

### Step 2: Avonni Calendar Configuration

* Open the Avonni Calendar's Component Builder.
* Find the "Color" attribute.
* Change the setting to "Mapped".
* Select the formula field you created in [Step 1](#step-1-create-a-formula-field-for-calendar-color-coding) from the dropdown menu.
* Your calendar entries should now automatically display colors based on your formula

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

**You're done.**


---

# 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-color-code-calendar-entries-in-the-avonni-calendar.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.