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

Comments in FileMaker Calendar

Highlight Notes and Comments in Your Calendar

Inline Notes in DayBack Calendar The latest DayBack extension adds an icon to your events when there is a comment present that matches your criteria. You can

Closed Through the New Year

SeedCode is closed for our holiday break from December 19th through the end of the year. We’ll have folks available in case of emergencies and

COMPANY

FOLLOW ALONG

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

© 2023 SeedCode, Inc.