Color Coding Your FileMaker Calendar by Resource

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…

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

 

Featured Posts

Follow Along

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

4 Comments

    • seedcode

      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

    • KC Embrey

      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 *

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.