Is it possible to color code my CalendarView entries?

[Curtis Freudigmann]

I have a Confiforms form set up which allows a user to submit a drop down option 1 through 5, and also pick a date range which populates this information to a calendar using CalendarView. There is conditioning set up that prevents a user from selecting the same option with overlapping dates as another user with that option. My question is whether it is possible for each unique option (1 through 5) to be added to the calendar with a different color for easy differentiation.

I have been able to target CSS on an individual basis, once on the calendar, to change the background and border color for the entries, but I would like to have a way to display them on the calendar as separate colors.

Example: Option 1 is always Red, Option 2 is always Blue, Option 3 is Green etc.

Thanks for any assistance!

-Curtis

[Alex Medved _ConfiForms_ · Accepted solution]

Recreated your form

<ac:structured-macro ac:macro-id="7c751b88-ff22-4388-a1a0-283f5ed4bd84" ac:name="confiform" ac:schema-version="1">
<ac:parameter ac:name="formName">color</ac:parameter>
<ac:rich-text-body>
<p>
<ac:structured-macro ac:macro-id="984bbb99-2410-4510-b8bb-0d33b30d51b9" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">firstName</ac:parameter>
<ac:parameter ac:name="fieldLabel">First name</ac:parameter>
<ac:parameter ac:name="type">text</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="30f6a5e0-0d51-43d8-af68-8030f0a2eb9e" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">lastName</ac:parameter>
<ac:parameter ac:name="fieldLabel">Last name</ac:parameter>
<ac:parameter ac:name="type">text</ac:parameter>
</ac:structured-macro>
</p>
<ac:structured-macro ac:macro-id="29f367e6-b0e4-4674-a805-bef6a14c1fe9" ac:name="confiform-entry-register" ac:schema-version="1">
<ac:parameter ac:name="embedded">true</ac:parameter>
<ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
<ac:rich-text-body>
<p>
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
</ac:rich-text-body>
</ac:structured-macro>
<p>
<br/>
</p>
<p>Table</p>
<ac:structured-macro ac:macro-id="4777b671-1061-4f15-92f9-ff98a1ffc119" ac:name="confiform-table" ac:schema-version="1">
<ac:parameter ac:name="formName">color</ac:parameter>
<ac:rich-text-body>
<p>
<ac:structured-macro ac:macro-id="f954dd85-373a-4443-8ac2-690fae1381c4" ac:name="confiform-field" ac:schema-version="1">
<ac:parameter ac:name="fieldName">firstName</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="58af4a20-4ea1-4b0b-89ad-603808e56c80" ac:name="confiform-field" ac:schema-version="1">
<ac:parameter ac:name="fieldName">lastName</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="e23d8bf7-c154-4e33-98e2-674e88839d96" ac:name="confiform-field-css" ac:schema-version="1">
<ac:parameter ac:name="condition">firstName:Curtis*</ac:parameter>
<ac:parameter ac:name="css">color:red;</ac:parameter>
<ac:parameter ac:name="fieldName">firstName</ac:parameter>
</ac:structured-macro>
</p>
</ac:rich-text-body>
</ac:structured-macro>

Here is the result I see

[Curtis Freudigmann]

Thank you so much for taking the time to help me with this Alex,

The only thing I had different was in the TableView CSS rule I had !important in this and it wasnt a CalendarView.

Now using this same exact method, I want to apply the CSS to a CalendarView for my entries or the 'Events'

I should be able to just pick which field to check. And then if that condition is matched, I can use the CSS rules macro to change what the entry or Event will look like on my calendar. Using exactly as I did in the table, only now entering !important in there, I do not see any CSS on the CalendarView. (I also had to add a new Date field for the grouping field)

[Alex Medved _ConfiForms_]

The only difference when applying on CalendarViews is that you shall set the field name to apply to be the field name used for grouping the entries, and the style shall contain !important, as CalendarView styles for items are very "aggressive"

[Curtis Freudigmann]

Thanks Alex, I was using the grouping field and the other two fields in the apply to area. i changed this to only the grouping field and now it works. I was very close and really appreciate your tireless assistance

-Curtis

[Michael Küng]

Hey everybody,

I  am still fighting with this ;)

Is there any reason why this wont work if I consider all necessary points? Unfortunately the entry is blue the whole time....

<p class="auto-cursor-target">
<br/>
</p>
<ac:structured-macro ac:macro-id="eb0fae94-1b61-4843-b051-5752ba971422" ac:name="confiform-entry-register" ac:schema-version="1">
<ac:parameter ac:name="formName">calendar</ac:parameter>
<ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
<ac:rich-text-body>
<p>
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p class="auto-cursor-target">
<br/>
</p>
<ac:structured-macro ac:macro-id="870f8753-bcb2-4cd8-8b80-eacdb2aa99ca" ac:name="confiform-calendar" ac:schema-version="1">
<ac:parameter ac:name="groupingFieldName">date</ac:parameter>
<ac:parameter ac:name="formName">calendar</ac:parameter>
<ac:rich-text-body>
<p>
<ac:structured-macro ac:macro-id="098a498e-237a-4806-ac1c-b7cbcb0ccdc1" ac:name="confiform-field-css" ac:schema-version="1">
<ac:parameter ac:name="condition">type:Holiday</ac:parameter>
<ac:parameter ac:name="css">background:green; !important;</ac:parameter>
<ac:parameter ac:name="fieldName">date</ac:parameter>
</ac:structured-macro>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p class="auto-cursor-target">
<br/>
</p>
<ac:structured-macro ac:macro-id="d06421e1-d53b-4082-803e-faa7e2f79b0b" ac:name="confiform" ac:schema-version="1">
<ac:parameter ac:name="formName">calendar</ac:parameter>
<ac:rich-text-body>
<p>
<ac:structured-macro ac:macro-id="48f53be9-13f0-45c4-8ba7-85f6ea2d54a2" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">user</ac:parameter>
<ac:parameter ac:name="fieldLabel">Name</ac:parameter>
<ac:parameter ac:name="type">text</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="e7d35bf5-5b1b-47de-97b9-143f64e3b899" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">type</ac:parameter>
<ac:parameter ac:name="fieldLabel">Type</ac:parameter>
<ac:parameter ac:name="values">false[Holiday=Holiday|]</ac:parameter>
<ac:parameter ac:name="extras">label;false</ac:parameter>
<ac:parameter ac:name="type">select</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="09794563-71d0-4fe8-9cff-08c18897a1b1" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">date</ac:parameter>
<ac:parameter ac:name="fieldLabel">Date</ac:parameter>
<ac:parameter ac:name="values">0</ac:parameter>
<ac:parameter ac:name="type">datetimeinterval</ac:parameter>
</ac:structured-macro>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p class="auto-cursor-target">
<br/>
</p>
<p class="auto-cursor-target">
<br/>
</p>

[Alex Medved _ConfiForms_]

Your CSS is a bit incorrect. It should be

background:green !important;

No ; between green and !important. As "!important" is an instruction for the background:green, not a separate style

[Michael Küng]

Hey Alex,

Thank you so much! My fault, I didn't recognize that!

Have a nice day!

[Alex Medved _ConfiForms_ · Accepted solution]

Yes, you can customize the CSS of a calendar entry like in any other view in ConfiForms, by using the ConfiForms CSS Rules for Fields - see https://wiki.vertuna.com/display/CONFIFORMS/Visual+customisations+in+ConfiForms+views+based+on+the+data+stored+in+the+fields

[Curtis Freudigmann]

Hey Alex, thanks for the response. I have tried using the CSS Rules for Fields and have tried to match up what I have with the given example. I am unable to get my CSS to apply to a tableview or calendarview.

I have my form which displays the entries to the table and to the calendar correctly. I can add the CSS Rule for Field and I enter the field i want and add a condition like myField:*1 to match anything in that field that ends with the number 1. And if it does match to change the background color to green.

I could provide storage format if necessary.

[Alex Medved _ConfiForms_]

Well, please have look at the page I have shared with you and see what YOU are missing. The example shows you where to put the macro and where to write the CSS (also, it tells you that !important is required when you work with CalendarView entries)

[Curtis Freudigmann]

Yes Alex I have viewed this page and I was already using the !Important.. I even built a brand new form and TableView to try and get this to work. I believe to have this set up nearly the same as the example. (The only difference I see is the naming of macros.. which I believe have changed over time.

Please view screenshots

This screenshot shows how I have the form set up.

This screenshot shows how I have the Rules set up.

This screenshot shows the page with no CSS applied.

Thanks for your time!

-Curtis