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