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.

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.

See how field mapping just names the class but the CSS file gives 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: next.
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.


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".

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.


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

Still need help? Message Us Message Us