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

Improved Resource Selection

We’ve made some big changes to how you filter and assign resources when editing events in DayBack. These changes will make it much easier to

Suggesting Appointment Slots

Show Available Slots that Match Multiple Criteria Schedulers often look for gaps in their schedules to find the open resources for each opportunity. But sometimes,

Introducing Draft Settings Mode

Following up on this idea that people stretch themselves when they feel a little safer, we’ve been very focused on the customization experience for DayBack

New Longer Timescales for DayBack

Resource Scheduling Swimlanes You can now extend the pivoted scheduling view in DayBack to show items by week instead of solely by day. This lets



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

© 2024 SeedCode, Inc.