up

frontend/ops_vue_js/src/views/scheduleView.vue

@@ -1,134 +1,89 @@
-<script setup>
-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";
+<script setup>
+import { ref, watch } from 'vue'
+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'
+import { useI18n } from 'vue-i18n'
+import { usePageTitle } from '@/composables/usePageTitle'
 
-import { onMounted, watch, ref } from "vue";
-import { useI18n } from "vue-i18n";
-
-const { t, locale } = useI18n();
-
-const calendar = ref(null);
+usePageTitle('appname.schedule')
+const { t, locale } = useI18n()
 
+const calendarRef = ref(null)
 
 const calendarOptions = ref({
-  height: "auto",
+  height: 'auto',
   locale: locale.value,
-  plugins: [
-    dayGridPlugin,
-    timeGridPlugin,
-    interactionPlugin, //导入拖动插件
-    listPlugin,
-  ],
-  fixedWeekCount: false, //是否固定显示6行
-  weekNumbers: true,
-  initialView: "dayGridMonth", //默认月视图 dayGridMonth timeGridWeek listWeek
-  editable: true,
+  plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
+  nowIndicator: true,
+  weekends: true,
+  initialView: 'dayGridMonth',
   selectable: true,
+  editable: true,
+  dayMaxEvents: true,
+  navLinks: 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.date.getDay() === 0 || info.date.getDay() === 6) {
+      info.el.style.backgroundColor = '#f5f5f5'
     }
-
-    if (info.isToday) {
-      //info.el.style.backgroundColor = '#ffff7f';
-    }
-
-    info.el.style.border = "1px solid #4b4b4b"; // 浅蓝色边框
+    info.el.style.border = '1px solid #e5e7eb'
   },
+
   headerToolbar: {
-    left: "prevYearCustom,prevMonthCustom,todayCustom,nextMonthCustom,nextYearCustom",
-    center: "title",
-    right: "", //,timeGridWeek,timeGridDay'
+    left: 'prevYear,prev,next,nextYear',
+    center: 'title',
+    right: '',
   },
 
-  // 自定义按钮
   customButtons: {
-    prevYearCustom: {
+    prevYear: {
       text: t('schedule.previous_year'),
-      click: function () {
-        calendar.value.getApi().prevYear();
-      },
+      click() { calendarRef.value.getApi().prevYear() },
     },
-    nextYearCustom: {
+    nextYear: {
       text: t('schedule.next_year'),
-      click: function () {
-        calendar.value.getApi().nextYear();
-      },
+      click() { calendarRef.value.getApi().nextYear() },
     },
-    prevMonthCustom: {
+    prevMonth: {
       text: t('schedule.previous_month'),
-      click: function () {
-        calendar.value.getApi().prev();
-      },
+      click() { calendarRef.value.getApi().prev() },
     },
-    nextMonthCustom: {
+    nextMonth: {
       text: t('schedule.next_month'),
-      click: function () {
-        calendar.value.getApi().next();
-      },
+      click() { calendarRef.value.getApi().next() },
     },
-    todayCustom: {
-      text: t('schedule.month'),
-      click: function () {
-        calendar.value.getApi().today();
-      },
+    week: {
+      text: t('schedule.week'),
+      click() { calendarRef.value.getApi().changeView('timeGridWeek') },
     },
   },
 
   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",
-    },
+    { title: 'Event1', date: '2025-11-10' },
+    { title: 'Event2', date: '2025-11-15', end: '2025-11-17' },
+    { title: 'Event3', date: '2025-11-20T10:30:00', end: '2025-11-20T12:30:00' },
   ],
-});
+})
 
-function functionupdataTitle() {
-  document.title = "Operations." + t("appname.schedule");
-}
-
-// 监听语言变化，更新标题
 watch(locale, () => {
-  functionupdataTitle();
-  calendarOptions.value.locale = locale.value;
-
-  // 更新自定义按钮文本
-  calendarOptions.value.customButtons.prevYearCustom.text = t('schedule.previous_year');
-  calendarOptions.value.customButtons.nextYearCustom.text = t('schedule.next_year');
-  calendarOptions.value.customButtons.prevMonthCustom.text = t('schedule.previous_month');
-  calendarOptions.value.customButtons.nextMonthCustom.text = t('schedule.next_month');
-  calendarOptions.value.customButtons.todayCustom.text = t('schedule.month');
-});
-
-onMounted(() => {
-  functionupdataTitle();
-});
+  calendarOptions.value.locale = locale.value
+  calendarOptions.value.headerToolbar.customButtons.prevYear.text = t('schedule.previous_year')
+  calendarOptions.value.headerToolbar.customButtons.nextYear.text = t('schedule.next_year')
+  calendarOptions.value.headerToolbar.customButtons.prevMonth.text = t('schedule.previous_month')
+  calendarOptions.value.headerToolbar.customButtons.nextMonth.text = t('schedule.next_month')
+  calendarOptions.value.headerToolbar.customButtons.week.text = t('schedule.week')
+})
 </script>
+
 <template>
-  <FullCalendar ref="calendar" :options="calendarOptions" />
+  <div class="mx-auto max-w-6xl px-6 py-6">
+    <h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-white">{{ t('schedule.my_schedule') }}</h2>
+    <div class="rounded-xl border border-gray-200 bg-white px-4 py-4 shadow-lg dark:border-dk-muted dark:bg-dk-card">
+      <FullCalendar ref="calendarRef" :options="calendarOptions" />
+    </div>
+  </div>
 </template>
-
-
-<style scoped>
-/* .fc-prevYearCustom-button {
-    background-color: #4CAF50 !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 5px !important;
-    padding: 8px 16px !important;
-    font-weight: bold !important;
-} */
-</style>