> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-color-code-calendar-entries-in-the-avonni-calendar.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-color-code-calendar-entries-in-the-avonni-calendar.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.