working calendar

app/controllers/home.controller.js

@@ -48,8 +48,7 @@ angular.module('app')
                 }
                 return $scope.courses.DayList.find(function(day)
                 {
-                    var d = new Date(day.DateTime);
-                    return d.getTime() == date.getTime();
+                    return day.DateTime.getTime() == date.getTime();
                 });
             };
 

app/less/app.less

@@ -62,10 +62,14 @@ footer {
   }
 }
 
+@calendar-height: 24*30px;
+
 .day-column {
   .text-center();
-  border: solid #505050 1px;
-  height: 24*30px;
+  border-left: solid #505050 1px;
+  border-top: solid #505050 1px;
+  border-bottom: solid #505050 1px;
+  height: @calendar-height;
   padding: 0;
 }
 
@@ -87,4 +91,12 @@ footer {
   position: absolute;
   background-color: cadetblue;
   width: 100%;
+  border-top: solid #505050 1px;
+  border-bottom: solid #505050 1px;
+  overflow: hidden;
+}
+
+.day-column-courses {
+  height: @calendar-height - 50px;
+  position: relative;
 }

app/views/home.html

@@ -9,11 +9,18 @@
     </p>
 
     <div lu-busy="coursesView" class="col-xs-12 seven-cols">
-        <div ng-repeat="day in days" class="col-sm-1 day-column">
+        <div ng-repeat="day in days" class="col-sm-1 day-column"
+            ng-style="{'border-right': $last ? 'solid #505050 1px' : ''}">
             <div class="day-column-header day-column-header-day">{{ day.day }}</div>
             <div class="day-column-header day-column-header-date">{{ day.date | date : dateFormat }}</div>
-            <div class="day-column-course" ng-repeat="course in getCoursesByDate(day.date)" ng-style="{'height': (course.EndPercent - course.BeginPercent) + '%', 'top' : course.BeginPercent + '%'}">
-                {{ course.Name }}
+            <div class="day-column-courses">
+                <div class="day-column-course" ng-repeat="course in getCoursesByDate(day.date)"
+                     ng-style="{'height': (course.EndPercent - course.BeginPercent) + '%',
+                     'top' : course.BeginPercent + '%', 'width': (100 / course.ParallelCoursesCount)+'%',
+                     'left': (course.ParallelCoursesPosition * (100 / course.ParallelCoursesCount)) + '%',
+                     'border-left': (course.ParallelCoursesPosition != 0) ? 'solid #505050 1px' : ''}">
+                    {{ course.Name }}
+                </div>
             </div>
         </div>
     </div>

sdk/Business/WeeksBusiness.js

@@ -3,23 +3,51 @@
     angular.module('appSdk')
         .factory('WeeksBusiness', ['WeeksDataAccess', '$q', function (WeeksDataAccess, $q) {
 
+            function isDateInCourse(course, date)
+            {
+                return course.BeginDate < date && course.EndDate > date;
+            }
+
             var Business = {};
 
             Business.formatWeek = function(data)
             {
                 data.DayList.forEach(function(day) {
+                    day.DateTime = new Date(day.DateTime);
                     day.CourseList.forEach(function (course) {
+
+                        course.BeginDate = new Date(course.BeginDate);
                         var dt = new Date(course.BeginDate);
                         var secs = dt.getSeconds() + (60 * dt.getMinutes()) + (60 * 60 * dt.getHours());
                         course.BeginPercent = secs / (60 * 60 * 24) * 100;
                         course.BeginSeconds = secs;
 
+                        course.EndDate = new Date(course.EndDate);
                         dt = new Date(course.EndDate);
                         secs = dt.getSeconds() + (60 * dt.getMinutes()) + (60 * 60 * dt.getHours());
                         course.EndPercent = secs / (60 * 60 * 24) * 100;
                         course.EndSeconds = secs;
                     });
                 });
+                data.DayList.forEach(function(day) {
+                    day.CourseList.forEach(function (course) {
+                        course.ParallelCoursesCount = 1;
+                        course.ParallelCoursesPosition = 0;
+                        day.CourseList.forEach(function (course2) {
+                            if (course.Id == course2.Id) {
+                                return;
+                            }
+                            var beginBeforeEndIn = (course2.BeginDate <= course.BeginDate && isDateInCourse(course, course2.EndDate));
+                            var beginInEndAfter = (course2.EndDate >= course.EndDate && isDateInCourse(course, course2.BeginDate));
+                            var beginBeforeEndAfter = (course2.BeginDate <= course.BeginDate && course2.EndDate >= course.EndDate);
+                            var beginInEndIn = (isDateInCourse(course, course2.EndDate) && isDateInCourse(course, course2.BeginDate));
+                            if (beginBeforeEndIn || beginInEndAfter || beginBeforeEndAfter || beginInEndIn) {
+                                ++course.ParallelCoursesCount;
+                                course2.ParallelCoursesPosition = Math.max(course.ParallelCoursesPosition, course2.ParallelCoursesPosition) + 1
+                            }
+                        });
+                    });
+                });
             };
 
             Business.getWeek = function(data, promise)