|
|
@@ -1,6 +1,15 @@
|
|
|
<template>
|
|
|
- <FullCalendar ref="fullCalendar" :options="calendarOptions" class="calendar" id="calendar" />
|
|
|
+ <div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <FullCalendar class="calendar" ref="fullCalendar" :options="calendarOptions">
|
|
|
+ </FullCalendar>
|
|
|
+
|
|
|
</template>
|
|
|
+
|
|
|
+
|
|
|
<script>
|
|
|
import FullCalendar from "@fullcalendar/vue3";
|
|
|
import dayGridPlugin from "@fullcalendar/daygrid";
|
|
|
@@ -9,12 +18,19 @@ import interactionPlugin from "@fullcalendar/interaction";
|
|
|
import listPlugin from "@fullcalendar/list";
|
|
|
import multiMonthPlugin from "@fullcalendar/multimonth";
|
|
|
import bootstrap5Plugin from '@fullcalendar/bootstrap5';
|
|
|
+import { onMounted } from "vue";
|
|
|
+
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
+
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
- components: { FullCalendar },
|
|
|
+ components: {
|
|
|
+ FullCalendar,
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
data() {
|
|
|
return {
|
|
|
calendarOptions: {
|
|
|
@@ -25,10 +41,11 @@ export default {
|
|
|
unselectAuto: true, //当点击页⾯⽇历以外的位置时，是否⾃动取消当前的选中状态。false是不取消
|
|
|
selectable: true, //是否可以选中日历格
|
|
|
editable: true,
|
|
|
-
|
|
|
+ eventDblClick: this.handleEventDblClick, // 双击日历日程事件 (这部分是在源码中添加的)
|
|
|
+ eventClickDelete: this.eventClickDelete, // 点击删除标签事件 (这部分是在源码中添加的)
|
|
|
buttonText: {
|
|
|
- prev:"上一页",
|
|
|
- next:"下一页",
|
|
|
+ prev: "上一页",
|
|
|
+ next: "下一页",
|
|
|
today: "今天",
|
|
|
month: "月",
|
|
|
week: "周",
|
|
|
@@ -58,13 +75,44 @@ export default {
|
|
|
|
|
|
height: 1150,
|
|
|
validRange: this.validRange, //设置可显示的总日期范围
|
|
|
- events: [
|
|
|
+ events: [], //背景色 (添加相同时间的背景色时颜色会重叠)
|
|
|
+ datesSet: this.datesSet, //日期渲染；修改日期范围后触发
|
|
|
+ eventMouseEnter: this.handleEventMouseEnter, //点击日程触发
|
|
|
+ dateClick: this.handleDateClick, //点击日期触发
|
|
|
+ eventDrop: this.calendarEventDropOrResize, //拖动事件触发
|
|
|
+ eventResize: this.calendarEventDropOrResize, //缩放事件触发
|
|
|
+ displayEventTime: false, //不显示具体时间
|
|
|
+ themeSystem: 'bootstrap5',
|
|
|
+ aspectRatio: 1.2, //宽高比
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ validRange: {
|
|
|
+ start: "2022-08-26",
|
|
|
+ end: "2023-02-16",
|
|
|
+ },
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ },
|
|
|
+ onMounted() {
|
|
|
+ console.log(1);
|
|
|
+ setTimeout(() => {
|
|
|
+
|
|
|
+ console.log(this.calendarOptions); }, 2000)
|
|
|
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ datesSet(info) {
|
|
|
+ //注意：该方法在页面初始化时就会触发一次
|
|
|
+ console.log(info);
|
|
|
+ // this.search() //请求本页数据
|
|
|
+ this.calendarOptions.events = [
|
|
|
{
|
|
|
id: 111,
|
|
|
title: "国庆节放假",
|
|
|
- start: "2022-10-01",
|
|
|
- end: "2022-10-08",
|
|
|
+ start: "2024-10-01",
|
|
|
+ end: "2024-10-08",
|
|
|
color: "#ffcc99",
|
|
|
editable: true, //允许拖动缩放，不写默认就是false
|
|
|
overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
|
|
|
@@ -72,8 +120,8 @@ export default {
|
|
|
{
|
|
|
id: 222,
|
|
|
title: "五一劳动节放假",
|
|
|
- start: "2022-05-01",
|
|
|
- end: "2022-05-06",
|
|
|
+ start: "2024-05-01",
|
|
|
+ end: "2024-05-06",
|
|
|
color: "#ffcc99",
|
|
|
editable: true, //允许拖动缩放
|
|
|
},
|
|
|
@@ -85,34 +133,11 @@ export default {
|
|
|
color: "#ffcc99",
|
|
|
editable: true,
|
|
|
},
|
|
|
- ], //背景色 (添加相同时间的背景色时颜色会重叠)
|
|
|
- datesSet: this.datesSet, //日期渲染；修改日期范围后触发
|
|
|
- eventMouseEnter: this.handleEventMouseEnter, //点击日程触发
|
|
|
- dateClick: this.handleDateClick, //点击日期触发
|
|
|
- eventDrop: this.calendarEventDropOrResize, //拖动事件触发
|
|
|
- eventResize: this.calendarEventDropOrResize, //缩放事件触发
|
|
|
- displayEventTime: false, //不显示具体时间
|
|
|
- themeSystem: 'bootstrap5',
|
|
|
- aspectRatio: 1.2, //宽高比
|
|
|
+ ];
|
|
|
|
|
|
-
|
|
|
- },
|
|
|
- validRange: {
|
|
|
- start: "2022-08-26",
|
|
|
- end: "2023-02-16",
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- datesSet(info) {
|
|
|
- //注意：该方法在页面初始化时就会触发一次
|
|
|
- console.log(info);
|
|
|
- // this.search() //请求本页数据
|
|
|
-
|
|
|
},
|
|
|
- handleEventClick(info) { },
|
|
|
- handleDateClick(info) { },
|
|
|
- calendarEventDropOrResize(info) { },
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
};
|
|
|
|
|
|
@@ -126,6 +151,4 @@ export default {
|
|
|
margin-top: 70px;
|
|
|
margin-bottom: 70px;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
</style>
|
