nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Accepted answers

Alex Medved _ConfiForms_

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

Alex Medved _ConfiForms_

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

All comments

Alex Medved _ConfiForms_

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

Alex Medved _ConfiForms_

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

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

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

server

confluence-server

confiforms

calendar