|
|
@@ -0,0 +1,176 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" icon="el-icon-plus" @click="handleAdd">设置工作天数</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <FullCalendar class="fullCalendar" ref="fullCalendar" :options="calendarOptions">
|
|
|
+ <template v-slot:eventContent="arg">
|
|
|
+ <div style="width: 100%;font-size: 14px;">
|
|
|
+ <span>{{ arg.event.extendedProps.startTieme }} ~ {{ arg.event.extendedProps.endTieme }}</span>
|
|
|
+ <div>{{ arg.event.title }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </FullCalendar>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+import { reserveInfo } from "@/api/meeting";
|
|
|
+import FullCalendar from '@fullcalendar/vue'
|
|
|
+import dayGridPlugin from '@fullcalendar/daygrid'
|
|
|
+import interactionPlugin from '@fullcalendar/interaction'
|
|
|
+import timeGridPlugin from '@fullcalendar/timegrid'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ FullCalendar // 像使用自定义组件一样使用
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ status: 1,
|
|
|
+ strDate: this.nowDate(),
|
|
|
+ },
|
|
|
+ calendarApi: null,
|
|
|
+ calendarOptions: {
|
|
|
+ plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin], // 需要用哪个插件引入后放到这个数组里
|
|
|
+ initialDate: new Date(), // 日历第一次加载时显示的初始日期。可以解析为Date的任何职包括ISO8601日期字符串，例如"2014-02-01"。
|
|
|
+ initialView: 'dayGridMonth', // 日历加载时的初始视图，默认值为'dayGridMonth'，可以为任何可用视图的值，如例如'dayGridWeek'，'timeGridDay'，'listWeek'
|
|
|
+ locale: 'zh-cn', // 设置日历的语言，中文为 “zh-cn”
|
|
|
+ displayEventEnd: true,//所有视图显示结束时间
|
|
|
+ firstDay: '1', // 设置每周的第一天，默认值取决于当前语言环境，该值为代表星期几的数字，且值必须为整数，星期日=0
|
|
|
+ weekNumberCalculation: 'ISO', // 指定"ISO"结果为ISO8601周数。指定"ISO"将firstDay的默认值更改为1（Monday）
|
|
|
+ buttonText: { // 文本将显示在headerToolbar / footerToolbar的按钮上。不支持HTML注入。所有特殊字符将被转义。
|
|
|
+ today: '今天',
|
|
|
+ month: '月',
|
|
|
+ week: '周',
|
|
|
+ day: '天'
|
|
|
+ },
|
|
|
+ headerToolbar: { // 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
|
|
|
+ right: 'prev,next today',
|
|
|
+ // center: 'title',
|
|
|
+ // left: 'dayGridMonth,dayGridWeek,dayGridDay'
|
|
|
+ },
|
|
|
+ height: 'auto',
|
|
|
+ eventTimeFormat: { // 在每个事件上显示的时间的格式
|
|
|
+ hour: 'numeric',
|
|
|
+ minute: '2-digit',
|
|
|
+ hour12: false
|
|
|
+ },
|
|
|
+ events: [],
|
|
|
+ customButtons: { // 定义可在headerToolbar / footerToolbar中使用的自定义按钮
|
|
|
+ today: {
|
|
|
+ text: '今天', // 按钮的展示文本
|
|
|
+ click: this.todayClick // 点击按钮触发的事件，这里要注意的是当按钮绑定了事件之后该按钮原本自带的事件将会失效
|
|
|
+ },
|
|
|
+ next: {
|
|
|
+ click: this.nextClick
|
|
|
+ },
|
|
|
+ prev: {
|
|
|
+ click: this.prevClick
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dayCellContent: (info) => {
|
|
|
+ return {html: `<a class="fc-daygrid-day-number">${info.dayNumberText.replace('日','')}</a>`}
|
|
|
+ },
|
|
|
+ eventClick: this.handleDateClick, // 点击事件时，触发该回调
|
|
|
+ // eventMouseEnter: this.handleMouseEnter, // 鼠标悬停在事件上时，触发该回调
|
|
|
+ // eventMouseLeave: this.handleMouseLeave, // 鼠标移除时，触发该回调
|
|
|
+ dateClick: this.handleDateClick // 当用户单击日期或时间时,触发该回调，触发此回调，您必须加载interaction插件
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 这里有两点要注意，想要调用插件的方法，要在组件上设置ref
|
|
|
+ // 并且在组件未加载的时候this.$refs中是没有fullCalendar的，所以未加载的时候调用方法会报错
|
|
|
+ this.calendarApi = this.$refs.fullCalendar.getApi()
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.getEvents();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取当前年月
|
|
|
+ nowDate() {
|
|
|
+ var d = new Date();
|
|
|
+ var month = '';
|
|
|
+ if (d.getMonth() + 1 < 10) {
|
|
|
+ month = '0' + (d.getMonth() + 1)
|
|
|
+ } else {
|
|
|
+ month = d.getMonth() + 1
|
|
|
+ }
|
|
|
+
|
|
|
+ var str = d.getFullYear() + '-' + month;
|
|
|
+ return str;
|
|
|
+ },
|
|
|
+ getEvents() {
|
|
|
+ reserveInfo(this.queryParams).then(response => {
|
|
|
+ const event = response.data // 拿到返回的数据
|
|
|
+ for (var i = 0; i < event.length; i++) {
|
|
|
+ this.calendarOptions.events.push(event[i]) // 使用push方法将事件逐一添加，
|
|
|
+ }
|
|
|
+ console.log(this.calendarOptions.events)
|
|
|
+ this.calendarApi.refetchEvents()
|
|
|
+ // 重新抓取所有的日程事件源上的日程事件并渲染它们。
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 格式化日期
|
|
|
+ formatDate(dateStr) {
|
|
|
+ // 假设 dateStr 是 "2024年8月" 这样的格式
|
|
|
+ const parts = dateStr.match(/(\d+)年(\d+)月/); // 使用正则表达式提取年份和月份
|
|
|
+ if (parts) {
|
|
|
+ const year = parts[1];
|
|
|
+ const month = parts[2].padStart(2, '0'); // 确保月份是两位数
|
|
|
+ return `${year}-${month}`; // 返回格式化后的日期字符串
|
|
|
+ }
|
|
|
+ return null; // 如果格式不匹配，返回null
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNo = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ handleDateClick(dateClickInfo) {
|
|
|
+ console.log(dateClickInfo)
|
|
|
+ },
|
|
|
+ handleMouseEnter(mouseEnterInfo) {
|
|
|
+ console.log(mouseEnterInfo.event.startStr)
|
|
|
+ // 提示：mouseEnterInfo.event.startStr 可以获取当前事件的开始事件
|
|
|
+ },
|
|
|
+ handleMouseLeave(mouseEnterInfo) {
|
|
|
+ console.log(mouseEnterInfo)
|
|
|
+ },
|
|
|
+ todayClick(mouseEvent, htmlElement) {
|
|
|
+ this.calendarApi.today() // 将日历移动到当前日期。
|
|
|
+ this.calendarApi.getDate() // 返回日期的日历的当前日期
|
|
|
+ const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
|
|
|
+ console.log(formattedDate); // 输出: 2024-08
|
|
|
+ },
|
|
|
+ nextClick(mouseEvent, htmlElement) {
|
|
|
+ this.calendarApi.next() // 将日历向前移动一步（例如，一个月或一周）。
|
|
|
+ // 如果dayGridMonth查看日历，则将日历向前移动一个月。
|
|
|
+ // 如果日历位于dayGridWeek或中timeGridWeek，则将日历向前移动一周。
|
|
|
+ // 如果日历位于dayGridDay或中timeGridDay，则将日历向前移动一天。
|
|
|
+ const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
|
|
|
+ console.log(formattedDate);
|
|
|
+ },
|
|
|
+ prevClick(mouseEvent, htmlElement) {
|
|
|
+ this.calendarApi.prev() // 将日历后退一步（例如，一个月或一周）。
|
|
|
+ // 如果dayGridMonth查看日历，则将日历后移一个月。
|
|
|
+ // 如果日历位于dayGridWeek或中timeGridWeek，则将日历后移一周。
|
|
|
+ // 如果日历位于dayGridDay或中timeGridDay，则将日历移回一天。
|
|
|
+ const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
|
|
|
+ console.log(formattedDate); // 输出: 2024-08
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
