update

src/App.vue

@@ -29,12 +29,14 @@
             <CalList
               style="flex: 0 0 200px; margin: 10px"
               :indextitles="indextitles"
+              :activeindex="key"
               @select="menuselect"
             ></CalList>
           </div>
           <div style="height: 100%; overflow: auto">
             <Calendar
               style="flex: 1 1 auto; margin: 10px"
+              :calendars="calendars"
               :events="selectedevents"
               @update="updateEvent"
               @delete="deleteEvent"
@@ -61,6 +63,7 @@ import CalList from "./components/calendar/CalList.vue";
 
 import {
   events,
+  calendars,
   onCalendarEventsLoaded,
   updateEvent,
   deleteEvent,
@@ -94,6 +97,7 @@ export default {
       key: "ALL",
       indexcals: events,
       indextitles: {},
+      calendars: calendars,
       selectedevents: events["ALL"].events,
     };
   },
@@ -102,9 +106,13 @@ export default {
     this.auth = window.m3.auth;
   },
   mounted() {
-    onCalendarEventsLoaded((events, titles) => {
+    onCalendarEventsLoaded((events, titles, calendars) => {
       this.indexcals = events;
       this.indextitles = titles;
+      this.calendars = calendars;
+      if (!this.indexcals[this.key]) {
+        this.key = "ALL";
+      }
       this.selectedevents = this.indexcals[this.key].events;
     });
   },
@@ -120,6 +128,9 @@ export default {
     // 从菜单选择一项日历
     menuselect(key) {
       this.key = key;
+      if (!this.indexcals[this.key]) {
+        this.key = "ALL";
+      }
       this.selectedevents = this.indexcals[this.key].events;
     },
   },

src/components/calendar/CalList.vue

@@ -12,10 +12,14 @@ export default {
     name: "CalList",
     props: {
         indextitles: {},
+        activeindex: {
+            default(){
+                return "ALL";
+            },
+        },
     },
     data: () => {
         return {
-            activeindex: "ALL",
         };
     },
     mounted() {

src/components/calendar/Calendar.vue

@@ -68,7 +68,7 @@
         @clickTimezonesCollapseBtn="onClickTimezonesCollapseBtn"
       />
     </div>
-    <EventForm ref="eventform" style="display:none;"></EventForm>
+    <EventForm ref="eventform" style="display: none"></EventForm>
   </div>
 </template>
 
@@ -96,6 +96,9 @@ export default {
     events: {
       type: Array,
     },
+    calendars: {
+      type: Array,
+    },
     attendees: {
       type: Array,
       default: () => ["ids from app"],
@@ -103,7 +106,6 @@ export default {
   },
   data() {
     return {
-      calendars: calendars,
       notices: [
         {
           id: "n1",
@@ -238,35 +240,38 @@ export default {
     },
     onCustomFormPopup(eventData) {
       eventData.CustomEventForm = true;
-      
-      var l = this.$refs["caldiv"].offsetLeft+1;
-      var t = this.$refs["caldiv"].offsetTop+1;
+
+      var l = this.$refs["caldiv"].offsetLeft + 1;
+      var t = this.$refs["caldiv"].offsetTop + 1;
       var w = this.$refs["caldiv"].clientWidth;
-      var h = this.$refs["caldiv"].clientHeight-1;
+      var h = this.$refs["caldiv"].clientHeight - 1;
       this.$refs["eventform"].$el.style.position = "absolute";
       this.$refs["eventform"].$el.style.left = l + "px";
       this.$refs["eventform"].$el.style.top = t + "px";
       this.$refs["eventform"].$el.style.width = w + "px";
       this.$refs["eventform"].$el.style.height = h + "px";
 
-      const event = {
-        calendarId: eventData.calendarId || "work",
-        id: eventData.id || String(Math.random()),
-        title: eventData.title,
-        isAllday: eventData.isAllday,
-        start: eventData.start,
-        end: eventData.end,
-        repeattype: eventData.repeattype || "",
-        category: eventData.category || "time",
-        dueDateClass: "",
-        location: eventData.location,
-        state: eventData.state,
-        isPrivate: eventData.isPrivate,
-        body: eventData.body,
-        attendees: this.attendees,
+      var event = eventData;
+      if (eventData.event) {
+        event = eventData.event;
+      }
+      const eventcopy = {
+        calendarId: event.calendarId || "work",
+        id: event.id || String(Math.random()),
+        title: event.title,
+        isAllday: event.isAllday,
+        start: event.start,
+        end: event.end,
+        repeattype: event.repeattype || "",
+        category: event.category || "time",
+        location: event.location,
+        state: event.state,
+        isPrivate: event.isPrivate,
+        body: event.body,
+        attendees: event.attendees || this.attendees,
       };
 
-      this.$refs["eventform"].event = event;
+      this.$refs["eventform"].event = eventcopy;
       this.$refs["eventform"].show(eventData.submit);
     },
     onSelectDateTime({ start, end }) {
@@ -276,7 +281,7 @@ export default {
     },
     onBeforeCreateEvent(eventData) {
       this.calendarInstance.createEvents([eventData]);
-      this.$emit("update", {target: null, change: eventData});
+      this.$emit("update", { target: null, change: eventData });
     },
     onBeforeUpdateEvent(updateData) {
       console.group("onBeforeUpdateEvent");
@@ -291,7 +296,7 @@ export default {
         targetEvent.calendarId,
         changes
       );
-      this.$emit("update", {target: targetEvent, change: changes});
+      this.$emit("update", { target: targetEvent, change: changes });
     },
 
     onBeforeDeleteEvent({ title, id, calendarId }) {
@@ -300,7 +305,7 @@ export default {
       console.groupEnd();
 
       this.calendarInstance.deleteEvent(id, calendarId);
-      this.$emit("delete", {target: {id, calendarId}});
+      this.$emit("delete", { target: { id, calendarId, title } });
     },
     onAfterRenderEvent({ title }) {
       console.group("onAfterRenderEvent");

src/components/calendar/CalendarData.js

@@ -61,6 +61,15 @@ var allevents = [
     end: today,
     isReadOnly: true,
   },
+  {
+    id: '888',
+    calendarId: 'work',
+    title: '离高考还有 ' + diffDays(new TZDate('2023-06-7'), today) + " 天",
+    category: 'milestone',
+    start: today,
+    end: today,
+    isReadOnly: true,
+  },
   {
     id: '991',
     calendarId: 'work',
@@ -174,7 +183,7 @@ m3.callFS("/matrix/calendar/load.js", param).then((res) => {
       indexevents[event.calendarId].events.push(event);
       indexevents[tid].events.push(event);
     }
-    indexevents["ALL"].events.push(event);
+    // indexevents["ALL"].events.push(event); // indexevents["ALL"].events == allevents
     updateproc();
   }
 }).catch((err) => {
@@ -186,24 +195,32 @@ var onCalendarEventsLoaded = function (fp) {
   calendarEventsLoadedProc = fp;
 }
 
-var updateproc = function() {
+var updateproc = function () {
   var indextitles = [];
-  for(var k in indexevents) {
-    indextitles.push({id: k, name: indexevents[k].name});
+  indextitles.push({ id: "ALL", name: indexevents["ALL"].name });
+  for (var k in indexcalendars) {
+    indextitles.push({ id: k, name: indexevents[k].name });
+  }
+  var titles = Object.keys(titleidmap);
+  titles.sort();
+  for (var ki = 0; ki < titles.length; ki++) {
+    var k = titleidmap[titles[ki]];
+    indextitles.push({ id: k, name: indexevents[k].name });
   }
   if (calendarEventsLoadedProc) {
-    calendarEventsLoadedProc(indexevents, indextitles);
+    calendarEventsLoadedProc(indexevents, indextitles, calendars);
   }
-} 
+}
 
 
 var updateEvent = function (event) {
-  var newdata = {};
   var target = {};
+  var newdata = {};
   if (!event.target) {
-    newdata = event.change;
-    target = newdata;
+    target = event.change;
+    newdata = target;
   } else {
+    target = event.target;
     for (var k in event.target) {
       newdata[k] = event.target[k];
     }
@@ -211,9 +228,10 @@ var updateEvent = function (event) {
       newdata[k] = event.change[k];
     }
   }
-  var tid = getTitleID(target.title);
-  if (!indexevents[tid]) {
-    indexevents[tid] = { name: target.title, events: [] };
+  var otid = getTitleID(target.title);
+  var ntid = getTitleID(newdata.title);
+  if (!indexevents[ntid]) {
+    indexevents[ntid] = { name: newdata.title, events: [] };
   }
   var isnew = true;
   for (var i = 0; i < indexevents["ALL"].events.length; i++) {
@@ -226,7 +244,7 @@ var updateEvent = function (event) {
   if (isnew) {
     indexevents["ALL"].events.push(newdata);
     indexevents[newdata.calendarId].events.push(newdata);
-    indexevents[tid].events.push(newdata);
+    indexevents[ntid].events.push(newdata);
   } else {
     for (var i = 0; i < indexevents[target.calendarId].events.length; i++) {
       if (indexevents[target.calendarId].events[i].id == target.id) {
@@ -234,10 +252,24 @@ var updateEvent = function (event) {
         break;
       }
     }
-    for (var i = 0; i < indexevents[tid].events.length; i++) {
-      if (indexevents[tid].events[i].id == target.id) {
-        indexevents[tid].events[i] = newdata;
-        break;
+    if (otid == ntid) {
+      for (var i = 0; i < indexevents[otid].events.length; i++) {
+        if (indexevents[otid].events[i].id == target.id) {
+          indexevents[otid].events[i] = newdata;
+          break;
+        }
+      }
+    } else {
+      for (var i = 0; i < indexevents[otid].events.length; i++) {
+        if (indexevents[otid].events[i].id == target.id) {
+          indexevents[otid].events.splice(i, 1);
+          indexevents[ntid].events.push(newdata);
+          break;
+        }
+      }
+      if (indexevents[otid].events.length == 0) {
+        delete indexevents[otid];
+        delete titleidmap[target.title];
       }
     }
   }
@@ -246,27 +278,29 @@ var updateEvent = function (event) {
 }
 
 var deleteEvent = function (event) {
+  var target = event.target;
   for (var i = 0; i < indexevents["ALL"].events.length; i++) {
-    if (indexevents["ALL"].events[i].id == event.target.id) {
+    if (indexevents["ALL"].events[i].id == target.id) {
       indexevents["ALL"].events.splice(i, 1);
       break;
     }
   }
-  for (var i = 0; i < indexevents[event.target.calendarId].events.length; i++) {
-    if (indexevents[event.target.calendarId].events[i].id == event.target.id) {
-      indexevents[event.target.calendarId].events.splice(i, 1);
+  for (var i = 0; i < indexevents[target.calendarId].events.length; i++) {
+    if (indexevents[target.calendarId].events[i].id == target.id) {
+      indexevents[target.calendarId].events.splice(i, 1);
       break;
     }
   }
-  var tid = getTitleID(event.target.title);
+  var tid = getTitleID(target.title);
   for (var i = 0; i < indexevents[tid].events.length; i++) {
-    if (indexevents[tid].events[i].id == event.target.id) {
+    if (indexevents[tid].events[i].id == target.id) {
       indexevents[tid].events.splice(i, 1);
       break;
     }
   }
-  if (indexevents[tid].length == 0) {
-    delete (indexevents, tid);
+  if (indexevents[tid].events.length == 0) {
+    delete indexevents[tid];
+    delete titleidmap[target.title];
   }
   updateproc();
   return indexevents;