begin calendar

app/controllers/home.controller.js

@@ -4,6 +4,7 @@ angular.module('app')
 
             $scope.DataShareBusiness = DataShareBusiness;
             $scope.courses = null;
+            $scope.days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
 
             $scope.getSheetCount = function()
             {

app/less/app.less

@@ -46,4 +46,41 @@ footer {
 
 .welcome-message {
   font-size: large;
-}
+}
+
+@media (min-width: 768px){
+  .seven-cols .col-xs-1,
+  .seven-cols .col-sm-1,
+  .seven-cols .col-md-1,
+  .seven-cols .col-sm-1,
+  .seven-cols .col-lg-1  {
+    width: 100%;
+    *width: 100%;
+  }
+}
+
+@media (min-width: 992px) {
+  .seven-cols .col-xs-1,
+  .seven-cols .col-sm-1,
+  .seven-cols .col-md-1,
+  .seven-cols .col-sm-1,
+  .seven-cols .col-lg-1 {
+    width: 14.285714285714285714285714285714%;
+    *width: 14.285714285714285714285714285714%;
+  }
+}
+
+/**
+ *  The following is not really needed in this case
+ *  Only to demonstrate the usage of @media for large screens
+ */
+@media (min-width: 1200px) {
+  .seven-cols .col-xs-1,
+  .seven-cols .col-sm-1,
+  .seven-cols .col-md-1,
+  .seven-cols .col-sm-1,
+  .seven-cols .col-lg-1 {
+    width: 14.285714285714285714285714285714%;
+    *width: 14.285714285714285714285714285714%;
+  }
+}

app/views/home.html

@@ -8,8 +8,11 @@
         Too many elements to display, please select a sub group.
     </p>
 
-    <div lu-busy="coursesView" class="col-xs-12">
-        {{ courses }}
+    <div lu-busy="coursesView" class="col-xs-12 seven-cols">
+        <div ng-repeat="day in days" class="col-xs-1">
+            {{day}}
+        </div>
     </div>
+    {{ courses }}
 
 </div>