日历

 <template>
 <template>
   <div>
   <div>
-    <el-calendar v-model="currentDate" :range="calendarRange">
+    <el-calendar ref="calendar" v-model="currentDate" :range="calendarRange">
+      <template #header="{ date }">
+        <div class="father">
+          <span class="textDay">{{ date }}</span>
+          <el-button-group class="son">
+            <el-button size="small" type="primary" @click="selectDateCalendar('prev-month')">
+              上一月
+            </el-button>
+            <el-button size="small" type="primary" @click="selectDateCalendar('today')">今天</el-button>
+            <el-button size="small" type="primary" @click="selectDateCalendar('next-month')">
+              下一月
+            </el-button>
+          </el-button-group>
+        </div>
+      
+      </template>
       <template #date-cell="data">
       <template #date-cell="data">
         <div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
         <div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
           {{ data.data.day.slice(8, 10) }}
           {{ data.data.day.slice(8, 10) }}
         </div>
         </div>
-      
       </template>
       </template>
     </el-calendar>
     </el-calendar>
     <div class="calendarList">
     <div class="calendarList">
@@ -30,14 +44,15 @@ import { dayjs } from 'element-plus'
 import { getIndexScheduleList } from '@/apiPc/common'
 import { getIndexScheduleList } from '@/apiPc/common'
 import { useRouter } from 'vue-router'
 import { useRouter } from 'vue-router'
 
 
+const calendar = ref('')
 const router = useRouter()
 const router = useRouter()
 const currentDate = ref(new Date())
 const currentDate = ref(new Date())
-const calendarRange = ref([dayjs('2025-07-17').toDate(), dayjs('2025-07-17').toDate()])
+// const calendarRange = ref([dayjs().toDate(), dayjs().toDate()])
 const schList = ref([])
 const schList = ref([])
 const loading = ref(false)
 const loading = ref(false)
 const query = ref({
 const query = ref({
   // currentDate:dayjs().format('YYYY-MM-DD')
   // currentDate:dayjs().format('YYYY-MM-DD')
-  currentDate: '2025-07-17'
+  currentDate: dayjs().format('YYYY-MM-DD')
 })
 })
 getScheduleList()
 getScheduleList()
 
 
@@ -68,6 +83,16 @@ function goMatch(n) {
     }
     }
   })
   })
 }
 }
+
+const selectDateCalendar = (val) => {
+  if (!calendar.value) return
+  calendar.value.selectDate(val)
+  if (val == 'today') {
+    query.value.currentDate = dayjs().toDate()
+    getScheduleList()
+  }
+}
+
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
@@ -190,4 +215,23 @@ function goMatch(n) {
   }
   }
 }
 }
 
 
+.father {
+  text-align: center;
+  position: relative;
+  width: 100%;
+}
+
+.son {
+  position: absolute;
+  right: 0;
+  width: 200px;
+}
+
+.textDay {
+  font-weight: bold;
+  background: linear-gradient(to right, #8623FC, #453DEA); /* 定义渐变方向和颜色 */
+  -webkit-background-clip: text; /* 兼容 WebKit 浏览器 */
+  background-clip: text; /* 标准语法 */
+  -webkit-text-fill-color: transparent; /* 文字颜色透明 */
+}
 </style>
 </style>

@@ -174,7 +174,7 @@
                 <template #default="scope">
                 <template #default="scope">
                   <div>
                   <div>
                     <span :class="`flag-icon flag-icon-${scope.row.code}`" />
                     <span :class="`flag-icon flag-icon-${scope.row.code}`" />
-                    {{ language == 0 ? scope.row.name : scope.row.countryNameEn }}
+                    {{ language == 0 ? scope.row.name : scope.row.enName }}
                   </div>
                   </div>
                 </template>
                 </template>
               </el-table-column>
               </el-table-column>