> 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="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-d81da277a9ea241ff65735560998802836246e40%2F2024-02-08_20-32-47.png?alt=media" 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="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-047ac6323fd9c4261f0896fb2734b7fea7f0f5f7%2FQuestions%20DataTable%20Cedric%20Feb%208.png?alt=media" 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="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-bbb9f97a3817d5e6751d6feb2eaf4adcd3a3e418%2FQuestions%20DataTable%20Cedric%20Feb%208%20(1).png?alt=media" 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.