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.
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.
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:
