Add Icons and Colors to Your FileMaker Calendar

Here’s a beautiful example of adding additional color-coding options and icons to DayBack Calendar. This customer wanted to retain DayBack’s default color-coding for status but add another color–shown here as the header of the event–for color-coding by resource (salesperson, in this case). They also wanted some icons to highlight a few facts about the event. Icons show if the event can be moved or if there is bad weather present.

Icons for your FileMaker Calendar
Click for a larger version

Calendar Tooltips

You can get very creative with DayBack’s tooltips and use them to deliver all kinds of extra information about your events. In this case, we’ve added tooltips to the individual icons and to the event as a whole. The icon tooltips are done in DayBack’s DBk_EventSummaryCalc field (below) with the title attribute shown here:

“<dbk-css title=” & Quote ( “Weather” ) & ” class=” & Quote ( “WeatherFlag” ) & “> </dbk-css>”

This looks really cool in use:

Add This to Your Calendar

Since you have complete control over DayBack’s CSS, adding these colored headers and icons is pretty easy. For an introduction to editing DayBack’s CSS, look here: Calendar Themes. And you’ll find step-by-step instructions for adding icons here: Adding Styles and Colored Icons. Like those examples, the implementation above customizes DayBack’s DBk_EventSummaryCalc field to add CSS classes to your events. It then styles those classes by adding some new CSS to the DayBack theme. Here are the files you’ll need for this:

Example for your DBk_EventSummaryCalc: iconsandheadersSummaryCalc.txt

The CSS you’ll add to DayBack’s theme: iconsandheaders.css

If you have questions about this, trouble getting the CSS working, or would like help creating your own CSS, please get in touch. We’re here to help.

Featured Posts

Follow Along

Stay up to date with the latest news & examples from SeedCode

Leave a Reply

Your email address will not be published. Required fields are marked *

Check out some of our other posts ...

FileMaker Summer Camp – Recap

Unconference Sessions If you missed Pause in October, here’s a look at the sessions that attendees hosted. All the sessions are listed in this post

Subscribe to DayBack Updates & Status

Subscribe to DayBack’s latest features and example code at our new site: You’ll find new features and documentation, as well as the status and

DayBack Calendar in Claris Pro

DayBack for FileMaker 19 works great in Claris Pro with no changes required. The older DayBack Classic also works in Claris Pro, but requires a few changes.



Stay up to date with the latest news & examples from SeedCode

© 2023 SeedCode, Inc.