Color Coding by Resource or Custom Field

Here are two practical ways to add more meaningful color to your events in DayBack Calendar:

1. Add a secondary border color based on the event’s Resource
2. Change the event background color using a custom field 

How colors work by default

DayBack normally colors events by Status (specifically, whatever field you’ve mapped as Status). This works well because many scheduling views already separate events into rows or columns by Resource.

If you want to visually encode both Status and Resource, you can:

• Keep Status as the background color, and
• Add a second color (for example, a border) to represent the Resource.

Alternatively, you can override the background color entirely using a custom field that returns a color value.

Option 1 – Add a colored border based on Resource

This method adds a frame around each event. The frame color is determined by the event’s Resource (or any other field you choose).

If you don’t like the frames’ width or colors, you can change that in the CSS that follows. And if you’d like to see a completely different way to display a second color, check out this post where you’ll learn how to add a header-color to each event.

Step 1 — Modify the Event Display field

To add the custom border, open the calendar settings (gear icon) and find the Event Display Field. Add the following string at the beginning of the display value:

<dbk-css class="Owner.Name"></dbk-css>,[object Object],[object Object],[object Object],

• Owner.Name can be replaced with any field you want to use to determine the border color.
• This creates a CSS class on the event using the Resource name.

That dbk-css string creates a class using the resource name of your event.

Step 2 — Add CSS for each Resource

Once each event has a class matching its Resource name, you can target those classes with CSS.

Important rules:

• Create a CSS rule for each Resource.
• If a Resource name contains spaces (e.g., Beth Reynolds), replace spaces with periods in CSS:
  Beth.Reynolds

Add the following CSS to DayBack (adjust colors and border width as desired). This example creates styles for three resources: Beth Reynolds, James Woolsey, and Peter Samuels:

/* Resource Color Frame Customizations */

.fc-event-inner {
  margin-top: 2px;
  margin-right: 2px;
  margin-left: 2px;
}
.fc-event-draggable {
    padding-left: 0;
}
.fc-event-draggable .fc-event-time, .fc-event-draggable .fc-event-title {
    padding-left: 3px;
}
.fc-view-agendaDay .fc-event-time, .fc-view-agendaDay .fc-event-title, .fc-view-agendaWeek .fc-event-time, .fc-view-agendaWeek .fc-event-title, .fc-view-agendaResourceVert .fc-event-time, .fc-view-agendaResourceVert .fc-event-title, .fc-view-agendaResourceHor .fc-event-time, .fc-view-agendaResourceHor .fc-event-title {
    width: 96%;
    overflow: hidden;
}
.fc-event-vert.fc-event-end {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.fc-event-vert.fc-event-start {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* Resource Name 1 */
.Beth.Reynolds::before {
    position: absolute;
    left: 0;
    top: 0;
    content: ' ';
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: transparent;

/* Modify Border Color and Size here */
    border: 4px solid rgba(255, 70, 10, 1);

    /*border-radius: 4px;*/
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


/* Resource Name 2 */
.James.Woolsey::before {
    position: absolute;
    left: 0;
    top: 0;
    content: ' ';
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: transparent;

/* Modify Border Color and Size here */
    border: 4px solid rgba(33, 132, 234, 1);

    /*border-radius: 4px;*/
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* Resource Name 2 */
.Peter.Samuels::before {
    position: absolute;
    left: 0;
    top: 0;
    content: ' ';
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: transparent;

/* Modify Border Color and Size here */
    border: 4px solid rgba(0, 150, 100, 1);

    /*border-radius: 4px;*/
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* End Resource Color Frame Customizations */

You can adjust:

• Border width
• Border color
• Radius and spacing

This technique works with any field, not just Resources. That’s it!

Option 2 — Color the entire event using a Custom Field

If you want to replace the event’s background color entirely, the cleanest method is to use a custom field that contains a color code. Typically, this could be a Formula field that returns a valid CSS color.

Step 1 — Create a Formula Field

On your Event (or custom object), create a Formula field that returns a color value such as:

• Hex: #FF0000
• RGB: rgb(255,0,0)
• RGBA: rgb(255,0,0,0.7)

This formula can:

• Use hard-coded color logic, or
• Pull a color from a related record (for example, a Contact or Resource record with a Color field)

Step 2 — Map the field in DayBack

To tell DayBack about your custom field, simple add it to the field mapping for each of the Calendars where this strategy should apply. See our reference article on Field Mapping for more information.

When you add the custom field in the calendar, please mark it as “Read Only” and “Hide Field” so that this field can’t be accidentally changed by users.

Step 3 — Install a “Before Event Rendered” Event Action

Create a Before Event Rendered action in each calendar where this coloring should apply. This script checks for your custom field and applies its color before the event is drawn.

Please Download the Code and set it up as follows. Ensure to enable it for Editable, Read Only, and Shared Events, so that events are colored consistently for all events types.

Step 4 — Configure the Event Action

Edit the action to specify:

	// Define the Calendar Sources that should be
	// scanned for specific Custom Field values

	inputs.calendarToCheck = ['Events'];

	// Set the Custom Field that contains information
	// that can be used to style an Event. Set this to the
	// "Store in Field" name of your Custom Field

	inputs.eventColorCustomField = 'Event_Color__c';

	// If we find events where this Custom Field is defined,
	// we will set the event.color property to the value of the 
	// Custom Field, which will change the background color of 
	// the event on the calendar. You can use any valid CSS 
	// color value in your Custom Field, including hex codes 
	// (e.g. #FF0000), or rgb values (e.g. rgb(255,0,0)).

• Replace 'Events' with your calendar name(s) as a comma-delimited list
• Replace 'Event_Color__c' with your actual field API name

When this runs:

• If the field contains a color → the event uses it
• If the field is blank → DayBack falls back to Status color

This allows conditional coloring without breaking existing behavior.

Need a Different Strategy?

If you have questions about adding colors or styling your calendar, please get in touch. You should be able to understand your calendar at a glance, and we’re here to help.

When to use each method

Both approaches can be combined if needed.