up

frontent/ops_vue_js/package-lock.json

@@ -8,8 +8,10 @@
       "name": "ops_vue_js",
       "version": "0.0.0",
       "dependencies": {
+        "@fullcalendar/core": "^6.1.19",
         "@fullcalendar/daygrid": "^6.1.19",
         "@fullcalendar/interaction": "^6.1.19",
+        "@fullcalendar/list": "^6.1.19",
         "@fullcalendar/timegrid": "^6.1.19",
         "@fullcalendar/vue3": "^6.1.19",
         "@tabler/core": "^1.4.0",
@@ -1087,6 +1089,15 @@
         "@fullcalendar/core": "~6.1.19"
       }
     },
+    "node_modules/@fullcalendar/list": {
+      "version": "6.1.19",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.19.tgz",
+      "integrity": "sha512-knZHpAVF0LbzZpSJSUmLUUzF0XlU/MRGK+Py2s0/mP93bCtno1k2L3XPs/kzh528hSjehwLm89RgKTSfW1P6cA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.19"
+      }
+    },
     "node_modules/@fullcalendar/timegrid": {
       "version": "6.1.19",
       "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.19.tgz",

frontent/ops_vue_js/package.json

@@ -12,8 +12,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fullcalendar/core": "^6.1.19",
     "@fullcalendar/daygrid": "^6.1.19",
     "@fullcalendar/interaction": "^6.1.19",
+    "@fullcalendar/list": "^6.1.19",
     "@fullcalendar/timegrid": "^6.1.19",
     "@fullcalendar/vue3": "^6.1.19",
     "@tabler/core": "^1.4.0",

frontent/ops_vue_js/src/components/HeardMain.vue

@@ -273,7 +273,7 @@ onMounted(() => {
           <div class="row flex-column flex-md-row flex-fill align-items-center">
             <div class="col d-flex">
               <!-- BEGIN NAVBAR MENU -->
-              <dev class="navbar-nav">
+              <div class="navbar-nav">
                 <router-link
                   to="/"
                   class="nav-item nav-link"
@@ -292,7 +292,7 @@ onMounted(() => {
                     {{ t("appname.schedule") }}
                   </span>
                 </router-link>
-              </dev>
+              </div>
 
               <div class="ms-auto">
                 <select

frontent/ops_vue_js/src/views/loginView.vue

@@ -111,16 +111,17 @@ function login() {
     }
   );
 }
-
-function functionupdataTitle() {
-  document.title = "Operations." + t("appname.login");
-}
 onMounted(() => {
   functionupdataTitle();
   if (userStore.isLoggedIn) {
     router.push("/");
   }
 });
+
+function functionupdataTitle() {
+  document.title = "Operations." + t("appname.login");
+}
+
 // 监听语言变化，更新标题
 watch(locale, () => {
   functionupdataTitle();

frontent/ops_vue_js/src/views/scheduleView.vue

@@ -1,11 +1,70 @@
 <script setup>
-import FullCalendar from '@fullcalendar/vue3'
-import dayGridPlugin from '@fullcalendar/daygrid'
-import timeGridPlugin from '@fullcalendar/timegrid'
-import interactionPlugin from "@fullcalendar/interaction"//拖动插件 需要用npm安装
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction"; //拖动插件 需要用npm安装
+import listPlugin from '@fullcalendar/list';
 
+import { onMounted, watch, ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t, locale } = useI18n();
+
+const calendarOptions = ref({
+  height: "auto",
+  locale: locale.value,
+  plugins: [
+    dayGridPlugin,
+    timeGridPlugin,
+    interactionPlugin, //导入拖动插件
+    listPlugin,
+  ],
+  fixedWeekCount: false, //是否固定显示6行
+  weekNumbers: true,
+  initialView: "dayGridMonth", //默认月视图 dayGridMonth timeGridWeek listWeek
+  editable: true,
+  selectable: true,
+  firstDay: 1,
+  
+  dayCellDidMount(info) {
+    switch (info.dow) {
+      case 0:
+        info.el.style.backgroundColor = "#ffb5b5";
+        break;
+      case 6:
+        info.el.style.backgroundColor = "#ffb5b5";
+        break;
+    }
+
+    if (info.isToday) {
+      //info.el.style.backgroundColor = '#ffff7f';
+    }
+
+    info.el.style.border = "1px solid #4b4b4b"; // 浅蓝色边框
+  },
+
+  events: [
+    { title: "事件 1", start: "2025-11-10" },
+    { title: "事件 2", start: "2025-11-15", end: "2024-06-17" },
+    { title: "事件 3", start: "2025-11-20T10:30:00", end: "2024-06-20T12:30:00" },
+
+  ],
+});
+
+function functionupdataTitle() {
+  document.title = "Operations." + t("appname.schedule");
+}
+
+// 监听语言变化，更新标题
+watch(locale, () => {
+  functionupdataTitle();
+  calendarOptions.value.locale = locale.value;
+});
+
+onMounted(() => {
+  functionupdataTitle();
+});
 </script>
-
 <template>
-    <FullCalendar > </FullCalendar>
-</template>
+  <FullCalendar :options="calendarOptions" />
+</template>