form

.gitignore

@@ -2,6 +2,7 @@
 node_modules/
 dist/
 cnwangzd*
+app/
 
 # local env files
 .env.local

src/App.vue

@@ -24,7 +24,7 @@ export default {
     Header,
     Footer,
     SideBar,
-    Calendar
+    Calendar,
   },
   data(){
     return {

src/components/calendar/Calendar.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-undefined */
-import Calendar from './tuical/toastui-calendar';
+import Calendar from './tuical/toastui-calendar.mjs';
 import Vue from 'vue';
 
 export default Vue.component('ToastUICalendar', {

src/components/calendar/Calendar.vue

@@ -1,100 +1,99 @@
 <template>
   <div>
-  <div style="
-	border: 1px solid #cccccc;
-	padding: 0px 0px 0px 0px;
-	margin: 0px 0px 0px 0px;
-  width: 1200px;
-	overflow: visible;">
-    <span style="margin-left:10px;margin-right:10px;">📅</span>
-    <select
-      v-model="selectedView"
-      class="view-select"
+    <div
+      style="
+        border: 1px solid #cccccc;
+        padding: 0px 0px 0px 0px;
+        margin: 0px 0px 0px 0px;
+        width: 1200px;
+        overflow: visible;
+      "
     >
-      <option
-        v-for="view in viewOptions"
-        :key="view.value"
-        :value="view.value"
-      >
-        {{ view.title }}
-      </option>
-    </select>
-    <div class="buttons">
-      <el-button
-        type="text"
-        @click="onClickTodayButton"
-      >
-        今天
-      </el-button>
-      <el-button
-        type="text" 
-        icon="el-icon-d-arrow-left"
-        @click="onClickMoveButton(-1)"
-      ></el-button>
-      <span class="date-range">{{ dateRangeText }}</span>
-      <el-button
-        type="text"
-        icon="el-icon-d-arrow-right"
-        @click="onClickMoveButton(1)"
-      ></el-button>
+      <span style="margin-left: 10px; margin-right: 10px">📅</span>
+      <select v-model="selectedView" class="view-select">
+        <option
+          v-for="view in viewOptions"
+          :key="view.value"
+          :value="view.value"
+        >
+          {{ view.title }}
+        </option>
+      </select>
+      <div class="buttons">
+        <el-button type="text" @click="onClickTodayButton"> 今天 </el-button>
+        <el-button
+          type="text"
+          icon="el-icon-d-arrow-left"
+          @click="onClickMoveButton(-1)"
+        ></el-button>
+        <span class="date-range">{{ dateRangeText }}</span>
+        <el-button
+          type="text"
+          icon="el-icon-d-arrow-right"
+          @click="onClickMoveButton(1)"
+        ></el-button>
+      </div>
+      <ToastUICalendar
+        ref="calendar"
+        style="height: 550px"
+        :view="'month'"
+        :use-form-popup="true"
+        :use-detail-popup="true"
+        :week="uioption.week"
+        :month="uioption.month"
+        :timezone="{ zones }"
+        :theme="theme"
+        :template="{
+          xxmilestone: getTemplateForMilestone,
+          xxtask: getTemplateForTask,
+          xxallday: getTemplateForAllday,
+          xxtime: getTemplateForTime,
+          monthGridHeader: monthGridHeader,
+          monthMoreTitleDate: monthMoreTitleDate,
+        }"
+        :grid-selection="true"
+        :calendars="calendars"
+        :attendees="attendees"
+        :notices="notices"
+        :events="events"
+        @customFormPopup="onCustomFormPopup"
+        @selectDateTime="onSelectDateTime"
+        @beforeCreateEvent="onBeforeCreateEvent"
+        @beforeUpdateEvent="onBeforeUpdateEvent"
+        @beforeDeleteEvent="onBeforeDeleteEvent"
+        @afterRenderEvent="onAfterRenderEvent"
+        @clickDayName="onClickDayName"
+        @clickEvent="onClickEvent"
+        @clickTimezonesCollapseBtn="onClickTimezonesCollapseBtn"
+      />
     </div>
-    <ToastUICalendar
-      ref="calendar"
-      style="height:550px;"
-      :view="'month'"
-      :use-form-popup="true"
-      :use-detail-popup="true"
-      :week="uioption.week"
-      :month="uioption.month"
-      :timezone="{ zones }"
-      :theme="theme"
-      :template="{
-        xxmilestone: getTemplateForMilestone,
-        xxtask: getTemplateForTask,
-        xxallday: getTemplateForAllday,
-        xxtime: getTemplateForTime,
-        monthGridHeader: monthGridHeader,
-        monthMoreTitleDate: monthMoreTitleDate,
-      }"
-      :grid-selection="true"
-      :calendars="calendars"
-      :attendees="attendees"
-      :notices="notices"
-      :events="events"
-      @selectDateTime="onSelectDateTime"
-      @beforeCreateEvent="onBeforeCreateEvent"
-      @beforeUpdateEvent="onBeforeUpdateEvent"
-      @beforeDeleteEvent="onBeforeDeleteEvent"
-      @afterRenderEvent="onAfterRenderEvent"
-      @clickDayName="onClickDayName"
-      @clickEvent="onClickEvent"
-      @clickTimezonesCollapseBtn="onClickTimezonesCollapseBtn"
-    />
-  </div>
+    <EventForm ref="eventform" style="visibility:hidden;"></EventForm>
   </div>
 </template>
 
 <script>
 /* eslint-disable no-console */
-import ToastUICalendar from './Calendar.js';
-import './tuical/toastui-calendar.css';
-import 'tui-date-picker/dist/tui-date-picker.min.css';
-import 'tui-time-picker/dist/tui-time-picker.min.css';
+import ToastUICalendar from "./Calendar.js";
+import "./tuical/toastui-calendar.css";
+import "tui-date-picker/dist/tui-date-picker.min.css";
+import "tui-time-picker/dist/tui-time-picker.min.css";
 
-import { events, calendars } from './mock-data';
-import { theme } from './theme';
-import './calendar.css';
+import { events, calendars } from "./mock-data";
+import { theme } from "./theme";
+import "./calendar.css";
 
-import { lunar } from './lunar/lunar';
+import { lunar } from "./lunar/lunar";
+import EventForm from "./EventForm.vue";
 
 export default {
   components: {
     ToastUICalendar,
+    EventForm,
   },
   props: {
     attendees: {
       type: Array,
-      default: () => ['*'],
+      default: () => ["*"],
     },
   },
   data() {
@@ -103,31 +102,31 @@ export default {
       notices: [
         {
           id: "n1",
-          name: "notice1"
+          name: "notice1",
         },
         {
           id: "n2",
-          name: "notice2"
+          name: "notice2",
         },
       ],
       events,
       zones: [
         {
-          timezoneName: 'Asia/Shanghai',
-          displayLabel: 'Beijing',
-          tooltip: 'UTC+08:00',
+          timezoneName: "Asia/Shanghai",
+          displayLabel: "Beijing",
+          tooltip: "UTC+08:00",
         },
       ],
       theme,
-      selectedView: 'month',
+      selectedView: "month",
       viewOptions: [
         {
-          title: '月',
-          value: 'month', 
+          title: "月",
+          value: "month",
         },
         {
-          title: '周',
-          value: 'week',
+          title: "周",
+          value: "week",
         },
         // {
         //   title: '天',
@@ -136,18 +135,26 @@ export default {
       ],
       uioption: {
         month: {
-          dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+          dayNames: [
+            "星期日",
+            "星期一",
+            "星期二",
+            "星期三",
+            "星期四",
+            "星期五",
+            "星期六",
+          ],
           startDayOfWeek: 1,
         },
         week: {
-          dayNames: ['日', '一', '二', '三', '四', '五', '六'],
+          dayNames: ["日", "一", "二", "三", "四", "五", "六"],
           showTimezoneCollapseButton: true,
           timezonesCollapsed: false,
           eventView: true,
           taskView: true,
         },
       },
-      dateRangeText: '',
+      dateRangeText: "",
     };
   },
   computed: {
@@ -165,22 +172,28 @@ export default {
     },
   },
   mounted() {
-
-    m3.callFS("/matrix/calendar/load.js").then( (res)=>{
-      //console.log(res)
-      if (res.status == "ok" && res.message && res.message.data && res.message.data.length > 0) {
-        var cals = [];
-        for(var i in calendars) {
-          cals.push(calendars[i]);
-        }
-        for(var i in res.message.calendars) {
-          cals.push(res.message.calendars[i]);
+    m3.callFS("/matrix/calendar/load.js")
+      .then((res) => {
+        //console.log(res)
+        if (
+          res.status == "ok" &&
+          res.message &&
+          res.message.data &&
+          res.message.data.length > 0
+        ) {
+          var cals = [];
+          for (var i in calendars) {
+            cals.push(calendars[i]);
+          }
+          for (var i in res.message.calendars) {
+            cals.push(res.message.calendars[i]);
+          }
+          this.calendarInstance.setCalendars(cals);
         }
-        this.calendarInstance.setCalendars(cals);
-      }
-    }).catch( (err)=>{
-      console.error(err);
-    } );
+      })
+      .catch((err) => {
+        console.error(err);
+      });
 
     this.setDateRangeText();
   },
@@ -198,42 +211,66 @@ export default {
       return `[T] ${event.title}`;
     },
     monthGridHeader(model) {
-      const year = parseInt(model.date.split('-')[0], 10);
-      const month = parseInt(model.date.split('-')[1], 10);
-      const date = parseInt(model.date.split('-')[2], 10);
-      const ld = lunar.solar2lunar(year,month,date)
-      const ldate = ld.lDay==1? ld.IMonthCn : ld.IDayCn; 
+      const year = parseInt(model.date.split("-")[0], 10);
+      const month = parseInt(model.date.split("-")[1], 10);
+      const date = parseInt(model.date.split("-")[2], 10);
+      const ld = lunar.solar2lunar(year, month, date);
+      const ldate = ld.lDay == 1 ? ld.IMonthCn : ld.IDayCn;
       var cls = "toastui-calendar-weekday-grid-date";
-      if(model.isToday){
+      if (model.isToday) {
         cls += " toastui-calendar-weekday-grid-date-decorator";
       }
       cls += " toastui-calendar-template-monthGridHeader";
-      return `<span class="${cls}">${date}</span><span>【${ldate}】</span>`
+      return `<span class="${cls}">${date}</span><span>【${ldate}】</span>`;
     },
     monthMoreTitleDate(moreTitle) {
       const { ymd } = moreTitle;
-      const year = parseInt(ymd.split('-')[0], 10);
-      const month = parseInt(ymd.split('-')[1], 10);
-      const date = parseInt(ymd.split('-')[2], 10);
-      const ld = lunar.solar2lunar(year,month,date);
+      const year = parseInt(ymd.split("-")[0], 10);
+      const month = parseInt(ymd.split("-")[1], 10);
+      const date = parseInt(ymd.split("-")[2], 10);
+      const ld = lunar.solar2lunar(year, month, date);
       const cls = "toastui-calendar-more-title-date";
-      return `<span class="${cls}">${month}月${date}日</span><span>【${ld.IMonthCn}${ld.IDayCn}】${ld.ncWeek}</span>`
+      return `<span class="${cls}">${month}月${date}日</span><span>【${ld.IMonthCn}${ld.IDayCn}】${ld.ncWeek}</span>`;
+    },
+    onCustomFormPopup(eventData) {
+      eventData.CustomEventForm = true;
+      
+      const event = {
+        calendarId: eventData.calendarId || "",
+        id: eventData.id || String(Math.random()),
+        title: eventData.title,
+        isAllday: eventData.isAllday,
+        start: eventData.start,
+        end: eventData.end,
+        category: eventData.category,
+        dueDateClass: "",
+        location: eventData.location,
+        state: eventData.state,
+        isPrivate: eventData.isPrivate,
+        body: eventData.body,
+        attendees: eventData.attendees,
+      };
+
+      this.$refs["eventform"].event = event;
+      this.$refs["eventform"].show();
+
+      eventData.Submit = event;
     },
     onSelectDateTime({ start, end }) {
-      console.group('onSelectDateTime');
+      console.group("onSelectDateTime");
       console.log(`Date : ${start} ~ ${end}`);
       console.groupEnd();
     },
     onBeforeCreateEvent(eventData) {
       const event = {
-        calendarId: eventData.calendarId || '',
+        calendarId: eventData.calendarId || "",
         id: String(Math.random()),
         title: eventData.title,
         isAllday: eventData.isAllday,
         start: eventData.start,
         end: eventData.end,
         category: eventData.category,
-        dueDateClass: '',
+        dueDateClass: "",
         location: eventData.location,
         state: eventData.state,
         isPrivate: eventData.isPrivate,
@@ -244,47 +281,51 @@ export default {
       this.calendarInstance.createEvents([event]);
     },
     onBeforeUpdateEvent(updateData) {
-      console.group('onBeforeUpdateEvent');
+      console.group("onBeforeUpdateEvent");
       console.log(updateData);
       console.groupEnd();
 
       const targetEvent = updateData.event;
       const changes = { ...updateData.changes };
-      
-      this.calendarInstance.updateEvent(targetEvent.id, targetEvent.calendarId, changes);
+
+      this.calendarInstance.updateEvent(
+        targetEvent.id,
+        targetEvent.calendarId,
+        changes
+      );
     },
 
     onBeforeDeleteEvent({ title, id, calendarId }) {
-      console.group('onBeforeDeleteEvent');
-      console.log('Event Info : ', title);
+      console.group("onBeforeDeleteEvent");
+      console.log("Event Info : ", title);
       console.groupEnd();
 
       this.calendarInstance.deleteEvent(id, calendarId);
     },
     onAfterRenderEvent({ title }) {
-      console.group('onAfterRenderEvent');
-      console.log('Event Info : ', title);
+      console.group("onAfterRenderEvent");
+      console.log("Event Info : ", title);
       console.groupEnd();
     },
     onClickDayName({ date }) {
-      console.group('onClickDayName');
-      console.log('Date : ', date);
+      console.group("onClickDayName");
+      console.log("Date : ", date);
       console.groupEnd();
     },
     onClickEvent({ nativeEvent, event }) {
-      console.group('onClickEvent');
-      console.log('MouseEvent : ', nativeEvent);
-      console.log('Event Info : ', event);
+      console.group("onClickEvent");
+      console.log("MouseEvent : ", nativeEvent);
+      console.log("Event Info : ", event);
       console.groupEnd();
     },
     onClickTimezonesCollapseBtn(timezoneCollapsed) {
-      console.group('onClickTimezonesCollapseBtn');
-      console.log('Is Timezone Collapsed?: ', timezoneCollapsed);
+      console.group("onClickTimezonesCollapseBtn");
+      console.log("Is Timezone Collapsed?: ", timezoneCollapsed);
       console.groupEnd();
 
       const newTheme = {
-        'week.daygridLeft.width': '100px',
-        'week.timegridLeft.width': '100px',
+        "week.daygridLeft.width": "100px",
+        "week.timegridLeft.width": "100px",
       };
 
       this.calendarInstance.setTheme(newTheme);
@@ -306,16 +347,22 @@ export default {
       const endYear = end.getFullYear();
 
       switch (this.selectedView) {
-        case 'month':
-          this.dateRangeText = `${date.getFullYear()}年${date.getMonth() + 1}月`;
+        case "month":
+          this.dateRangeText = `${date.getFullYear()}年${
+            date.getMonth() + 1
+          }月`;
 
           return;
-        case 'day':
-          this.dateRangeText = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
+        case "day":
+          this.dateRangeText = `${date.getFullYear()}年${
+            date.getMonth() + 1
+          }月${date.getDate()}日`;
           return;
         default:
-          this.dateRangeText = `${startYear}年${start.getMonth() + 1}月${start.getDate()}日 - ${
-            startYear !== endYear ? `${endYear}年` : ''
+          this.dateRangeText = `${startYear}年${
+            start.getMonth() + 1
+          }月${start.getDate()}日 - ${
+            startYear !== endYear ? `${endYear}年` : ""
           }${end.getMonth() + 1}月${end.getDate()}日`;
       }
     },

src/components/calendar/EventForm.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div class="test">ooooooooooooooooooooo</div>
+    <div class="test">ooooooooooooooooooooo</div>
+    <div class="test">ooooooooooooooooooooo</div>
+  </div>
+</template>
+
+<script>
+
+export default Vue.component("EventForm", {
+    name: "EventForm",
+    props: {
+      event: {},
+    },
+    mounted() {
+    },
+    methods: {
+      show() {
+        
+        alert(JSON.stringify(this.event));
+      }
+    },
+});
+</script>
+<style scoped>
+.test {
+    color: red;
+}
+</style>

src/components/calendar/tuical/toastui-calendar.mjs

@@ -6185,7 +6185,7 @@ function useGridSelection({
           top: (e2.clientY + initMousePosition.y) / 2,
           left: (e2.clientX + initMousePosition.x) / 2
         };
-        showFormPopup({
+        var eventData = {
           isCreationPopup: true,
           title: "",
           location: "",
@@ -6195,7 +6195,16 @@ function useGridSelection({
           isPrivate: false,
           popupArrowPointPosition,
           close: clearAll
-        });
+        };
+        eventBus.fire("customFormPopup", eventData);
+        if (eventData.CustomEventForm) {
+          if (eventData.Submit) {
+            eventBus.fire("beforeCreateEvent", eventData.Submit);
+          }
+          clearGridSelection();
+        } else {
+          showFormPopup(eventData);
+        }
       }
       const gridSelectionSelector = `.${cls(GRID_SELECTION_TYPE_MAP[type])}.${cls("grid-selection")}`;
       const gridSelectionElements = Array.from((_a = layoutContainer == null ? void 0 : layoutContainer.querySelectorAll(gridSelectionSelector)) != null ? _a : []);
@@ -6585,7 +6594,7 @@ function EventDetailPopup() {
   const { useFormPopup } = useStore(optionsSelector);
   const popupParams = useStore(eventDetailPopupParamSelector);
   const { event, eventRect } = popupParams != null ? popupParams : {};
-  const { showFormPopup, hideDetailPopup } = useDispatch("popup");
+  const { hideAllPopup, showFormPopup, hideDetailPopup } = useDispatch("popup");
   const calendarColor = useCalendarColor(event);
   const layoutContainer = useLayoutContainer();
   const detailPopupSlot = useFloatingLayer("detailPopupSlot");
@@ -6631,7 +6640,7 @@ function EventDetailPopup() {
   };
   const onClickEditButton = () => {
     if (useFormPopup) {
-      showFormPopup({
+      var eventData = {
         isCreationPopup: false,
         event,
         title,
@@ -6644,7 +6653,17 @@ function EventDetailPopup() {
         eventCategory: category,
         body,
         popupArrowPointPosition
-      });
+      };
+      eventBus.fire("customFormPopup", eventData);
+      if (eventData.CustomEventForm) {
+        if (eventData.Submit) {
+          const changes = getChanges(event, eventData.Submit);
+          eventBus.fire("beforeUpdateEvent", { event: event.toEventObject(), changes });
+        }
+        hideAllPopup();
+      } else {
+        showFormPopup(eventData);
+      }
     } else {
       eventBus.fire("beforeUpdateEvent", { event: event.toEventObject(), changes: {} });
     }
@@ -7340,7 +7359,8 @@ function EventFormPopup() {
   }), /* @__PURE__ */ h$3(EventCategorySelector, {
     eventCategory: formState.category,
     formStateDispatch
-  }), /* @__PURE__ */ h$3("div", {
+  }),
+  /* @__PURE__ */ h$3("div", {
     className: classNames$j.detailAttendees
   }, /* @__PURE__ */ h$3("div", {
     className: classNames$j.attendeesIcon
@@ -7350,7 +7370,9 @@ function EventFormPopup() {
     template: "popupDetailAttendees",
     param: formState,
     as: "span"
-  }))), /* @__PURE__ */ h$3(ClosePopupButton, {
+  }))),
+
+  /* @__PURE__ */ h$3(ClosePopupButton, {
     type: "form",
     close
   }), /* @__PURE__ */ h$3(PopupSection, null, /* @__PURE__ */ h$3(ConfirmPopupButton, null, isCreationPopup ? /* @__PURE__ */ h$3(Template, {