It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Is it possible to color code my CalendarView entries? Edited

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

2 answers

2 accepted

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

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.

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)

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.

formTable.PNG

 

This screenshot shows how I have the Rules set up.cssRules.PNG

 

This screenshot shows the page with no CSS applied.

noCSS.PNG

Thanks for your time!

-Curtis

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

 

Screenshot 2019-06-10 at 23.51.18.png

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)

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"

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

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>

 

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

Like Michael Küng likes this

Hey Alex,

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

Have a nice day!

Suggest an answer

Log in or Sign up to answer
Community showcase
Published in Confluence

2019: All Wrap(ped) Up Like a Present

Hindsight might be 2020 but looking back, a lot of cool new features rolled out in 2019. From new collaboration and organizational powers to fresh templates and handy integrations, it’s been quite th...

50,360 views 90 97
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you