日历算法

src/store/modules/app.ts

@@ -54,7 +54,7 @@ const actions = {
 		})
 	},
 	LOAD_TIMESTAMP({ commit }: any) {
-		const date = new Date('2022-09-18 10:20:32')
+		const date = new Date()
 		commit('SET_TIMESTAMP', date)
 	},
 }

src/views/staging/common/handle.ts

@@ -7,3 +7,35 @@ export const formatDate = (d) => {
   const m = `${_date.getMinutes() < 10 ? `0${_date.getMinutes()}` : _date.getMinutes()}`;
   return `${Y}/${M}/${D} ${H}:${m}`;
 }
+
+export const getMonthCalendarData = (d, fD) => {
+  const getFirstDateOfWeek = (fDate, firstDayOfWeek) => {
+    const day = fDate.getDay();
+    const diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;
+    const firstDate = new Date(fDate.getFullYear(), fDate.getMonth(), fDate.getDate() - diff);
+    return firstDate;
+  }
+  const getLastDateOfWeek = (lDate, lastDayOfWeek) => {
+    const day = lDate.getDay();
+    const diff = (day < lastDayOfWeek ? 7 : 0) + day - lastDayOfWeek;
+    const lastDate = new Date(lDate.getFullYear(), lDate.getMonth(), lDate.getDate() + (6 - diff));
+    return lastDate;
+  }
+  const oneDayTime = 1000 * 60 * 60 * 24
+  const _date = new Date(d)
+  // d的月份有几天
+  const monthDaysTotal = new Date(_date.getFullYear(), _date.getMonth() + 1, 0).getDate()
+  // d的月份的第一天
+  const monthFirstDate = new Date(_date.getFullYear(), _date.getMonth(), 1)
+  // 日历第一天
+  const wholeFirstDay = getFirstDateOfWeek(monthFirstDate, fD)
+  // d的月份的最后一天
+  const monthLastDate = new Date(_date.getFullYear(), _date.getMonth(), monthDaysTotal)
+  // 日历最后一天
+  const wholeLastDay = getLastDateOfWeek(monthLastDate, fD)
+  const arr: any = []
+  for (let i = wholeFirstDay.getTime(); i <= wholeLastDay.getTime(); i += oneDayTime) {
+    arr.push(new Date(i).getDay() + '-' + new Date(i).getDate())
+  }
+  return arr
+}

src/views/staging/zbgly/left/calendar-com.vue

@@ -1,5 +1,19 @@
 <template>
   <BaseBlockCom title="日历提醒">
+    <template #title>
+      <CusFormColumn
+          link="dept"
+          v-model:param="deptId"/>
+      <div class="more">查看更多》</div>
+    </template>
+    <div class="main">
+      <template v-for="item in getWeekCN(startWeek)">
+        <div class="item">{{item}}</div>
+      </template>
+      <template v-for="item in Handle.getMonthCalendarData($store.state.app.timestamp, startWeek)">
+        <div class="item">{{item}}</div>
+      </template>
+    </div>
   </BaseBlockCom>
 </template>
 
@@ -20,6 +34,7 @@ import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import BaseBlockCom from '../../common/base-block.vue'
 import ButtonSwitchCom from '../../common/button-switch.vue'
+import * as Handle from '../../common/handle'
 
 export default defineComponent({
   name: '',
@@ -32,13 +47,50 @@ export default defineComponent({
     const router = useRouter();
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({})
+    const state = reactive({
+      Handle: Handle,
+      deptId: '',
+      startWeek: 0
+    })
+    const getWeekCN = (xq) => {
+      const m = new Map([
+          [0, '日'],
+          [1, '一'],
+          [2, '二'],
+          [3, '三'],
+          [4, '四'],
+          [5, '五'],
+          [6, '六'],
+      ])
+      const weekArray: any = [];
+      for (let i = 0; i < 7; i++) {
+        const index = (xq + i) % 7;
+        weekArray.push(m.get(index));
+      }
+      return weekArray
+    }
+
+    onMounted(() => {
+    })
     return {
-      ...toRefs(state)
+      ...toRefs(state),
+      getWeekCN
     }
   },
 })
 </script>
 
 <style scoped lang="scss">
+.more {
+  font-size: 12px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #2EB8FF;
+  margin-right: 10px;
+}
+.main {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  row-gap: 10px;
+}
 </style>