There was a requirement where I had to show an account’s selected calendars on the right side and there was a list of select boxes on the left sidebar. Each selectbox-calendar pair had to be the same color to indicate a select/unselect would affect the related calendar in a visual way.
Firstly, we define colors to use them as a variable in multiple css files.
I defined these variables in another file as a constant array so that I would use them to assign to all calendars beforehand. There is also a case where the number of calendars are more than the number of these defines colors so I chose to apply mod operator.
Each appointment in a calendar should have a background related to its main theme color. To do this, I created a css file content just like below (here we use fullcalendar so the class names may be familiar):
Happy Coding!
