diff --git a/src/static/css/calendar.css b/src/static/css/calendar.css
index 8feb2ea..4683128 100644
--- a/src/static/css/calendar.css
+++ b/src/static/css/calendar.css
@@ -55,15 +55,22 @@ div.schedule-event-list {
     flex-flow: column;
 }
 
-div.schedule-event {
+div.schedule-event-outter {
     display: flex;
     flex-flow: row;
     align-items: flex-start;
 
-    padding: 1.25rem;
     margin-bottom: 1.25rem;
 }
 
+div.schedule-event-inner {
+    display: flex;
+    flex-flow: row;
+    align-items: flex-start;
+    
+    padding: 1.25rem;
+}
+
 div.schedule-event-words {
     display: flex;
     flex-flow: column;
diff --git a/src/static/i18n/strings_en-US.properties b/src/static/i18n/strings_en-US.properties
index 655fa16..a7e116c 100644
--- a/src/static/i18n/strings_en-US.properties
+++ b/src/static/i18n/strings_en-US.properties
@@ -71,6 +71,7 @@ ccn-i18n-calendar-tabcontrol-tabDisplay=Display
 ccn-i18n-event-header=Edit Event
 ccn-i18n-event-title=Title
 ccn-i18n-event-description=Description
+ccn-i18n-event-color=Color
 ccn-i18n-event-collection=Collection
 ccn-i18n-event-startDateTime=Start Date Time
 ccn-i18n-event-endDateTime=Stop Date Time
diff --git a/src/static/i18n/strings_zh-CN.properties b/src/static/i18n/strings_zh-CN.properties
index 575aded..3673e95 100644
--- a/src/static/i18n/strings_zh-CN.properties
+++ b/src/static/i18n/strings_zh-CN.properties
@@ -77,6 +77,7 @@ ccn-i18n-collection-sharing-editing=正在编辑集合：
 ccn-i18n-event-header=编辑事件
 ccn-i18n-event-title=标题
 ccn-i18n-event-description=描述
+ccn-i18n-event-color=颜色
 ccn-i18n-event-collection=集合
 ccn-i18n-event-startDateTime=开始时间
 ccn-i18n-event-endDateTime=结束时间
diff --git a/src/static/js/api.js b/src/static/js/api.js
index a64f455..94635b5 100644
--- a/src/static/js/api.js
+++ b/src/static/js/api.js
@@ -88,6 +88,28 @@ function ccn_api_boolTemplate(_url, _data) {
     return (IsResponseOK(gotten_data) && gotten_data['data']);
 }
 
+// deserialize & serialize calendar description function
+
+function ccn_api_serializeDescription(_description, _color) {
+    var sobj = {
+        description: _description,
+        color: _color
+    }
+    return JSON.stringify(sobj);
+}
+
+function ccn_api_deserializeDescription(strl) {
+    try {
+        return $.parseJSON(strl);
+    } catch(err) {
+        return {
+            description: "",
+            color: DefaultColor
+        };
+    }
+    
+}
+
 // ====================================================== common
 
 function ccn_api_common_webLogin(_username, _password) {
diff --git a/src/static/js/page/calendar.js b/src/static/js/page/calendar.js
index edb123d..26a81c7 100644
--- a/src/static/js/page/calendar.js
+++ b/src/static/js/page/calendar.js
@@ -107,7 +107,7 @@ function ccn_calendar_calendar_Analyse() {
             month: gottenDateTime.getMonth() + 1,
             day: gottenDateTime.getDate(),
             dayOfWeek: gottenDateTime.getWeekday() + 1,
-            subcalendar: "       -",
+            subcalendar: "",
             events: new Array()
         });
         gottenDateTime.setTime(gottenDateTime.getTime() + ccn_datetime_DAY1_SPAN * 60000);
@@ -117,6 +117,7 @@ function ccn_calendar_calendar_Analyse() {
     // then analyse each event
     for(var index in ccn_calendar_calendar_listCache) {
         var item = ccn_calendar_calendar_listCache[index];
+        var deserializedDescription = ccn_api_deserializeDescription(item[3]);
         
         var minStartTimestamp = startTimestamp - (item[6] - item[5]);
         var result = ccn_datetime_ResolveLoopRules4Event(
@@ -141,7 +142,8 @@ function ccn_calendar_calendar_Analyse() {
                         uuid: item[0],
                         belongTo: item[1],
                         title: item[2],
-                        description: item[3],
+                        description: deserializedDescription.description,
+                        color: deserializedDescription.color,
                         isVisible: true,
                         isLocked: typeof(ccn_calendar_owned_displayCache[item[0]]) != 'undefined',
                         loopText: " ",  // todo: finish this
@@ -175,7 +177,7 @@ function ccn_calendar_calendar_Render() {
         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).text(item.subcalendar);
+            $('#ccn-calendarItem-desc-' + i + '-' + j).html(item.subcalendar == '' ? '&nbsp;' : item.subcalendar);
             $('#ccn-calendarItem-task-' + i + '-' + j).text(item.events.length.toString());
             counter++;
         }
@@ -203,6 +205,8 @@ function ccn_calendar_calendar_Render() {
     var listDOM = $('#ccn-calendar-scheduleList');
     listDOM.empty();
     listDOM.append(ccn_template_scheduleItem.render({renderdata: ccn_calendar_calendar_displayCache}));
+    // link click event
+    $('div.schedule-event-outter').click(ccn_calendar_calendar_ItemUpdate);
     ccn_i18n_ApplyLanguage2Content(listDOM);
 }
 
diff --git a/src/static/js/page/event.js b/src/static/js/page/event.js
index acd4308..c2536f3 100644
--- a/src/static/js/page/event.js
+++ b/src/static/js/page/event.js
@@ -67,13 +67,17 @@ function ccn_event_Init() {
     // if ccn_event_editingEvent is undefined, init following content with add mode
     // otherwise, init as update mode
     var isAdd = typeof(ccn_event_editingEvent) == 'undefined';
+    var deserializeDescription = isAdd ? undefined : ccn_api_deserializeDescription(ccn_event_editingEvent[3]);
 
     // init title and description
     $('#ccn-event-inputTitle').val(
         isAdd ? '' : ccn_event_editingEvent[2]
     );
     $('#ccn-event-inputDescription').val(
-        isAdd ? '' : ccn_event_editingEvent[3]
+        isAdd ? '' : deserializeDescription.description
+    );
+    $('#ccn-event-inputColor').val(
+        isAdd ? DefaultColor : deserializeDescription.color
     );
 
     // init collection picker, first we need query data
@@ -244,6 +248,8 @@ function ccn_event_GetForm() {
     if (title == '') return undefined;
     var description = $('#ccn-event-inputDescription').val();
     if (description == '') return undefined;
+    var color = $('#ccn-event-inputColor').val();
+    if (color == '') return undefined;
     var belongTo = $('#ccn-event-inputCollection').val();
     if (belongTo == null) return undefined; // if no selected item, val return null, not undefined
 
@@ -326,7 +332,18 @@ function ccn_event_GetForm() {
         }
     }
 
-    return [belongTo, title, description, eventDateTimeStart, eventDateTimeEnd, timezoneOffset, loopRules];
+    return [
+        belongTo, 
+        title, 
+        ccn_api_serializeDescription(
+            description,
+            color
+        ), 
+        eventDateTimeStart, 
+        eventDateTimeEnd, 
+        timezoneOffset, 
+        loopRules
+    ];
 }
 
 function ccn_event_btnSpot() {
diff --git a/src/static/js/utils.js b/src/static/js/utils.js
index 05171dc..0ffe3eb 100644
--- a/src/static/js/utils.js
+++ b/src/static/js/utils.js
@@ -15,6 +15,7 @@ function ComputeSHA256(strl) {
     return hashHex.toLowerCase();
 }
 */
+var DefaultColor = '#536dfe';
 
 function IsResponseOK(data) {
     if (typeof (data) == 'undefined') {
diff --git a/src/static/tmpl/scheduleItem.tmpl b/src/static/tmpl/scheduleItem.tmpl
index 2e1ece0..2da0b54 100644
--- a/src/static/tmpl/scheduleItem.tmpl
+++ b/src/static/tmpl/scheduleItem.tmpl
@@ -8,19 +8,22 @@
     <div class="schedule-event-list">
         {{for events}}
         {{if isVisible}}
-        <div class="schedule-event card">
-            <div class="schedule-event-words">
-                <p class="level-item"><b>{{>title}}</b></p>
-                <p class="level-item">{{>description}}</p>
-                <p class="level-item"><span>{{>start}}</span>-<span>{{>end}}</span></p>
-            </div>
-            <div class="schedule-event-icon">
-                {{if isLocked}}
-                <span class="icon is-small"><i class="fas fa-lock"></i></span>
-                {{/if}}
-                {{if timezoneWarning}}
-                <span class="icon is-small"><i class="fas fa-globe"></i></span>
-                {{/if}}
+        <div class="schedule-event-outter card" uuid="{{:uuid}}">
+            <div style="background: {{:color}}; width: 0.75rem; height: 100%;"></div>
+            <div class="schedule-event-inner">
+                <div class="schedule-event-words">
+                    <p class="level-item"><b>{{>title}}</b></p>
+                    <p class="level-item">{{>description}}</p>
+                    <p class="level-item"><span>{{>start}}</span>-<span>{{>end}}</span></p>
+                </div>
+                <div class="schedule-event-icon">
+                    {{if isLocked}}
+                    <span class="icon is-small"><i class="fas fa-lock"></i></span>
+                    {{/if}}
+                    {{if timezoneWarning}}
+                    <span class="icon is-small"><i class="fas fa-globe"></i></span>
+                    {{/if}}
+                </div>
             </div>
         </div>
         {{/if}}
diff --git a/src/templates/event.html b/src/templates/event.html
index 2f1e338..4dec07c 100644
--- a/src/templates/event.html
+++ b/src/templates/event.html
@@ -52,7 +52,12 @@
                     <textarea id="ccn-event-inputDescription" class="textarea"></textarea>
                 </div>
             </div>
-
+            <div class="field">
+                <label class="label" i18n-name="ccn-i18n-event-color"></label>
+                <div class="control">
+                    <input id="ccn-event-inputColor" class="input" type="color">
+                </div>
+            </div>
             <div class="field">
                 <label class="label" i18n-name="ccn-i18n-event-collection"></label>
                 <div class="control">