浏览代码

working calendar

tags/1.0.0
Robin Thoni 8 年前
父节点
当前提交
7356bc8c7f
共有 4 个文件被更改,包括 53 次插入7 次删除
  1. 1
    2
      app/controllers/home.controller.js
  2. 14
    2
      app/less/app.less
  3. 10
    3
      app/views/home.html
  4. 28
    0
      sdk/Business/WeeksBusiness.js

+ 1
- 2
app/controllers/home.controller.js 查看文件

48
                 }
48
                 }
49
                 return $scope.courses.DayList.find(function(day)
49
                 return $scope.courses.DayList.find(function(day)
50
                 {
50
                 {
51
-                    var d = new Date(day.DateTime);
52
-                    return d.getTime() == date.getTime();
51
+                    return day.DateTime.getTime() == date.getTime();
53
                 });
52
                 });
54
             };
53
             };
55
 
54
 

+ 14
- 2
app/less/app.less 查看文件

62
   }
62
   }
63
 }
63
 }
64
 
64
 
65
+@calendar-height: 24*30px;
66
+
65
 .day-column {
67
 .day-column {
66
   .text-center();
68
   .text-center();
67
-  border: solid #505050 1px;
68
-  height: 24*30px;
69
+  border-left: solid #505050 1px;
70
+  border-top: solid #505050 1px;
71
+  border-bottom: solid #505050 1px;
72
+  height: @calendar-height;
69
   padding: 0;
73
   padding: 0;
70
 }
74
 }
71
 
75
 
87
   position: absolute;
91
   position: absolute;
88
   background-color: cadetblue;
92
   background-color: cadetblue;
89
   width: 100%;
93
   width: 100%;
94
+  border-top: solid #505050 1px;
95
+  border-bottom: solid #505050 1px;
96
+  overflow: hidden;
97
+}
98
+
99
+.day-column-courses {
100
+  height: @calendar-height - 50px;
101
+  position: relative;
90
 }
102
 }

+ 10
- 3
app/views/home.html 查看文件

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

+ 28
- 0
sdk/Business/WeeksBusiness.js 查看文件

3
     angular.module('appSdk')
3
     angular.module('appSdk')
4
         .factory('WeeksBusiness', ['WeeksDataAccess', '$q', function (WeeksDataAccess, $q) {
4
         .factory('WeeksBusiness', ['WeeksDataAccess', '$q', function (WeeksDataAccess, $q) {
5
 
5
 
6
+            function isDateInCourse(course, date)
7
+            {
8
+                return course.BeginDate < date && course.EndDate > date;
9
+            }
10
+
6
             var Business = {};
11
             var Business = {};
7
 
12
 
8
             Business.formatWeek = function(data)
13
             Business.formatWeek = function(data)
9
             {
14
             {
10
                 data.DayList.forEach(function(day) {
15
                 data.DayList.forEach(function(day) {
16
+                    day.DateTime = new Date(day.DateTime);
11
                     day.CourseList.forEach(function (course) {
17
                     day.CourseList.forEach(function (course) {
18
+
19
+                        course.BeginDate = new Date(course.BeginDate);
12
                         var dt = new Date(course.BeginDate);
20
                         var dt = new Date(course.BeginDate);
13
                         var secs = dt.getSeconds() + (60 * dt.getMinutes()) + (60 * 60 * dt.getHours());
21
                         var secs = dt.getSeconds() + (60 * dt.getMinutes()) + (60 * 60 * dt.getHours());
14
                         course.BeginPercent = secs / (60 * 60 * 24) * 100;
22
                         course.BeginPercent = secs / (60 * 60 * 24) * 100;
15
                         course.BeginSeconds = secs;
23
                         course.BeginSeconds = secs;
16
 
24
 
25
+                        course.EndDate = new Date(course.EndDate);
17
                         dt = new Date(course.EndDate);
26
                         dt = new Date(course.EndDate);
18
                         secs = dt.getSeconds() + (60 * dt.getMinutes()) + (60 * 60 * dt.getHours());
27
                         secs = dt.getSeconds() + (60 * dt.getMinutes()) + (60 * 60 * dt.getHours());
19
                         course.EndPercent = secs / (60 * 60 * 24) * 100;
28
                         course.EndPercent = secs / (60 * 60 * 24) * 100;
20
                         course.EndSeconds = secs;
29
                         course.EndSeconds = secs;
21
                     });
30
                     });
22
                 });
31
                 });
32
+                data.DayList.forEach(function(day) {
33
+                    day.CourseList.forEach(function (course) {
34
+                        course.ParallelCoursesCount = 1;
35
+                        course.ParallelCoursesPosition = 0;
36
+                        day.CourseList.forEach(function (course2) {
37
+                            if (course.Id == course2.Id) {
38
+                                return;
39
+                            }
40
+                            var beginBeforeEndIn = (course2.BeginDate <= course.BeginDate && isDateInCourse(course, course2.EndDate));
41
+                            var beginInEndAfter = (course2.EndDate >= course.EndDate && isDateInCourse(course, course2.BeginDate));
42
+                            var beginBeforeEndAfter = (course2.BeginDate <= course.BeginDate && course2.EndDate >= course.EndDate);
43
+                            var beginInEndIn = (isDateInCourse(course, course2.EndDate) && isDateInCourse(course, course2.BeginDate));
44
+                            if (beginBeforeEndIn || beginInEndAfter || beginBeforeEndAfter || beginInEndIn) {
45
+                                ++course.ParallelCoursesCount;
46
+                                course2.ParallelCoursesPosition = Math.max(course.ParallelCoursesPosition, course2.ParallelCoursesPosition) + 1
47
+                            }
48
+                        });
49
+                    });
50
+                });
23
             };
51
             };
24
 
52
 
25
             Business.getWeek = function(data, promise)
53
             Business.getWeek = function(data, promise)

正在加载...
取消
保存