The new styling feature lets you use FileMaker calcs or CSS to style events. You can even combine both to bring CSS classes into effect when the results of a calculation are true.
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.
The Basics: Adding Inline styles to your calculations
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 text</dbk-css>.
Here's what that looks like in your source table's "DBk_EventSummaryCalc" field, which is the calc you'll be editing whenever you want to style text in DayBack:
And here's what you'd see on the calendar: all the related contact names are bold.
Note that this could have been done inside the original "cont" variable, but we find it easier to declare the variable once for the content and again for the styling. You'll see that we also wrap the style definition itself in the Quote() function as we find that easier than trying to escape the quotes.
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 ;-)
Use FileMaker’s Substitute() function to style certain words when they appear
A variation on styling a specific field is to apply inline styles to just a work or phrase when it appears. Here we'll substitute the word "refund" for the word wrapped in an inline style:
Note that we did this further down in the calc so that it would apply to the word refund wherever it appeared, be that in the title or description.
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 the "DBk_EventSummaryCalc" field and then do your styling in DayBack's CSS file. (If you haven't worked with CSS in DayBack before, here's a quick overview.)
So here's what our red refund example looks like if it were done in with a class and CSS instead. The first screenshot is your "DBk_EventSummaryCalc" field and the second with the green text is DayBack's CSS file.
See how the calc just names the class but the CSS file gives the class its attributes. We also namespaced the class with "dbk_". 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. Actually, you should probably use a different prefix, like you own company name, so as to be absolutely sure you don't create a class that conflicts with something already in the calendar.
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. Most importantly, you can use the "before" attribute to add icons.
Using the same "DBk_EventSummaryCalc" as in the example above, you can change the CSS now 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 , but you just need the part starting with the "f".
Adding an Icon Without CSS
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 "DBk_EventSummaryCalc" like this (notice how you can use the english name of the icon from the Font Awesome cheatsheet).
Icon Example: color coding by resources
In this example your resources are trucks and you'd like to see which truck is assigned to a given delivery. The event color is already being used for the status of the delivery, so you want to color the icon to be the color of the truck assigned. This way you can have two colors: an event color for status and an icon color for the truck.
The key here is to assign a class with the same name as the truck. This way you can style each truck differently. The class is assigned in the "DBk_EventSummaryCalc" field and the styling is done in the DayBack's CSS file.
Note the substitution in "DBk_EventSummaryCalc": classes can't have spaces in them. You also want to be sure that you assign a class for each resource as DayBack will support multiple resources being assigned to an event. In that case, the resulting tab would look something like <dbk-css class="Truck_1 Jim_Smith"> with each class name separated by a space. That's what the substitution above does.
Icon Example: Unicode Emoji Characters
You can also take advantage of Unicode emoji characters in DayBack. This allows you to have more fancy icons in your event summaries. Just keep in mind that these emojis are limited to your browser's support for them. https://www.iemoji.com is a good resource for finding emojis, verifying they work in your browser, and getting the decimal and hexadecimal values for your code.
- FileMaker supports a limited number of unicode emoji characters. If the icon is evaluated correctly in FileMaker using the "Char" function with the icon's decimal value as a parameter, you can use that directly in your summary. For example "Char ( 9208)" will show the pause icon.
- If FileMaker doesn't support the character, you can add it to DayBack as a CSS class, using the hexadecimal value for the character.
Here are some screenshots showing both examples and the results in DayBack:
Changing the background color of an event
Here's an example that will style any events where the title contains the word "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.
Important Note on Smart Quotes:
Smart quotes (“ ”) are not compatible with CSS strings and will render the values invalid. When editing CSS themes in FileMaker, make sure to disable Smart Quotes (File Options -> Text -> Use smart quotes). Your opening and closing quotes should look identical in the editor (" ").