Event Styles & Icons

The new styling feature lets you use inline styles or CSS to change the way events are displayed in the calendar. You can even combine both to bring CSS classes into effect when certain values are present. (If you're looking to add icons for resources, you might also check out styling resources.)

Note: These docs use our Salesforce and Google calendar sources as examples. To apply event styles for your FileMaker calendar source, you'll add the same kinds of CSS and styles directly to the DBk_EventSummaryCalc field in your FileMaker database.

The examples below show a number of the options available, starting with the simplest: using inline styles. Each example builds on the one before it.

Examples


The Basics: Adding inline styles to your field formatting

The simplest way to style text is to wrap a whole field in an inline style. The tag for this is <dbk-css> and you use it like the span tag in html, adding the style attribute. So, to make some text bold we'd use <dbk-css style="font-weight: bold;">some field</dbk-css>.

Here's what that looks like in DayBack's field mapping:

And here's what you'd see on the calendar: all the related contact names are bold.

You can have many inline styles, one after another. Here's an example of also making the customer name blue and then increasing the font size:

We hope these examples are helpful, but remember, just because you can add lots of styles and colors... doesn't mean you should ;-)

Adding a class instead of inline styles (then styling in CSS)

You don't have to add all your styles inline and you may find it more intuitive to just assign a class in field mapping and then do your styling in DayBack's CSS. (If you haven't worked with CSS in DayBack before, here's a  quick overview.)
So here's what our bold name example looks like if it were done in with a class and CSS instead. The first screenshot is your field mapping and the second is editing DayBack's CSS.

In field mapping, we name the class.  Then in the CSS file, we give the class its attributes. We also namespaced the class with "my_". This isn't absolutely required but you wouldn't want your class name to be something already in use in DayBack, or you'd end up styling that object instead. 
This looks like a complicated way to style things except that you can do a lot more in CSS than you can in inline styles. For one thing, you can make your CSS view specific since events are already wrapped in a class describing the view. More importantly, you can use the "before" attribute to add icons.
You can also pass in a field as a class name. In this example, we'll show the event status in red if it's a refund, and leave it alone otherwise. Note that we're using a custom picklist field for status:

Note that class names in CSS (like ".Refund {...}") are case sensitive. The other thing to remember is that class names are always one word. So if you want to use something that's two words, like a resource name as your class, the CSS will actually pick that up as two words. Thus, if your resource name is "Bill Smith" that will become two classes" Bill and Smith, and to target that in CSS you'd use ".Bill.Smith {...}" with no space between them. You'll find an example of this in the "Color coding by resources" example below.

If your field value contains an ampersand or other special character, you'll want to escape it in CSS, so a field like "Retail & Wholesale Trade" would become  "Retail.\&.Wholesale.Trade"

Adding Icons Using Classes

Using the same "Refund" class above, we can expand on the CSS to add an icon using before:

Note the content attribute: this is the content you'll add "before" the classed word "refund". While you can add literal text as the content (as well as images), you can also use a Font Awesome icon for the warning triangle. The icon is specified using its Unicode name and you can find a complete list of icons and their names on the Font Awesome cheatsheet. (Some newer icons may not work as DayBack only supports through version 4.6.2.)

The full name of the icon is &#xf071, but you just need the part starting with the "f".

You aren't limited to FontAwesome icons for your styling; you can reference any image you have a URL for and bring it in as an icon. Note how the icon was specified as "content" in the CSS above. While you can do that with image URLs, the image has to be exactly the right size (you can't resize it) which often looks blurry on a retina screen. If you use a background image instead (still all in CSS) then you have some sizing control. Here is an example using a small Salesforce logo... 

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

Adding Icons Without Using Classes

Note that you don't need to use the Unicode name of the icon unless you're using "before" and CSS. You can just add the icon to your field mapping directly (notice how you can use the English name of the icon from the   Font Awesome cheatsheet). This will, of course do it for all events, whereas class names let you target individual events having that value or class.

Icon Example: color coding by people

In this example your resources are people and you'd like to see which person (or team leader) is assigned to an event. The event color is already being used for the status of the item, so you want to color the icon to be the color of the person/team assigned. This way you can have two colors: an event color for status and an icon color for the person.

The key here is to assign a class with the same name as the person: the event owner in this example. This way you can style each person differently. The class is assigned in field mapping and the style and color is done in CSS:

Changing the background of an event

Here's an example that will highlight any events that have the status of "Vacation":

Note that the CSS contains some pretty long descriptions of the gradient background. You can just copy and paste those from any of the online CSS gradient generators. Here's one: colorzilla.

Adding Line Feed Characters

DayBack automatically uses a line feed character as the separator where room allows in your event display. But, if you'd like to be more in control of where these line feeds are, you can add a special class for a line feed character, and add this to your display calc. Here's the custom CSS class to add:

/* Support for Line Feed Characters */
.line-feed::before {
	content: '\a';
	white-space: pre-wrap;
}
.fc-view-basicHorizon .line-feed::before {
	content: ' | ';
	white-space: nowrap;
}

We add an exception for Horizon View, as these events are never more than one line. Remember, you're overriding DayBack's built-in separator functionality here, so you need to control how you want it to look. So, if you don't want to use a pipe for your separator, change content: ' | '; to use the separator of your choice, like ' ; '.

To use this in your display calculation, add the custom line-feed class on whichever values you'd like to be on a new line. Keep in mind that the line feed will be 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>


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

Related Articles