JCal Pro is the premier events calendar for Joomla with a beautiful front end display. By default, JCal Pro assigns the same color to all events categories and events. So, all the categories and events will look the same.
JCal Pro allows you to easily set a unique color for every category instead of the default one. This new category color will be passed to the category events as well. In this tutorial, you will learn how to set your preferred color to all events categories.
If you didn't want to break down your events into categories, or if you have only one category of events, then please close this lesson right away. It won't apply to you. If, however, you are going to categorize your JCal Pro event to multiple categories, then read on.
Why bother with custom colors?
The answer is - to make each JCal Pro category and its events distinct. Both at the back end and the front end. Take a look at the following two monthly views. First one - with the default colors. The second one - with custom ones.
Which one, do you think, you or your visitors would prefer: the one set by default or the one set explicitly?
Set by default?
Back end:
Front end:
Or set each one with its own color?
Back end:
Front end:
How to set a new color for your JCal Pro category
- In your Joomla back end, go to Components > JCal Pro > Categories:
- Click on the title of the required JCal Pro category ("JCal Pro Category 01" in my example) to open it for editing:
- You will see the "JCal Pro: Edit Category" admin page. Click on the "JCal Pro Options" tab:
- Locate the "Color" parameter and click on the color picker:
- You will see the color picker popped up.
- Point your mouse cursor on the preferred color and click on it.
- The color box and the hexadecimal value of the color will now change to your selected color.
- Click on the Save & Close button.
Now repeat this step for all of your JCal Pro categories and you are all set. All of them then will look easily distinguished from each other. Similar to the screenshot above. Both for you at the back end and for your site visitors at the front end.