diff --git a/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox b/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
index 55bfc74e1..a82c610e7 100644
--- a/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
+++ b/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
@@ -64,4 +64,11 @@
       </md-list-item>
     </md-list>
   </md-content>
+  <!-- freebusy caption -->
+  <div layout="row" layout-align="end center">
+    <div class="quarter"><div class="busy sg-color-chip"><!-- busy --></div></div>
+    <label class="md-caption"><var:string label:value="Busy"/></label>
+    <div class="quarter"><div class="sg-no-freebusy sg-color-sample"><!-- no fb --></div></div>
+    <label class="md-caption"><var:string label:value="No free-busy information"/></label>
+  </div>
 </container>
diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
index 4a4637afa..58225249f 100644
--- a/UI/WebServerResources/scss/views/SchedulerUI.scss
+++ b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -712,27 +712,44 @@ $quarter_height: 10px;
     flex-grow: 0;
     flex-basis: 16px; // hour's width
     align-items: stretch;
-    &.sg-no-freebusy {
-      background-color: sg-color($sogoPaper, 200);
-      background-image: repeating-linear-gradient(-45deg,
-                                                  rgb(255,255,255),
-                                                  rgb(255,255,255) 2px,
-                                                  transparent 2px,
-                                                  transparent 4px);
-      opacity: 0.5;
-    }
+  }
+  .sg-no-freebusy {
+    background-color: sg-color($sogoPaper, 200);
+    background-image: repeating-linear-gradient(-45deg,
+                                                rgb(255,255,255),
+                                                rgb(255,255,255) 2px,
+                                                transparent 2px,
+                                                transparent 4px);
+    opacity: 0.5;
   }
   .quarter {
     min-width: 4px;
     display: flex;
     align-items: stretch;
-    .busy {
-      margin: 8px 0;
-      min-width: 4px;
-      background-color: sg-color($sogoPaper, 600);
-    }
-    &.event {
-      background-color: sg-color($sogoBlue, 300);
-    }
+  }
+  .event {
+    background-color: sg-color($sogoBlue, 300);
+  }
+  .busy {
+    margin: 8px 0;
+    min-width: 4px;
+    background-color: sg-color($sogoPaper, 600);
+  }
+
+  .sg-color-sample {
+    border-radius: 2px;
+    border-width: 0;
+    width: $baseline-grid*2;
+    height: $baseline-grid*2;
+    margin: 0 $baseline-grid 0 $baseline-grid*2;
+    padding: 0;
+  }
+  .sg-color-chip {
+    border-radius: 50%;
+    border-width: 0;
+    width: $baseline-grid;
+    height: $baseline-grid;
+    margin: 0 $baseline-grid 0 $baseline-grid*2;
   }
 }
+