By default, DayBack color-codes your events by their status: more precisely, by whatever you’ve mapped to the status field. Coloring by status makes sense since many of DayBack’s scheduling views already put events into their own columns or rows by resources.

But if you’d like to add a second color for the event’s resource, you can do that by changing the event styling in DayBack to add a second color.

In this example, we’ll add a frame around each event where the frame’s color corresponds to the event’s resource. (Note that the technique used here will let you base the frame on the contents of any field, not just resource.)

FileMaker Calendar Color Coding

If you don’t like the frames’ width or colors, you can change that in the CSS the follows below. And if you’d like to see a completely different way to display a second color, check out this post where you’ll learn how to add a header-color to each event.

Add A Second Color to Your Calendar

Begin by changing the way your event title is mapped in DayBack. Edit the definition of the field “DBk_EventSummaryCalc” in your events table, adding this string at the very beginning of that field:

<dbk-css class=”ResourceName”></dbk-css>

Where “ResourceName” is the contents of the field you mapped to your resource in DayBack’s source layout. The string above shows what your calculation should evaluate as; in FileMaker’s calc dialog, you’ll actually add a calculation like this in front of your existing DBk_EventSummaryCalc…

“<dbk-css class=” & Quote ( YourResourceField ) & “></dbk-css>” &

That dbk-css string creates a class using the resource name of your event. Once you have a class with the resource name, add the following CSS to DayBack and you’ll see a colored frame for each resource. If you haven’t changed DayBack’s CSS before, here’s an overview (be sure to click through to the section on editing themes).

A few things to keep in mind:

  • You’ll want to create specific CSS for each resource: you’ll see three resources in the CSS below, following /* Resource Name 1 */ and then /* Resource Name 2 */, etc.
  • If your resource name has more than one word, like “Beth Reynolds”, you’ll replace that space with a period in the CSS, so Beth Reynolds becomes Beth.Reynolds

Here are some example CSS styles to create colored frames for three resources: Beth Reynolds, James Woolsey, and Peter Samuels…

That’s it! Big thanks to KC Embrey who worked out the CSS for this mod.

Please get in touch if y have questions about adding colors or styling your calendar. You should be able to understand your calendar at a glance, and we’re here to help.

 

Tagged with →  

4 Responses to Color Coding Your FileMaker Calendar by Resource

  1. I would like to now how is fonction? my English is not very good for understand

    • KC Embrey says:

      Salut Richard,

      Traduit à l’aide de Google Translate:

      Désolé pour la réponse tardive. Votre anglais est bien meilleur que mon français, mais je pense que l’article devrait se traduire assez bien à l’aide de Google Translate: Translated Page

      DayBack est un calendrier basé sur le Web qui fonctionne dans FileMaker, vous pouvez donc styliser les événements à l’aide de CSS, comme vous le feriez dans une page Web.

      DayBack comprend également une fonctionnalité de traduction, de sorte qu’il se charge automatiquement dans la langue définie par votre ordinateur et vous pouvez traduire des mots vous-même à l’aide de la fonction de traduction.

      Vous pouvez télécharger un essai de 30 jours entièrement déverrouillé de DayBack ici: https://www.seedcode.com/filemaker-calendar/

Leave a Reply

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

Share →
DOWNLOAD
DayBack Calendar
DayBack's 30-day trial is unlocked so you can customize it and integrate it with your files.
Download DayBack and we'll send you a couple short emails with tips on how to modify it and use some of the coolest features.
Thank you! Please download: DayBack Calendar
Need More?
SeedCode tips & example files in your inbox
Need More?
SeedCode tips & example files in your inbox
Want More?
Be the first to see articles and tips like these
DOWNLOAD
TimeZync
Download TimeZync and we'll send you a couple short emails with tips syncing your FileMaker Go files.
Thank you! Please download: TimeZync
Want More?
Be the first to see articles and tips like these