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.

Assign a Class Name in the Field Mapping Section:

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

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

Define the Class Attributes in the CSS Settings:

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:

Benefits of Using Classes

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 do the following:

Field Mapping:

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

At run time, DayBack will recognize Dbk_Status__c as one of your field names, and will replace it the field's value , in this case "Refund". This is how this will be interpreted at runtime:

<dbk-css class="Refund">Refund</dbk-css>

You can now style the .Refund class using CSS.

CSS Settings:

.Refund {
   color: red;
}

What you'll see on the calendar:

Special Considerations

• Namespace Your Classes:
  • Prefix your class names (e.g., my_ ) to avoid conflicts with existing DayBack classes.
• 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.

Using the .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:

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

Using Other Images:

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;
}

Here's how this will look in your CSS:

Here's how the icon will appear in the calendar:

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:

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

This will result in class names like .Beth.Reynolds and .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.