How to add a color coding key to an embedded calendar

Creating a Template

1. Scroll down to the sharing method, Embeddable. Create a custom event landing page template by clicking Custom Templates in the app and clicking + New Template. Add a name for the template.

   

Creating the Key

This code will generate a series of small circle of color next to the word "Option." The section on changing the settings will walk you through how to modify these colors and options.

1. Add the following code to the header section of your template, just above the </head> tag:

   HTML

   	<!-- Color Key Styling -->
       <style>
       .color-box {
         display: inline-flex;
         align-items: center;
         border-radius: 8px;
       }
       #key { 
         width: 100%;
         height: auto;
         margin: 10px 10px 10px 0px;
         padding: 10px;
         position: relative;
       }
       .color-circle {
         display: flex;
         align-items: center;
         margin: 5px;
       }
       .color-circle div {
         width: 20px;
         height: 20px;
         border-radius: 50%;
         margin-right: 2px;
   
       } 
       p {
         margin: 0;
   
       } 
      </style>
   

2. Add the code for the key itself into the template, directly above the <!-- Details --> comment (on the standard template, this would be at line 242):

   HTML

   <!-- Color Key Box -->
   <div class="color-box" id="key">
     <div class="color-circle"> <div class="color1"></div> <p> &nbsp; Option 1 &nbsp; &nbsp; </p></div>
     <div class="color-circle"> <div class="color2"></div> <p> &nbsp; Option 2 &nbsp; &nbsp;</p></div>
     <div class="color-circle"> <div class="color3"></div> <p> &nbsp; Option 3 &nbsp; &nbsp;</p></div>
     <div class="color-circle"> <div class="color4"></div> <p> &nbsp; Option 4 &nbsp; &nbsp;</p></div>
     <div class="color-circle"> <div class="color5"></div> <p> &nbsp; Option 5 &nbsp; &nbsp;</p></div>
   </div>
   

3. Save the template

Changing the "settings" of the key

The way this works is that each color number (e.g. "color1," "color2," etc.) corresponds with a slot on the color palette for the calendar that is embedded. Because they are tied to the slot, they will reflect whatever color is in the slot, whether default or custom.

If you edit the Calendar, you have the option to change individual colors, and/or create and save whole color palette's for use on other calendars in your account.

The above code is set up for 5 color/option pairs. To decrease the number of colors, remove one line at a time, starting from the bottom (the highest color number available, in this case it would be color5/Option 5) and working your way up. A whole line looks like this: <div class="color-circle"> <div class="color5"></div> <p> &nbsp; Option 5 &nbsp; &nbsp;</p></div>

To increase the number of colors and options, simply copy and paste the last line of the colors (for example: <div class="color-circle"> <div class="color5"></div> <p> &nbsp; Option 5 &nbsp; &nbsp;</p></div>). Then change the line to reflect the color and text you want shown.

You can change any of the color numbers to be whichever color in your palette you'd like them to reflect. Simply change the color number (example: "color1") to match whatever slot in your palette you want. In this case, if I wanted my second option to be attached the the bright yellow color, I would change "color2" to "color8."

Similarly, if you want to change the Text to be different than "Option 1," "Option 2," etc. you simply highlight the word and then replace it with whatever you want.