Event Styles & Icons

You can style your events using global CSS rules and inline styles to customize their display. You can also combine both strategies to apply CSS classes based on specific values. If you want to add icons for specific resources, explore styling resources.

Below are examples showcasing various options, starting with the simplest: using inline styles. Each example builds on the previous one.

The Basics: Adding inline styles to your field formatting

For example, to make text bold, you would use:

<dbk-css style="font-weight: bold;>some field</dbk-css>

Example in DayBack's Field Mapping:

The screenshot below shows his style applied to around the Customer Name field (Who.Name ):

Here's the result in the calendar:

Combining Multiple Inline Styles:

You can add multiple inline styles to a field. For instance, to make the customer name bold, blue, and increase the font size, you would use:

<dbk-css style="font-weight:bold; color:blue; font-size: 1.4em;">Who.Name</dbk-css>

Here's how this would look in your field mapping:

Here's the result in the calendar:

While these examples show how to add various styles and colors, remember to use styling judiciously to maintain a clean and readable calendar.

Rather than adding all your styles inline, you can assign a class in the field mapping and then apply your styling in DayBack's CSS settings. This method is often more intuitive and organized. Here's a quick overview if you're new to working with CSS in DayBack.

Here's an example of making an event name bold using a class and CSS.

First, add a class name to the field in the mapping section. For instance:

<dbk-css class="my_name">Who.Name</dbk-css>

Next, go to DayBack's CSS settings and define the class attributes. Here's an example:

.my_name {
   font-weight: bold;
}

How this will look in your field mapping:

How this will look in your CSS config:

What you'll see in the calendar:

Using classes can offer more flexibility and organization compared to inline styles. With CSS, you can create view-specific styles since events are already wrapped in a class describing the view. Additionally, you can use the :before attribute to add icons to your classes. This strategy is described further below.

You can use field values as class names to apply specific styles. For instance, if you want the event status to be displayed in red if it's marked as "Refund", you can add the following to the display field in your field mapping:

<dbk-css class="statusName-Dbk_Status__c">Dbk_Status__c</dbk-css>

In this example, we startour CSS class name with the prefix "statusName- " and follow it with the variable name containing the value of our status field. At run time, DayBack will recognize Dbk_Status__c as one of your field names, and will replace it with the field's value , in this case "Refund".

The following output represents how DayBack converts your <dbk-css> definitions to <div> elements at runtime:

<div class="statusName-Refund">Refund</div>

You can now style your dynamically-generated class name .statusName-Refund using CSS:

.statusName-Refund {
   color: red;
}

What you'll see on the calendar:

You can add colors for all of your statuses, or just the ones you want to color:

.statusName-Refund { color: red; }
.statusName-Pending { color: green; }
.statusName-Complete { color: blue; }
.statusName-Cancelled { color: gray; }

What's great about CSS is that you can nest your styling strategies. For example, if you want all status names bold, regardless of having a specific color by status, you can change your field mapping definition to include a parent class name before your dynamically-generated, status-specific class name:

<dbk-css class="statusNames statusName-Dbk_Status__c">Dbk_Status__c</dbk-css>

By adding a parent class .statusNames before your status-specific class names, you can now style statuses as a group and individually:

/* Applies to all status names */
.statusNames { font-weight: bold; }

/* Applies to specific status names */
.statusName-Refund { color: red; }
.statusName-Pending { color: green; }
.statusName-Complete { color: blue; }
.statusName-Cancelled { color: gray; }

Special Considerations and Best Practices

• Namespace Your Classes:
  • We recommend you prefix all of your class names (e.g., myFieldPrefix- ) to avoid conflicts with existing DayBack classes. This is particularly important if you are using field values as class names, and the value of a field resolves to a number.
  • For example: Say you have a field named Priority__c that contains a value 1, 2, or 3. If you don't use a prefix in your <dbk-css>definition, the resulting class name would be .3 { }. Unfortunately, you cannot style a class that starts with a number. However, you can style a class that contains a number if you add a prefix such as priority- in your <dbk-css> definition. A prefix will create a valid class name .priority-3 { } .
• Case Sensitivity:
  • CSS class names are case-sensitive and should be a single word. For example, the resource name "Bill Smith" will be interpreted as two classes ("Bill" and "Smith"). To target this in CSS, write .Bill.Smith {...} without spaces.
• Special Characters:
  • If your field value contains special characters, escape them in CSS. For example, "Retail & Wholesale Trade" becomes Retail.\&.Wholesale.Trade .

By following these steps, you can efficiently style your events using CSS classes in DayBack. This approach provides more flexibility and keeps your styling organized.

Please review the prior section on styling events using field values before following the instructions in this section. Using the .statusCode-Refund class example from above, you can enhance your event styling by adding icons with the :before attribute. Learn more about before attributes.

1. Content Attribute:

In the example below, the content attribute specifies what to add "before" the classed word "Refund". You can add literal text, images, or a Font Awesome icon.

2. Font Awesome Icons:

To add a Font Awesome icon, use its Unicode name. For example, the warning triangle icon's Unicode is  , but you only need the part starting with "f ". You can find a complete list of icons and their names on the Font Awesome cheatsheet. Note that DayBack supports up to Font Awesome version 4.6.2, so newer icons may not work.

Example CSS:

.statusCode-Refund {
   color: red;
}
.statusCode-Refund::before {
   font-family: FontAwesome;
   content: "\f071"; /* Unicode for the warning triangle icon */
   padding-right: 3px;
   font-size: 1.3em;
   color: red;
}

Here's how this will look in the calendar:

The strategy for adding multiple icons just builds on the prior strategy. Say you have three fields:

• Priority__c - Contains three possible values: 1, 2, 3
• Team__c - Contains three possible values: A, B, C
• CaseType__c - Contains three possible values: "Installation", "Troubleshoot", "Checkin"

Say you only want to add icons for priority "2" and "3" items, individuals icons for each Team, and an icon for "Troubleshoot" cases only. You can design your display field as follows:

<dbk-css class="iconPriority-Priority__c"></dbk-css>,
<dbk-css class="iconTeam-Team__c"></dbk-css>,
<dbk-css class="iconCaseType-CaseType__c"></dbk-css>

This effectively creates the following potential class names at run time:

.iconPriority-1 
.iconPriority-2 { ... }
.iconPriority-3 { ... }

.iconTeam-A { ... }
.iconTeam-B { ... }
.iconTeam-C { ... }

.iconCaseType-Installation { ... }
.iconCaseType-Troubleshoot { ... }
.iconCaseType-Checkin { ... }

Since we only want to add icons for some of them, we don't have to add all of them to our CSS configuration. Using the above class names you can now assign the appropriate Font Awesome icon code and color for just the icons you are interested in displaying. Use the previous .statusCode-Refund CSS example to describe each of your icons accordingly.

You can also use any image URL as an icon. While you can specify the image URL as "content" in CSS, this method doesn't allow resizing and may look blurry on retina screens. Instead, use a background image for better control over sizing.

Example with Background Image:

.mySalesforceIcon::before {
   content: ' ';
   background: url(https://dayback.com/wp-content/uploads/2022/04/SFfavicon2.png);
   float: inline-start;
   background-size: 24px 24px;
   display: inline-block;
   width: 24px;
   height: 24px;
   margin-top: 4px;
   margin-left: -28px;
}

By following these steps, you can effectively enhance your event styling in DayBack with icons, whether using Font Awesome or custom images.

You can add icons directly to your field mapping without needing to use the Unicode name, unless you're working with the :before attribute in CSS. Simply use the English name of the icon from the Font Awesome cheatsheet. However, this method will apply the icon to all events in the specified field.

1. Select the Icon:
   • Choose an icon from the Font Awesome cheatsheet using its English name.
   • fa-warning will appear as
2. Add to Field Mapping:
   • Include the icon's name , allong with the fa generic FontAwesome class in your field mapping.

Here's the resulting configuration within your field mapping:

<dbk-css class="fa fa-warning" style="color:red; font-size: 1.2em; padding-right: 3px">Dbk_Status__c</dbk-css>

In this example, your resources are people, and you want to identify which person (or team leader) is assigned to an event. The event color indicates the item's status, so you will use an icon to represent the person or team leader. This approach allows you to have two distinct colors: one for the event status and one for the assigned person.

Here's how to achieve this:

1. Assign a Class:

• In the field mapping, assign a class with the same name as the person (the event owner in this example).

2. Style and Color in CSS:

• Use CSS to style and color each person differently based on their class.

In this example, the icon will be added before the event's Subject using the Owner.Name as the class name around Subject field. We also prefixed this class name with person- to group dynamically-generated Owner.Name class names together:

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

This will result in class names like .person-Beth.Reynolds and .person-James.Woolsey . You can add icons using the same :before methods described above. See the screenshots below for how this will look in your configuration and within the calendar:

Here's an example that highlights any events with the status of "Vacation." It uses a :before class to create a virtual block that fills the entire contents of the event box boundary. The font size is also changed, and a gradient background is applied to highlight the event. The CSS for this type of change can be lengthy, but you can copy gradient backgrounds directly from CSS gradient generators like ColorZilla. While this may not be a practical example for everyday use, it showcases the types of customizations you can achieve using CSS.

.Vacation {
  font-size: 2.2em;
  color: white;
}
.Vacation::before {
   content: ' ';
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
   font-size: 1.2em;
   /* Gradient from colorzilla.com */
   background: linear-gradient(to bottom, #b4e391 0%,#61c419 50%,#b4e391 100%);
}

This CSS snippet creates a background for events with the status "Vacation," making them stand out with a gradient effect. Adjust the gradient colors and font size as needed to fit your preferences.

DayBack automatically uses a line feed character as the separator where space allows in your event display. However, if you want more control over where these line feeds appear, you can add a special class for a line feed character and incorporate it into your display calculation. Here’s how to do it:

Step 1: Add a Custom CSS Class

Add the following custom CSS class to your stylesheet:

.line-feed::before {
   content: '\a';
   white-space: pre-wrap;
}
.fc-view-basicHorizon .line-feed::before {
   content: ' | ';
   white-space: nowrap;
}

The exception for Horizon View ensures events are displayed on a single line. If you prefer a different separator than a pipe (| ), modify content: ' | '; to use your desired separator, such as content: ' ; '; for example.

Step 2: Apply the Line-Feed Class in Your Display Calculation

By applying the line-feed class in your Display Calculation, you can control the placement of line feeds in your event display, ensuring that each value appears on a new line where you want it. Note that the line feeds must appear before the value:

<dbk-css style="font-style:italic">Subject</dbk-css><dbk-css class="line-feed">Description</dbk-css><dbk-css class="line-feed">Status</dbk-css>

Here's how this appear in the calendar:

Need help making your own styling changes? Get in touch; we're here to help.