add calendarItem color display

src/static/css/calendar.css

@@ -1,4 +1,4 @@
-#ccn-calendar-calendarBody div:nth-child(n+2) div {
+#ccn-calendar-calendarBody > div:nth-child(n+2) > div {
     border-top: 0 solid black;
     border-left: 0 solid black;
     border-right: 1px solid black;
@@ -13,15 +13,15 @@
     overflow: hidden;
 }
 
-#ccn-calendar-calendarBody div:nth-child(n+2) div:nth-child(1) {
+#ccn-calendar-calendarBody > div:nth-child(n+2) > div:nth-child(1) {
     border-left: 1px solid black;
 }
 
-#ccn-calendar-calendarBody div:nth-child(2) div {
+#ccn-calendar-calendarBody > div:nth-child(2) > div {
     border-top: 1px solid black;
 }
 
-#ccn-calendar-calendarBody div div {
+#ccn-calendar-calendarBody > div > div {
     flex-grow: 1;
     flex-basis: 0;
     flex-shrink: 0;
@@ -29,7 +29,7 @@
     overflow: hidden;
 }
 
-#ccn-calendar-calendarBody div {
+#ccn-calendar-calendarBody > div {
     display: flex;
     flex-flow: row;
 }
@@ -39,6 +39,24 @@
 
 
 
+div.calendarItem-eventBox {
+    border: 1px solid black;
+    border-radius: 2px;
+    margin: 0.2rem;
+    height: 0.75rem;
+    width: 100%;
+}
+
+div.calendarItem-eventBox[enableDisplay=true] {
+    visibility: visible;
+}
+div.calendarItem-eventBox[enableDisplay=false] {
+    visibility: hidden;
+}
+
+
+
+
 
 div.schedule-day {
     display: flex;
@@ -85,6 +103,11 @@ div.schedule-event-icon {
     margin-left: 0.75rem;
 }
 
+div.schedule-event-color {
+    width: 0.75rem; 
+    height: 100%;
+}
+
 #ccn-calendar-scheduleList div.schedule-day:nth-child(n+2) {
     border-top: 1px solid rgba(219,219,219,.5);
 }

src/static/js/page/calendar.js

@@ -171,20 +171,9 @@ function ccn_calendar_calendar_Analyse() {
 // just use produced ccn_calendar_calendar_displayCache
 // to re-generate ui
 function ccn_calendar_calendar_Render() {
-    // all data has been alanysed, feeback to calendar body.
-    var counter = 0;
-    for(var i = 0; i < 6; i++) {
-        for(var j = 0; j < 7; j++) {
-            var item = ccn_calendar_calendar_displayCache[counter];
-            $('#ccn-calendarItem-title-' + i + '-' + j).text(item.day);
-            $('#ccn-calendarItem-desc-' + i + '-' + j).html(item.subcalendar == '' ? '&nbsp;' : item.subcalendar);
-            $('#ccn-calendarItem-task-' + i + '-' + j).text(item.events.length.toString());
-            counter++;
-        }
-    }
-
     // todo: add / migrate subcalendar feature here
 
+
     // analyse visible data
     for(var i in ccn_calendar_calendar_displayCache) {
         for(var j in ccn_calendar_calendar_displayCache[i].events) {
@@ -207,6 +196,41 @@ function ccn_calendar_calendar_Render() {
     listDOM.append(ccn_template_scheduleItem.render({renderdata: ccn_calendar_calendar_displayCache}));
     // link click event
     $('div.schedule-event-outter').click(ccn_calendar_calendar_ItemUpdate);
+
+    // all data has been alanysed, feedback to calendar body.
+    var counter = 0;
+    for(var i = 0; i < 6; i++) {
+        for(var j = 0; j < 7; j++) {
+            var item = ccn_calendar_calendar_displayCache[counter];
+            var lenEvents = item.events.length;
+            var eventsCounter = 0;
+
+            $('#ccn-calendarItem-title-' + i + '-' + j).text(item.day);
+            $('#ccn-calendarItem-desc-' + i + '-' + j).text(item.subcalendar);
+
+
+            for(; eventsCounter < Math.min(lenEvents, 4); eventsCounter++) {
+                $('#ccn-calendarItem-eventBox' + (eventsCounter + 1) + '-' + i + '-' + j)
+                .css('background', item.events[eventsCounter].color)
+                .attr('enableDisplay', 'true');
+            }
+            if (lenEvents > 4) {
+                // more than 4 item, write number
+                $('#ccn-calendarItem-task-' + i + '-' + j).text(lenEvents.toString());
+            } else {
+                // otherwise, wipe out number
+                $('#ccn-calendarItem-task-' + i + '-' + j).html('&nbsp;');
+                // set others div are blank
+                for(; eventsCounter < 4; eventsCounter++) {
+                    $('#ccn-calendarItem-eventBox' + (eventsCounter + 1) + '-' + i + '-' + j)
+                    .attr('enableDisplay', 'false');
+                }
+            }
+            
+            counter++;
+        }
+    }
+
     ccn_i18n_ApplyLanguage2Content(listDOM);
 }
 

src/static/tmpl/calendarItem.tmpl

@@ -2,9 +2,14 @@
 <div>
     {{for start=0 end=7 step=1 itemVar="~column"}}
     <div id="ccn-calendarItem-{{:~row}}-{{:~column}}">
-        <p><b id="ccn-calendarItem-title-{{:~row}}-{{:~column}}">&nbsp;</b></p>
-        <p><small id="ccn-calendarItem-desc-{{:~row}}-{{:~column}}">&nbsp;</small></p>
-        <p><span class="icon is-small"><i class="fas fa-tasks"></i></span><span id="ccn-calendarItem-task-{{:~row}}-{{:~column}}">&nbsp;</span></p>
+        <p><b id="ccn-calendarItem-title-{{:~row}}-{{:~column}}">&nbsp;</b>
+            <span id="ccn-calendarItem-desc-{{:~row}}-{{:~column}}"></span>
+        </p>
+        <div id="ccn-calendarItem-eventBox1-{{:~row}}-{{:~column}}" class="calendarItem-eventBox" enableDisplay="false"></div>
+        <div id="ccn-calendarItem-eventBox2-{{:~row}}-{{:~column}}" class="calendarItem-eventBox" enableDisplay="false"></div>
+        <div id="ccn-calendarItem-eventBox3-{{:~row}}-{{:~column}}" class="calendarItem-eventBox" enableDisplay="false"></div>
+        <div id="ccn-calendarItem-eventBox4-{{:~row}}-{{:~column}}" class="calendarItem-eventBox" enableDisplay="false"></div>
+        <p id="ccn-calendarItem-task-{{:~row}}-{{:~column}}">&nbsp;</p>
     </div>
     {{/for}}
 </div>

src/static/tmpl/scheduleItem.tmpl

@@ -9,7 +9,7 @@
         {{for events}}
         {{if isVisible}}
         <div class="schedule-event-outter card" uuid="{{:uuid}}">
-            <div style="background: {{:color}}; width: 0.75rem; height: 100%;"></div>
+            <div class="schedule-event-color" style="background: {{:color}};"></div>
             <div class="schedule-event-inner">
                 <div class="schedule-event-words">
                     <p class="level-item"><b>{{>title}}</b></p>