Improve graphical scheduling

AKScheduling/templates/admin/AKScheduling/scheduling.html

@@ -175,11 +175,14 @@
 
     <div class="row" style="margin-bottom: 50px;">
         <div class="col-md-10 col-lg-11">
-            <div id="planCalendar" ></div>
+            <div id="planCalendar"></div>
         </div>
         <div class="col-md-2 col-lg-1" id="unscheduled-slots">
             {% for slot in slots_unscheduled %}
-                <div class="unscheduled-slot badge badge-primary" data-event='{ "title": "{{ slot.ak.short_name }}", "duration": {"hours": "{{ slot.duration|unlocalize }}"}, "description": "{{ slot.ak.name }}", "slotID": "{{ slot.pk }}"}'>{{ slot.ak.short_name }} ({{ slot.duration }} h)</div>
+                <div class="unscheduled-slot badge badge-primary" style='background-color: {{ slot.ak.category.color }}'
+                     data-event='{ "title": "{{ slot.ak.short_name }}", "duration": {"hours": "{{ slot.duration|unlocalize }}"}, "description": "{{ slot.ak.name }}", "slotID": "{{ slot.pk }}"}'>{{ slot.ak.short_name }}
+                    ({{ slot.duration }} h)
+                </div>
             {% endfor %}
         </div>
     </div>