feature request: color code by category
-
feature request
It would be nice if somehow the listings in the calendar could be given a css class by category, so I could color code the calendar according to category.
To be clear, what I am imagining is that if I have an event with category A, then in the calendar, the ul or li or somewhere would automatically get class “category-A”, say, and then I could add css to color code (or do as I wish) for each category…
-
See the placeholder #_EVENTCATEGORIES_CSS
Hmm. I don’t quite understand how to use this.
I was thinking that my full calendar event format would be something like <li class=”#_EVENTCATEGORIES_CSS”> and then my css file would format via .cat1 { }, .cat2 etc.
but not sure how to use #_EVENTCATEGORIES_CSS in that way…(Does this return IDs or full category names? I dont understand how to use a *space* separated list in a css “call”, and my category names have spaces in them, so they wouldn’t work even if they were commas.)
I must not be understanding the intent…
It returns a space separated list of category names. So if a category contains a space, exclude it there (see the doc), or change the name π
I’ll take it into account anyway, so I’ll format it html-encoded in the next release (thought I already did it).I see. In my particular use case, I’d rather not use single words, because the categories are also posted on the front end in the events list and I would like them to be descriptive and user friendly/meaningful. On the other hand, I see how you intended it.
I wonder if it would work for me to just put into the names (except I might need them to break…have to see)??? wouldn’t html encode leave the spaces unchanged, or rawurlencode?…class=”first%20category second%20category”?
sorry, I forgot to encode!
I wonder if it would work for me to just put into…-
This reply was modified 8 years, 9 months ago by
chochochocosensei.
-
This reply was modified 8 years, 9 months ago by
chochochocosensei.
Could you try #URL_EVENTCATEGORIES_CSS or #ESC_EVENTCATEGORIES_CSS ?
Are these documented? anyhow….they didn’t work, and I can see why now from the below.
In the end, it looks like I have to, just from inherent encoding limitations, as you suggested, restrict my category names. I can certainly be creative enough to do so, or do without, which is fine by me — more than reasonable, and I would be hard pressed to expect more.
Anyway, this is what I got (no doubt revealing my ignorance as far as html css etc. goes). Boring, but interesting to me:
Starting categories:
this is a text%20with spaces Kindergarten%20(3-5) Kindergarten (3-5) Kindergarten (3-5)The second and third replace the space with a
%20and respectively.On the eme-categories page the
%20s appear, but the show as spaces. But, as shown below, the s are preserved, clearly.After inserting
class=β #_EVENTCATEGORIES_CSS #URL_EVENTCATEGORIES_CSS #ESC_EVENTCATEGORIES_CSSβinto my calendar<li>and checking the actual classes using chrome dev tools as rendered by chrome, results were as follows:#_EVENTCATEGORIES_CSS:
this is a text%20with spaces Kindergarten%20(3-5) Kindergarten (3-5) Kindergarten (3-5)#URL_EVENTCATEGORIES_CSS:
this%20is%20a%20text%2520with%20spaces%20Kindergarten%2520%283-5%29%20Kindergarten%C2%A0%283-5%29%20Kindergarten%20%283-5%29#ESC_EVENTCATEGORIES_CSS:
this is a text%20with spaces Kindergarten%20(3-5) Kindergarten (3-5) Kindergarten (3-5)Step 3 was try to write css rules for these.
Though I didn’t test thoroughly, and I am not an expert in this, none of the above work as it seems like the%20, etc. do not work as css classes. Parentheses are verbotten. I don’t know the rules for allowable chars in css class names but perhaps they are quite limited?In any case if it ever comes up in the future:
Dream 1: If instead of using the actual category names, there was a way I could generate a list with a standard prefix, such as βcat1 cat3 cat4β with the numbers representing the ids, (something like adding a prefix to #_EVENTCATEGORYIDS, minus commas), then I could easily use those for the class names.
Dream 2, better than dream 1: you add a field to the categories settings page to explicitly set the css classes for it.
Since I am not using the category descriptions anywhere, for fun (!) I tried putting #_EVENTCATEGORYDESCRIPTIONS as my class…except commas…
Then why not switch it around? Use the category description where you are currently using the category name; change the names to something without spaces and then you can use #_EVENTCATEGORIES_CSS as planned …
Brilliant. Yes, perfect…Thanks.
-
This reply was modified 8 years, 9 months ago by
The topic ‘feature request: color code by category’ is closed to new replies.