• Skip to main content
  • Skip to primary sidebar

DayBack

The Calendar You've Been Waiting For

  • Calendar
    • For Salesforce
      • DayBack Calendar for Salesforce
      • Field Service
      • Calendar Sharing in Salesforce
    • FileMaker Calendar
    • For Google Calendar
    • For Google Sheets
    • For Microsoft 365
    • For Basecamp
    • Integrations
  • Extensions
  • Pricing
  • Blog
  • Support
    • Support Options
    • Documentation
    • Documentation for DayBack Classic (older)
    • Implementation Packages
  • Contact
    • Our Mission
    • Team & Community
    • Careers
    • Contact Us
    • +1 (855) 733-3263
  • Timelines
    • Overview
    • History of the polio vaccine
    • Women’s Suffrage
    • Science Fiction
    • Your Vote in Context: the 2020 US Elections
    • History of Claris FileMaker
  • Sign In

Mar 06 2020

Color Coding by Resource

By default, DayBack color-codes your events by their status: more precisely, by whatever you’ve mapped to the status field. Coloring by status makes sense since many of DayBack’s scheduling views already put events into their own columns or rows by resources.

But if you’d like to add a second color for the event’s resource, you can do that by changing the event styling in DayBack to add a second color.

In this example, we’ll add a frame around each event where the frame’s color corresponds to the event’s resource. (Note that the technique used here will let you base the frame on the contents of any field, not just resource.)

Color Salesforce Events by Resource

If you don’t like the frames’ width or colors, you can change that in the CSS the follows below. 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.

Add A Second Color to Your Calendar

Begin by changing the way your event title is mapped in DayBack. Click the gear next to the calendar you’re interested in and find the event display field. Then add this string at the beginning of the display section. Note that where it says “Owner.Name” you can replace that with any other field you’ve mapped elsewhere on the page.

Here’s the text we pasted into the front of the display field…

<dbk-css class="Owner.Name"></dbk-css>


That dbk-css string creates a class using the resource name of your event. Once you have a class with the resource name, add the following CSS to DayBack and you’ll see a colored frame for each resource. A few things to keep in mind:

  • You’ll want to create specific CSS for each resource: you’ll see three resources in the CSS below, following /* Resource Name 1 */ and then /* Resource Name 2 */, etc.
  • If your resource name has more than one word, like “Beth Reynolds”, you’ll replace that space with a period in the CSS, so Beth Reynolds becomes Beth.Reynolds

Here’s some example CSS with 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 */

That’s it! Please get in touch if y have questions about adding colors or styling your calendar. You should be able to understand your calendar at a glance, and we’re here to help.

Written by John Sindelar · Categorized: New Features · Tagged: For Developers, Resource scheduling

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Search

Latest Posts

  • Memory is Making
  • Add Notes and Comments to Events
  • Closed Through the New Year
  • Background Gradients on Horizon View
  • Cut and Paste Rescheduling

Pinned Posts

  • Scarcity: the Science of Resource Scheduling
  • Calendars Tell Stories
  • Time Shame – Plan Your Day Like a Road Trip
  • We Can’t See Late
  • You’re Calendar’s Not a Poster

  • Facebook
  • Instagram
  • LinkedIn
  • Twitter
  • Vimeo

© SeedCode, Inc. 2013–2023
+1 (855) 733-3263
who shot this?

X

View Details
Keep me informed
Which calendar sources interest you?
Interested in a calendar source we haven't listed? Have a question for us? Please let us know.
Loading