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.)
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…
/* Resource Color Frame Customizations */ .fc-event-draggable { padding-left: 0; } .fc-event-draggable .fc-event-time, .fc-event-draggable .fc-event-title { padding-left: 3px; } .fc-event-draggable .fc-event-time { width: 98%; overflow: hidden; } .fc-event-vert.fc-event-end { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .fc-event-vert.fc-event-start { border-top-left-radius: 6px; border-top-right-radius: 6px; } /* Resource Name 1 */ .Beth.Reynolds::before { position: absolute; left: 0; top: 0; content: ' '; width: 100%; height: 100%; z-index: -1; background-color: transparent; /* Modify Border Color and Size here */ border: 4px solid rgba(255, 70, 10, 0.8); border-radius: 4px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } /* Resource Name 2 */ .James.Woolsey::before { position: absolute; left: 0; top: 0; content: ' '; width: 100%; height: 100%; z-index: -1; background-color: transparent; /* Modify Border Color and Size here */ border: 4px solid rgba(33, 132, 234, 0.8); border-radius: 4px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } /* Resource Name 2 */ .Peter.Samuels::before { position: absolute; left: 0; top: 0; content: ' '; width: 100%; height: 100%; z-index: -1; background-color: transparent; /* Modify Border Color and Size here */ border: 4px solid rgba(0, 150, 100, 0.8); border-radius: 4px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } /* End Resource Color Frame Customizations */
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.
4 Comments
How much is it?
Hey Richard! Lots of pricing options for DayBack–all can be found here: DayBack Pricing. Please get in touch if you have any questions about that.
I would like to now how is fonction? my English is not very good for understand
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/