# How to add multiple colors in calendar date box

**URL:** <https://forum.inductiveautomation.com/t/how-to-add-multiple-colors-in-calendar-date-box/70093>\
**Category:** Ignition\
**Tags:** database, perspective, scripting\
**Created:** [February 21, 2023, 3:19am UTC](https://forum.inductiveautomation.com/t/how-to-add-multiple-colors-in-calendar-date-box/70093 "2023-02-21T03:19:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![P\_N](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@P\_N](https://forum.inductiveautomation.com/u/P_N)\
**Post date:** [February 21, 2023, 3:19am UTC](https://forum.inductiveautomation.com/t/how-to-add-multiple-colors-in-calendar-date-box/70093/1 "2023-02-21T03:19:22Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/1/e1582ce219c614c938ae2f2d0a9d352c7b576cc8.png)

Hi All,

As you can see from the above image, I have created a calendar which represents different color on basis of incidents happened on that day.  
I want to have multiple color indication if multiple incidents happened on that day.

For example:- you can see from above Image on 1st of Feb 2023 , 2 incidents took place.

1. Terrorist attack which is LTI (Represented by RED) and 2) Dropped a spanner which is Near Miss ( Indicated by Yellow)

I want the 1st of Feb Block to show half RED and Half Yellow color which will indicate that 1 LTI and 1 Near Miss occurred on that day.

Any suggestions/ help on how to achieve this is highly appreciated.

Thank you.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [February 21, 2023, 4:37am UTC](https://forum.inductiveautomation.com/t/how-to-add-multiple-colors-in-calendar-date-box/70093/2 "2023-02-21T04:37:01Z")

</div>

This all really depends on how you've constructed the "days" in this "date box"; without insight into your construction, we aren't really able to suggest a best way to improve it, lest our recommendations be completely incompatible and require an entirely different approach.

For example, If I were building something similar, each of my "days" would be an instance of a View which took two parameters; that list would be a list of the colors to display (named (`colors`), and the number of the day the space represents (`day`). The View making up each day would be a Coordinate layout with a Flex Repeater which spanned the entire View top-to-bottom and left-to-right. The Flex Repeater would be configured to not wrap and to not use the default width/height of the View being instanced, instead allowing for use of the default flex settings of the Flex Repeater.

Each instance within the flex repeater receives a color from the list of colors. This works for days without any colors/issues as well, because the Flex Repeater would have an empty list of instances. It also allows for specifying the darker background for days out-of-range of the current month.

Over the top of the Flex Repeater, I would place a Label bound to `self.view.params.day` (binding uses `self` - not `this`).

If you're 100% sure there will only ever be up to two incident types, you could even move away from the Flex Repeater and instead just do a color gradient from one color to the next - although you run the risk of removing some of the meaning of the coloring in doing so.

Appearance with Flex Repeater as the coloring background:

 ![Screenshot 2023-02-20 at 8.27.32 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/c/5cae51968949253a258984450afdf2c277e2fa87.png)

Appearance while using issue colors as a gradient (same prop structure to drive the appearance):  
 ![Screenshot 2023-02-20 at 8.36.08 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/4/9449c71d8c8a653d9dabc7b19b5f24f7fba321c1.png)