external calendars legend

app/assets/javascripts/controllers/calendar.js

@@ -66,6 +66,17 @@ Application.Controllers.controller('CalendarController', ['$scope', '$state', '$
       return uiCalendarConfig.calendars.calendar.fullCalendar('refetchEvents');
     };
 
+    /**
+     * Return a CSS-like style of the given calendar configuration
+     * @param calendar
+     */
+    $scope.calendarStyle = function (calendar) {
+      return {
+        'border-color': calendar.color,
+        'color': calendar.text_color,
+      };
+    };
+
     // a variable for formation/machine/event/dispo checkbox is or not checked
     $scope.filter = {
       trainings: isSelectAll('trainings', $scope),

app/assets/stylesheets/modules/icalendar.scss

@@ -17,3 +17,8 @@
 .calendar-url {
   overflow: hidden;
 }
+
+.external-calendar-legend {
+  border-left: 3px solid;
+  border-radius: 3px;
+}

app/assets/templates/calendar/filter.html.erb

@@ -43,7 +43,7 @@
   </div>
 
   <div class="row" ng-repeat="e in externals">
-    <span class="col-md-11 col-sm-11 col-xs-11">{{::e.name}}</span>
+    <span ng-style="calendarStyle(e)" class="col-md-11 col-sm-11 col-xs-11 external-calendar-legend">{{::e.name}}</span>
     <input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="e.checked" ng-change="filterAvailabilities(filter)">
   </div>
 </div>