[Solved] Use Status element as an integer (Calendar Viz) for CSS use - and templating

[georgie]

Hi

In Calendar viz we have a "Status element", which allow for example to set different colors with CSS class. It is great, for example I can do:

#visualization_1_com_fabrik_1 .Pending{
    background-color: red!important ;
}

But to change my element CSS in Calendar, I would not use adding layer in the Calendar admin, I would prefer display different colors in my Calendar using an id field in the "Status element" ; in order to display colors according creation of new records.
Indeed I would never have more than 100 records max in this table, which will be added by front-users, so I can create 100 CSS classes with a variation of colors. This is DIY, but I will look after how to do better.

For the moment I notice that I can note use an id field in CSS class (from this "Status element" so). This for example, does not work:

#visualization_1_com_fabrik_1 .1{
    background-color: red!important ;
}

Please, is it about CSS or about Fabrik? Can it be improved? I would understand if this is not possible.
Or maybe there is a better way upstream?

And also, I do not find where duplicate the correct file/repertory to override a Calendar template (in "Options", "Bootstrap" by default). I have do many tests with files I saw, without success.
For the moment I do Calendar CSS changes in Protostar CSS.

Can you help me?

Thank you

 

[troester]

You can't use an id as CSS class. Class names must start with a character.
In element's "use as row class" Fabrik is adding the element name in this case.

Seems in the calendar Fabrik is using the status element value "as is", so in case of an integer you can't add a class.

 

[cheesegrits]

OK ...

https://github.com/Fabrik/fabrik/commit/918b2379784512d91cc0693aaf9d3b138a368d54

So the Full Calendar status element now applies the same logic as the "use as row class" for elements. Convert non alphanumeric to -, trim any resulting - off the ends, and prefix with (short) element name.

Note I've also changed the logic slightly, so we now always prepend the short element name to the value. But for backward compat, if it doesn't start with a number, we also apply just the value as a second class. That just makes things more consistent moving forward, so there's always a <name><value> class, but won't break for existing CSS that only has <value>.

-- hugh

 

[georgie]

Thank you, I will try today.

And for the simple Calendar? Do you advice me to prefer the Full Calendar? Because simple Calendard is depreciated and will not be updtated in the future?

EDIT: indeed Full Calendar is beeeetter!

THX

 

[cheesegrits]

Yes, don't use Calendar. I may even pull it out of the release this time round. Leave it in github for legacy, but don't put it in the installer.

Full Calendar still has a few issues (like we've got issues with trying to apply the Full Calendar language to match the selected J! language), but it's waaaay slicker.

Any issues you find with it, let me know, I'll get them fixed.

-- hugh

 

[georgie]

OK thanks, I note.

My id in CSS work now, solved!

OK for bug reports, if I see some concrete things, I let you know.

Already, there was few days, I tried to use a custom tempate for FC, without success.
EDIT: Ouch, no, OK, it works, I did an error, solved!

Thanks!