I dug into this today and I learned a few things.
It appears that Glide generates a color palette of 20 colors that are used for the calendar. That color palette is determined based on the accent color chosen for the app. What I haven’t been able to determine is how Glide builds that color palette. (If someone from Glide could clue me in on that or provide some javascript, that would be awesome.) However, that color palette can’t be modified by us in any way, so it’s just a matter of determining how to reliably pick one of those pre-set colors from the palette.
Here is what I found:
- Glide gets the column value in each row that is used for the calendar Grouping.
- Then they hash that text string to convert it from text to a numerical representation of that text.
- Using that hashed numeric value, they then do a modulus calculation with 20.
- That calculation returns a numerical index between 0 and 19.
- It then uses that index value to choose one of the colors from the color palette array.
I threw together some javascript that takes a column value as input, determines the hash number and converts it to an index value. I also grabbed the color palette that was set for my app based on my current accent color and created an array in my javascript with those hex colors. Then using the index I was able to pick one of the 20 colors from the palette based on the input value.
So based on the above information, I did a quick test and I can pretty confidently say that if you use single character values from ‘A’ through ‘T’ for your calendar groups, you should get one of each of the 20 colors that are available in your app’s color palette. Depending on your accent color, you will have to play around with each of the group letters to determine which of those 20 colors you want to use.
Here I create 20 calendar entries. Each one has a group with a different letter (A-T). You can see that it gave me different colors which represent each of the 20 colors in the color palette. While it doesn’t appear that we can choose any color we want, we can at least choose one of the 20 colors by using A-T for your groups. At least it’s somewhat predictable.
Edit: I added an updated screenshot above after a refresh of my browser. Seems that Glide does some weird caching of group values when you change them in the builder, so it caused some weird results with the colors and it kept compounding group values to an array without clearing it first. I was seeing repeat colors which didn’t make sense to me. After the browser refresh, the colors corrected themselves and match what was expecting.