Formula for coloring duration bar on calendar?

  • 0
  • 2
  • Question
  • Updated 1 year ago
  • Answered
I have searched for this but have not found any up to date information...

I have tried using different formula fields:

If([Project Name]="Boiler Removal","<span style=\"background-color:#3399ff\">"  & "Boiler Removal"& "</span>",


[Project Name]="Thames Ship","<div style=\"background-color:green;\">Thames Shipyard", .....

BOTH seem to work... but only to highlight the first day in the calendar...followed by the blue highlighted line, making my calendar very hard to understand!

It seems people have figured out how to fix this but I can't get it to work... 

Any suggestions? 
Photo of Amanda


  • 10 Points

Posted 3 years ago

  • 0
  • 2
Photo of Matthew Neil

Matthew Neil

  • 31,698 Points 20k badge 2x thumb
Native QB Calendars are pretty limited.  A few Developers have made add on Calendars that work with your app.

If you are still looking for a solution I can send you some screen shots.
We have a Google-esque Calendar and a Custom Gantt Chart tool as well. 

A lot of options out there to take you app to the next level.
Here are my notes about the best i figured out with coloring a calendar.:


I just thought I would post this answer to an old question as I needed to figure it out for a client.

Ensure that the calendar is showing a link to the entry and not just “text”

While coloring the background did not work for me (it cause strange extra line breaks), and coloring just the font sort of worked, but then the additional fields that listed did not render properly and caused extra line breaks, this did work for me.

I created my own concatenated field of the three fields which I wanted to show in the calendar and just listed this one concatenated / colored field.  My goal here was to color the Hourly warehouse staff in a different color from the other Salaried staff.

var text NameDaysReason =
List(" | ", [Common Name & Initial],ToText([# Days]),[Reason]);

If([H S D]="H", "<b><font color = #A52A2A>" & $NameDaysReason & "</font color></b>", $NameDaysReason)

var text TextBlock=
List(" | ", 
"<b>" & If([Start Time]<ToTimeOfDay ("10:00 am"),"0") & ToText([Start Time]) & "</b>", 
[Physician : Location : Report Type],
[Patient Name / Available]);

Begins([Appointment Status],"No Show"),"<font color = red>",
Begins([Appointment Status],"Cancel"),"<font color = red>",

[Patient Name / Available]="Available","<font color = green>") & $TextBlock
Photo of Robert


  • 210 Points 100 badge 2x thumb
Is this still the best option Quickbase has to offer here?  Before update there were color duration bars in the Calendar (although broken bars at times), now only entry on beginning day and ending day...

Thanks - Robert
Photo of Evan Martinez

Evan Martinez, Community Manager

  • 12,368 Points 10k badge 2x thumb
Hi Robert,

It is possible to color not just the beginning and ending day of an event but the entire event entry on a calendar. You would do this using the option within the calendar report settings for Color-Coding. Once you check that checkbox you can create a formula to colorize your calendar to reflect certain criteria. For example all projects in progress should be green, all projects delayed should be yellow, etc. That way the full entry will be colorized. You would use a formula like the one below to set your conditions for each color of the calendar. 
var Text Status=[Status];
If($Source="Under Review", "#347235",
If($Source="In Progress","#CA226B",
If($Source="On Hold", "#FF8C69",
If($Status="Planning Stage", "#8E388E",
If($Status="Completed", "#76EEC6",
If($Status="Cancelled", "#77BFC7"
This way the end result gets you a calendar where the full entry is colored matching your coding. Is this roughly what you were looking to accomplish?