Bladeren bron

日历组件增加是否显示相邻月份日期配置

cfort 11 maanden geleden
bovenliggende
commit
2f28fa3df1
2 gewijzigde bestanden met toevoegingen van 30 en 2 verwijderingen
  1. 29 2
      src/components/ibps-fullcalendar/index.vue
  2. 1 0
      src/views/system/homepage/components/mySchedule.vue

+ 29 - 2
src/components/ibps-fullcalendar/index.vue

@@ -27,14 +27,25 @@ export default {
     props: {
         options: {
             type: Object,
-            default: () => {}
+            default: () => ({})
+        },
+        // 新增配置项:是否隐藏其他月份日期
+        hideOtherMonthDays: {
+            type: Boolean,
+            default: false
         }
     },
     data () {
         return {
             calendarOptions: {
                 plugins: [dayGridPlugin, timeGridPlugin, listPlugin, bootstrapPlugin, interactionPlugin],
-                initialView: 'dayGridMonth'
+                initialView: 'dayGridMonth',
+                fixedWeekCount: false,
+                views: {
+                    dayGridMonth: {
+                        showNonCurrentDates: !this.hideOtherMonthDays // 是否隐藏非当前月日期
+                    }
+                }
             }
         }
     },
@@ -49,6 +60,22 @@ export default {
         locale () {
             return lang.localeMap[I18n.getLanguage()]
         }
+    },
+    watch: {
+        hideOtherMonthDays: {
+            handler (newVal) {
+                const calendarApi = this.$refs.fullCalendar?.getApi()
+                if (calendarApi) {
+                    calendarApi.setOption('views', {
+                        dayGridMonth: {
+                            showNonCurrentDates: !this.hideOtherMonthDays // 根据 prop 反转逻辑
+                        }
+                    })
+                    calendarApi.render() // 强制重新渲染
+                }
+            },
+            immediate: true
+        }
     }
 }
 </script>

+ 1 - 0
src/views/system/homepage/components/mySchedule.vue

@@ -15,6 +15,7 @@
         <v-full-calendar
             ref="calendar"
             :options="scheduleConfig"
+            :hide-other-month-days="true"
             :style="{height: '100%', width: '100%'}"
         />
     </el-dialog>