月日历信息展示

vue_project/package-lock.json

@@ -7,7 +7,15 @@
     "": {
       "name": "vue_project",
       "version": "0.1.0",
-      "dependencies": {
+      "license": "ISC",
+      "dependencies": {
+        "@fullcalendar/core": "^6.1.13",
+        "@fullcalendar/daygrid": "^6.1.13",
+        "@fullcalendar/interaction": "^6.1.13",
+        "@fullcalendar/list": "^6.1.13",
+        "@fullcalendar/multimonth": "^6.1.13",
+        "@fullcalendar/timegrid": "^6.1.13",
+        "@fullcalendar/vue3": "^6.1.13",
         "axios": "^1.7.2",
         "core-js": "^3.8.3",
         "element-plus": "^2.7.3",
@@ -1927,6 +1935,69 @@
       "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.2.tgz",
       "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
     },
+    "node_modules/@fullcalendar/core": {
+      "version": "6.1.13",
+      "resolved": "https://registry.npmmirror.com/@fullcalendar/core/-/core-6.1.13.tgz",
+      "integrity": "sha512-Cps/hMQan4kwnsBhFf2+m2mijbGoWs6r18ZzxBnAAOkkNHtPmHU8EdR6lF+ZLsiVvb7nsC4H/ZKqnxXWwgpoPw==",
+      "dependencies": {
+        "preact": "~10.12.1"
+      }
+    },
+    "node_modules/@fullcalendar/daygrid": {
+      "version": "6.1.13",
+      "resolved": "https://registry.npmmirror.com/@fullcalendar/daygrid/-/daygrid-6.1.13.tgz",
+      "integrity": "sha512-0I0hL1kgGjkZuc7Qt8mu4jjrqIL5PZzd58bEpTxoXRKI5UBZ9KbshGVMryQSXYANlrRtkPnXVt90VIDrxZbDrA==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.13"
+      }
+    },
+    "node_modules/@fullcalendar/interaction": {
+      "version": "6.1.13",
+      "resolved": "https://registry.npmmirror.com/@fullcalendar/interaction/-/interaction-6.1.13.tgz",
+      "integrity": "sha512-r1w+jqCRGZZyxKFquueDSFvbsFhJLhc1BX8Nlyz684lYxS1SiToYJW9Q8X/XkySCzpjO3KOnxEp2jVOn1Usyjg==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.13"
+      }
+    },
+    "node_modules/@fullcalendar/list": {
+      "version": "6.1.13",
+      "resolved": "https://registry.npmmirror.com/@fullcalendar/list/-/list-6.1.13.tgz",
+      "integrity": "sha512-bPW4EsgGNwDZh91NtD+q4hqGfS6jEvCXQo7+MNy4JLMwFtdenEURRrzsb6CW3l97L3Vp0E2mSqiXaNESOmXEcQ==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.13"
+      }
+    },
+    "node_modules/@fullcalendar/multimonth": {
+      "version": "6.1.13",
+      "resolved": "https://registry.npmmirror.com/@fullcalendar/multimonth/-/multimonth-6.1.13.tgz",
+      "integrity": "sha512-fn0BaLaMNkLmFzxijGZXYcO/fHQkuCcQV1R44mnu/01V4uSnFM1KPt2+V+6SgNiW1+ZNkUBHkkSLST1XdZjodw==",
+      "dependencies": {
+        "@fullcalendar/daygrid": "~6.1.13"
+      },
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.13"
+      }
+    },
+    "node_modules/@fullcalendar/timegrid": {
+      "version": "6.1.13",
+      "resolved": "https://registry.npmmirror.com/@fullcalendar/timegrid/-/timegrid-6.1.13.tgz",
+      "integrity": "sha512-8Ub2mSV+6Mh8WWDKuyCYbj5PKYpmyjSctpJ/21fDBJduE9QFS0WfG9CZZxSJT7CT+srnyk4mX2/5gYN9gYZjUg==",
+      "dependencies": {
+        "@fullcalendar/daygrid": "~6.1.13"
+      },
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.13"
+      }
+    },
+    "node_modules/@fullcalendar/vue3": {
+      "version": "6.1.13",
+      "resolved": "https://registry.npmmirror.com/@fullcalendar/vue3/-/vue3-6.1.13.tgz",
+      "integrity": "sha512-m4pEeYXKo79lnLJAGRrNPxovZWXFXSS/5F+QXLN/eXljP/F2caFG/Bj24eFTXHlj1QykgJ56iwC8ZLpShMdANg==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.13",
+        "vue": "^3.0.11"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -9467,6 +9538,15 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/preact": {
+      "version": "10.12.1",
+      "resolved": "https://registry.npmmirror.com/preact/-/preact-10.12.1.tgz",
+      "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/prelude-ls/-/prelude-ls-1.2.1.tgz",

vue_project/package.json

@@ -8,6 +8,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fullcalendar/core": "^6.1.13",
+    "@fullcalendar/daygrid": "^6.1.13",
+    "@fullcalendar/interaction": "^6.1.13",
+    "@fullcalendar/list": "^6.1.13",
+    "@fullcalendar/multimonth": "^6.1.13",
+    "@fullcalendar/timegrid": "^6.1.13",
+    "@fullcalendar/vue3": "^6.1.13",
     "axios": "^1.7.2",
     "core-js": "^3.8.3",
     "element-plus": "^2.7.3",
@@ -44,5 +51,9 @@
     "last 2 versions",
     "not dead",
     "not ie 11"
-  ]
+  ],
+  "description": "```\r npm install\r ```",
+  "main": "babel.config.js",
+  "author": "",
+  "license": "ISC"
 }

vue_project/src/App.vue

@@ -1,30 +1,10 @@
 <template>
-  <div id="app">
-    <!-- <LoginForm/> -->
-    <!-- <RegisterForm/> -->
-    <calendar/>
-  </div>
-  
+  <!-- 路由占位符    指定组件的出现位置-->
+  <router-view></router-view>
 </template>
 
 <script>
-import LoginForm from './components/LoginForm.vue';
-import RegisterForm from './components/RegisterForm.vue';
-import calendar from './components/CalendarTable.vue';
 
-export default {
-  components: {
-    LoginForm,
-    RegisterForm,
-    calendar
-  },
-  data() {
-   
-  },
-  methods: {
-   
-  },
-};
 </script>
 
 <style>

vue_project/src/api/index.js

@@ -2,28 +2,28 @@ import request from "@/utils/request"
 
 //登录的接口
 export const login = (data) => {
-  return request.post("user/login", data);
+  return request.post("/login", data);
 };
 //获取用户信息的接口
-export const getUserInfo = (info) => {
-  return request.get("user/getUserInfo");
-};
+// export const getUserInfo = (info) => {
+//   return request.get("user/getUserInfo");
+// };
 
 //注册校验的接口 
-export const registerValidateApi = (username) => {
-  return request({
-    method: "post",
-    url: "user/checkUserName",
-    headers: {
-      "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
-    },
-    data: `username=${username}`
-  })
-};
+// export const registerValidateApi = (username) => {
+//   return request({
+//     method: "post",
+//     url: "user/checkUserName",
+//     headers: {
+//       "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
+//     },
+//     data: `username=${username}`
+//   })
+// };
 
 // 注册的接口
 export const registerApi = (userInfo) => {
-  return request.post("user/register", userInfo)
+  return request.post("/register", userInfo)
 }
 
 

vue_project/src/components/demo.vue

@@ -0,0 +1,81 @@
+<template>
+  <FullCalendar ref="fullCalendar" :options="calendarOptions"></FullCalendar>
+</template>
+<script>
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import listPlugin from "@fullcalendar/list";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: { FullCalendar },
+  data() {
+    return {
+      calendarOptions: {
+        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
+        initialView: "dayGridMonth",
+        locale: "zh",
+        firstDay: 1,
+        unselectAuto: true, //当点击页⾯⽇历以外的位置时，是否⾃动取消当前的选中状态。false是不取消
+        selectable: true, //是否可以选中日历格
+        buttonText: {
+          today: "今天",
+          month: "月",
+          week: "周",
+          day: "日",
+          list: "周列表",
+        },
+        headerToolbar: {
+          left: "prev,next today",
+          center: "title",
+          right: "dayGridMonth,timeGridWeek,timeGridDay listWeek",
+        },
+        height: 650,
+        validRange: this.validRange, //设置可显示的总日期范围
+        events: [], //背景色 (添加相同时间的背景色时颜色会重叠)
+        datesSet: this.datesSet, //日期渲染；修改日期范围后触发
+        eventClick: this.handleEventClick, //点击日程触发
+        dateClick: this.handleDateClick, //点击日期触发
+        eventDrop: this.calendarEventDropOrResize, //拖动事件触发
+        eventResize: this.calendarEventDropOrResize, //缩放事件触发
+        displayEventTime: false, //不显示具体时间
+      },
+      validRange: {
+        start: "2021-09-01",
+        end: "2029-09-01",
+      },
+    };
+  },
+  methods: {
+    datesSet(info) {
+      //注意：该方法在页面初始化时就会触发一次
+      console.log(info);
+      // this.search()  //请求本页数据
+      //虚拟数据
+      this.calendarOptions.events = [
+        {
+          id: 111,
+          title: "国庆节放假",
+          start: "2024-10-01",
+          end: "2024-10-08",
+          color: "#ffcc99",
+          editable: true, //允许拖动缩放，不写默认就是false
+          overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
+        },
+        {
+          id: 222,
+          title: "五一劳动节放假",
+          start: "2024-05-01",
+          end: "2024-05-06",
+          color: "#ffcc99",
+          editable: true, //允许拖动缩放
+        },
+      ];
+    },
+    handleEventClick(info) {},
+    handleDateClick(info) {},
+    calendarEventDropOrResize(info) {},
+  },
+};
+</script>

vue_project/src/components/test.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="8">
+        <div class="formBox">
+          <el-date-picker
+            size="small"
+            v-model="yearMonth"
+            type="month"
+            placeholder="选择月"
+            value-format="yyyy-MM"
+            :clearable="false"
+          >
+          </el-date-picker>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div style="text-align: center">
+          <el-button
+            type="primary"
+            size="mini"
+            icon="el-icon-caret-left"
+            circle
+          ></el-button>
+          <span class="dateText">{{ yearMonth }}</span>
+          <el-button
+            size="mini"
+            type="primary"
+            icon="el-icon-caret-right"
+            circle
+          ></el-button>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div></div>
+      </el-col>
+    </el-row>
+  </div>
+  <FullCalendar ref="fullCalendar" :options="calendarOptions" />
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from "@fullcalendar/daygrid";          //日历格子显示
+import interactionPlugin from "@fullcalendar/interaction";  //拖拽插件
+import timeGridPlugin from "@fullcalendar/timegrid";        //日历时间线视图
+const calendarOptions = reactive({
+  height: "100%",
+  plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
+  initialView: "timeGridWeek", // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
+  weekends: true, // 显示周末
+  firstDay: 0, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推  new Date().getDay()当前天
+  locale: "zh-cn", // 切换语言，当前为中文
+  unselectAuto: true, //当点击页⾯⽇历以外的位置时，是否⾃动取消当前的选中状态。false是不取消
+  selectable: true, //是否可以选中日历格
+});
+const calendarDate = ref("")
+const yearMonth = ref("")
+</script>
+
+
+<style>
+</style>

vue_project/src/router/router.js

@@ -1,12 +1,12 @@
 export const staticRoutes = [
     {
       path: "/",
-      redirect: "/register",
+      redirect: "/login",
     },
     // {
     //   // 主页
     //   path: "/index",
-    //   component: () => import("../components/HelloWorld.vue"),
+    //   component: () => import("../components/"),
     //   name: "Index",
     // },
     {
@@ -21,6 +21,18 @@ export const staticRoutes = [
       component: () => import("../components/RegisterForm.vue"),
       name: "Register",
     },
+    {
+      //注册
+      path: "/test",
+      component: () => import("../components/test.vue"),
+      name: "test",
+    },
+    {
+      //注册
+      path: "/demo",
+      component: () => import("../components/demo.vue"),
+      name: "demo",
+    }
     // {
     //   //商品
     //   path: "/calendar",

vue_project/vue.config.js

@@ -3,4 +3,15 @@ module.exports = defineConfig({
   transpileDependencies: true,
   // 关闭语法检测
   lintOnSave: false,
+
+    // 代理服务器  解决跨域问题
+    devServer:{
+      port: 8080,
+      proxy:{
+        "api":{
+          target:"http://localhost:8888",
+          pathRewrite:{"^/api":""}
+        }
+      }
+    },
 })