feature request: color code by category

  • Resolved chochochocosensei

    (@chochochocosensei)


    7 years, 6 months ago

    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…

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Franky

    (@liedekef)

    See the placeholder #_EVENTCATEGORIES_CSS

    Thread Starter chochochocosensei

    (@chochochocosensei)

    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…

    Plugin Author Franky

    (@liedekef)

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

    Thread Starter chochochocosensei

    (@chochochocosensei)

    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”?

    Thread Starter chochochocosensei

    (@chochochocosensei)

    sorry, I forgot to encode!
    I wonder if it would work for me to just put &nbsp; into…

    Plugin Author Franky

    (@liedekef)

    Could you try #URL_EVENTCATEGORIES_CSS or #ESC_EVENTCATEGORIES_CSS ?

    Thread Starter chochochocosensei

    (@chochochocosensei)

    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&nbsp;spaces
Kindergarten%20(3-5)
Kindergarten&nbsp;(3-5)
Kindergarten (3-5)

    The second and third replace the space with a%20 and &nbsp; respectively.

    On the eme-categories page the %20s appear, but the &nbsp; show as spaces. But, as shown below, the &nbsp;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&nbsp;(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&nbsp;(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, &nbsp; 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…

    Plugin Author Franky

    (@liedekef)

    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 …

    Thread Starter chochochocosensei

    (@chochochocosensei)

    Brilliant. Yes, perfect…Thanks.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘feature request: color code by category’ is closed to new replies.