Event Styles
DayBackForFileMaker.EventStyles History
Hide minor edits - Show changes to markup
https://www.seedcode.com/rootimages/stikipad/dayback/css1code.png
https://www.seedcode.com/rootimages/stikipad/dayback/css1css.png
https://www.seedcode.com/rootimages/stikipad/dayback/refundscreen.png
https://archive.seedcode.com/rootimages/stikipad/dayback/css1code.png
https://archive.seedcode.com/rootimages/stikipad/dayback/css1css.png
https://archive.seedcode.com/rootimages/stikipad/dayback/refundscreen.png
https://www.seedcode.com/rootimages/stikipad/dayback/icon1code.png
https://www.seedcode.com/rootimages/stikipad/dayback/icon1screen.png
https://archive.seedcode.com/rootimages/stikipad/dayback/icon1code.png
https://archive.seedcode.com/rootimages/stikipad/dayback/icon1screen.png
https://www.seedcode.com/rootimages/stikipad/dayback/usenames.png
https://archive.seedcode.com/rootimages/stikipad/dayback/usenames.png
https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplecode.png
https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplecode2.png
https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplescreen.png
https://archive.seedcode.com/rootimages/stikipad/dayback/iconexamplecode.png
https://archive.seedcode.com/rootimages/stikipad/dayback/iconexamplecode2.png
https://archive.seedcode.com/rootimages/stikipad/dayback/iconexamplescreen.png
https://www.seedcode.com/rootimages/stikipad/dayback/emojiCalc.png
https://www.seedcode.com/rootimages/stikipad/dayback/emojiCSS.png
https://www.seedcode.com/rootimages/stikipad/dayback/emojiCalendar.png
https://archive.seedcode.com/rootimages/stikipad/dayback/emojiCalc.png
https://archive.seedcode.com/rootimages/stikipad/dayback/emojiCSS.png
https://archive.seedcode.com/rootimages/stikipad/dayback/emojiCalendar.png
https://www.seedcode.com/rootimages/stikipad/dayback/vacationcalc.png
https://www.seedcode.com/rootimages/stikipad/dayback/vacationcode.png
https://www.seedcode.com/rootimages/stikipad/dayback/vacationscreen.png
https://archive.seedcode.com/rootimages/stikipad/dayback/vacationcalc.png
https://archive.seedcode.com/rootimages/stikipad/dayback/vacationcode.png
https://archive.seedcode.com/rootimages/stikipad/dayback/vacationscreen.png
https://www.seedcode.com/wp-content/uploads/2017/12/StylingDetail2.png
https://archive.seedcode.com/wp-content/uploads/2017/12/StylingDetail2.png
https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc.png
https://archive.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc.png
https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png
https://archive.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png
https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc2.png
https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen2.png
https://archive.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc2.png
https://archive.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen2.png
https://www.seedcode.com/rootimages/stikipad/dayback/refundcalc.png
https://www.seedcode.com/rootimages/stikipad/dayback/refundscreen.png
https://archive.seedcode.com/rootimages/stikipad/dayback/refundcalc.png
https://archive.seedcode.com/rootimages/stikipad/dayback/refundscreen.png
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:
https://www.seedcode.com/rootimages/stikipad/dayback/emojiCalc.png
https://www.seedcode.com/rootimages/stikipad/dayback/emojiCSS.png
https://www.seedcode.com/rootimages/stikipad/dayback/emojiCalendar.png
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 (" ").
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.
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 (" ").
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).
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).
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 it's unicode name and you can find a complete list of icons and their names on the Font Awesome cheatsheet.
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.)
Here's what that looks like in DayBack's "DBk_EventSummaryCalc" field, which is the calc you'll be editing whenever you want to style text in DayBack:
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:
Important Note on Smart Quotes:
Important Note on Smart Quotes:
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 (" ").
Here's a example that will style any events where the title contains the word "vacation".
Here's an example that will style any events where the title contains the word "vacation".
We hope these examples are helpful, but remember. Just because you can add lots of styles and colors... doesn't mean you should ;-)
We hope these examples are helpful, but remember, just because you can add lots of styles and colors... doesn't mean you should ;-)
See how the calc just names the class but the CSS file gives the class its attributes. We also name spaced 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, of 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.
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.
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).
https://www.seedcode.com/rootimages/stikipad/dayback/usenames.png
https://www.seedcode.com/wp-content/uploads/2017/12/StylingDetail2.png
https://www.seedcode.com/wp-content/uploads/2017/12/StylingDetail2.png
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 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.
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.
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.
We hope these examples are helpful, but remember. Just because you _can_ add lots of styles and colors... doesn't mean you should ;-)
We hope these examples are helpful, but remember. Just because you can add lots of styles and colors... doesn't mean you should ;-)
You can have many inline styles, one after another. Here's an example of making the customer name blue as well and then increasing the font size:
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:
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: strong;">some text</dbk-css>.
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>.
The examples below show a number of the options available, starting with the simplest: using in line styles. Each example builds on the one before it.
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.
Code
Screenshot
https://www.seedcode.com/rootimages/stikipad/dayback/vacationcalc.png
https://www.seedcode.com/rootimages/stikipad/dayback/vacationcode.png
https://www.seedcode.com/rootimages/stikipad/dayback/vacationscreen.png
Adding Inline styles to your calculations
Into
Changing the background color of an event
Here's a example that will style any events where the title contains the word "vacation".
Notes
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.
Code
Screenshot
Note
https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplecode.png
https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplecode2.png
https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplescreen.png
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: colored truck for each of your 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.
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.
Notes
Note
Icon Example: colored truck for each of your resources
The Basics: Adding Inline styles to your calculations
Use FileMaker’s Substitute() function to style certain words when they appear
The Basics: Adding Inline styles to your calculations
The Basics: Adding Inline styles to your calculations
Use FileMaker’s Substitute() function to style certain words when they appear
Use FileMaker’s Substitute() function to style certain words when they appear
Icon Example: colored truck for each of your 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.
Code
Screenshot
Notes
Into
Code
Screenshot
Notes
Using the same "DBk_EventSummaryCalc" as in the example above, you can change the CSS now to add an icon using before.
https://www.seedcode.com/rootimages/stikipad/dayback/icon1code.png
https://www.seedcode.com/rootimages/stikipad/dayback/icon1screen.png
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 it's unicode name and you can find a complete list of icons and their names on the Font Awesome cheatsheet.
The full name of the icon is , but you just need the part starting with the "f".
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.
https://www.seedcode.com/rootimages/stikipad/dayback/css1code.png
https://www.seedcode.com/rootimages/stikipad/dayback/css1css.png
https://www.seedcode.com/rootimages/stikipad/dayback/refundscreen.png
See how the calc just names the class but the CSS file gives the class its attributes. We also name spaced 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, of 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.
Adding icons
Into
Code
Screenshot
Notes
A variation on styling a specific field is to apply inline styles to just a work or phrase when it appears:
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:
Notes
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.
The examples below show a number of the options available, starting with the simplest: using in line styles.
The examples below show a number of the options available, starting with the simplest: using in line styles. Each example builds on the one before it.
https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png
https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png
Adding Inline styles to your calculations
Into
Code
Screenshot
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:
https://www.seedcode.com/rootimages/stikipad/dayback/refundcalc.png
https://www.seedcode.com/rootimages/stikipad/dayback/refundscreen.png
Adding Inline styles to your calculations
The Basics: Adding Inline styles to your calculations
https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png
https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png
https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen2.png
https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen2.png
https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png
https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png
Code
https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc.png
Screenshot
https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png
Code
Screen
https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc2.png
https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen2.png
Notes
Notes
The examples below show a number of the options available, starting with the simplest: using FileMaker's built in text styling functions.
Using FileMaker's own Text Styling Functions
Into
Screenshot
The examples below show a number of the options available, starting with the simplest: using in line styles.
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: strong;">some text</dbk-css>.
Here's what that looks like in DayBack's "DBk_EventSummaryCalc" field, which is the calc you'll be editing whenever you want to style text in DayBack:
Notes
And here's what you'd see on the calendar: all the related contact names are bold.
Screenshot
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 making the customer name blue as well and then increasing the font size:
Code
Screen
We hope these examples are helpful, but remember. Just because you _can_ add lots of styles and colors... doesn't mean you should ;-)
Adding Inline styles to your calculations
Into
Code
Screenshot
Notes
Adding Inline styles to your calculations
Into
Code
Screenshot
Notes
Coming soon!
Coming soon!
https://www.seedcode.com/wp-content/uploads/2017/12/StylingDetail2.png
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 FileMaker's built in text styling functions.
Using FileMaker's own Text Styling Functions
Into
Screenshot
Code
Notes