|
|
@@ -1,16 +1,24 @@
|
|
|
<template>
|
|
|
- <FullCalendar ref="fullCalendar" :options="calendarOptions" class="calendar" id="calendar" />
|
|
|
+ <FullCalendar
|
|
|
+ ref="fullCalendar"
|
|
|
+ :options="calendarOptions"
|
|
|
+ class="calendar"
|
|
|
+ id="calendar"
|
|
|
+ />
|
|
|
</template>
|
|
|
<script>
|
|
|
+import tippy from "tippy.js"; //引入 tippy.js
|
|
|
+import "tippy.js/dist/tippy.css"; //引入 tippy.js
|
|
|
+import "tippy.js/themes/light.css"; //引入主题
|
|
|
+import "tippy.js/animations/scale.css";
|
|
|
+
|
|
|
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 multiMonthPlugin from "@fullcalendar/multimonth";
|
|
|
-import bootstrap5Plugin from '@fullcalendar/bootstrap5';
|
|
|
-
|
|
|
-
|
|
|
+import bootstrap5Plugin from "@fullcalendar/bootstrap5";
|
|
|
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
@@ -18,17 +26,24 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
calendarOptions: {
|
|
|
- plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin, multiMonthPlugin, bootstrap5Plugin],
|
|
|
+ plugins: [
|
|
|
+ dayGridPlugin,
|
|
|
+ timeGridPlugin,
|
|
|
+ interactionPlugin,
|
|
|
+ listPlugin,
|
|
|
+ multiMonthPlugin,
|
|
|
+ bootstrap5Plugin,
|
|
|
+ ],
|
|
|
initialView: "dayGridYear",
|
|
|
locale: "zh",
|
|
|
firstDay: 1,
|
|
|
unselectAuto: true, //当点击页⾯⽇历以外的位置时，是否⾃动取消当前的选中状态。false是不取消
|
|
|
selectable: true, //是否可以选中日历格
|
|
|
editable: true,
|
|
|
-
|
|
|
+
|
|
|
buttonText: {
|
|
|
- prev:"上一页",
|
|
|
- next:"下一页",
|
|
|
+ prev: "上一页",
|
|
|
+ next: "下一页",
|
|
|
today: "今天",
|
|
|
month: "月",
|
|
|
week: "周",
|
|
|
@@ -38,53 +53,53 @@ export default {
|
|
|
headerToolbar: {
|
|
|
left: "prev,next today",
|
|
|
center: "title",
|
|
|
- right: "dayGridYear,multiMonthYearGrid,multiMonthYearStack,dayGridMonth,timeGridWeek,timeGridDay listWeek",
|
|
|
+ right:
|
|
|
+ "dayGridYear,multiMonthYearGrid,multiMonthYearStack,dayGridMonth,timeGridWeek,timeGridDay listWeek",
|
|
|
themeSystem: "bootstrap5",
|
|
|
},
|
|
|
views: {
|
|
|
multiMonthYearGrid: {
|
|
|
- type: 'multiMonthYear',
|
|
|
- buttonText: '年(网格)'
|
|
|
+ type: "multiMonthYear",
|
|
|
+ buttonText: "年(网格)",
|
|
|
},
|
|
|
multiMonthYearStack: {
|
|
|
- type: 'multiMonthYear',
|
|
|
- buttonText: '年(叠)',
|
|
|
- multiMonthMaxColumns: 1
|
|
|
+ type: "multiMonthYear",
|
|
|
+ buttonText: "年(叠)",
|
|
|
+ multiMonthMaxColumns: 1,
|
|
|
},
|
|
|
dayGridYear: {
|
|
|
- buttonText: '年(连续的)'
|
|
|
- }
|
|
|
+ buttonText: "年(连续的)",
|
|
|
+ },
|
|
|
},
|
|
|
|
|
|
height: 1150,
|
|
|
validRange: this.validRange, //设置可显示的总日期范围
|
|
|
events: [
|
|
|
-
|
|
|
- {
|
|
|
- id: 111,
|
|
|
- title: "国庆节放假",
|
|
|
- start: "2024-10-01",
|
|
|
- end: "2024-10-08",
|
|
|
- color: "#ffcc99",
|
|
|
- editable: true, //允许拖动缩放，不写默认就是false
|
|
|
- overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
|
|
|
- },
|
|
|
- {
|
|
|
- id: 222,
|
|
|
- title: "五一劳动节放假",
|
|
|
- start: "2024-05-01",
|
|
|
- end: "2024-05-06",
|
|
|
- color: "#ffcc99",
|
|
|
- editable: true, //允许拖动缩放
|
|
|
- },
|
|
|
- {
|
|
|
- id: 333,
|
|
|
- title: "端午节放假",
|
|
|
- start: "2024-06-08",
|
|
|
- end: "2024-06-11",
|
|
|
- color: "#ffcc99",
|
|
|
- editable: true,
|
|
|
- },
|
|
|
+ {
|
|
|
+ id: 111,
|
|
|
+ title: "国庆节放假",
|
|
|
+ start: "2024-10-01",
|
|
|
+ end: "2024-10-08",
|
|
|
+ color: "#ffcc99",
|
|
|
+ editable: true, //允许拖动缩放，不写默认就是false
|
|
|
+ overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 222,
|
|
|
+ title: "五一劳动节放假",
|
|
|
+ start: "2024-05-18 00:00:00",
|
|
|
+ end: "2024-05-18 00:00:00",
|
|
|
+ color: "#ffcc99",
|
|
|
+ editable: true, //允许拖动缩放
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 333,
|
|
|
+ title: "端午节放假",
|
|
|
+ start: "2024-06-08",
|
|
|
+ end: "2024-06-11",
|
|
|
+ color: "#ffcc99",
|
|
|
+ editable: true,
|
|
|
+ },
|
|
|
], //背景色 (添加相同时间的背景色时颜色会重叠)
|
|
|
datesSet: this.datesSet, //日期渲染；修改日期范围后触发
|
|
|
eventMouseEnter: this.handleEventMouseEnter, //点击日程触发
|
|
|
@@ -92,10 +107,16 @@ export default {
|
|
|
eventDrop: this.calendarEventDropOrResize, //拖动事件触发
|
|
|
eventResize: this.calendarEventDropOrResize, //缩放事件触发
|
|
|
displayEventTime: false, //不显示具体时间
|
|
|
- themeSystem: 'bootstrap5',
|
|
|
+ themeSystem: "bootstrap5",
|
|
|
aspectRatio: 1.2, //宽高比
|
|
|
-
|
|
|
-
|
|
|
+ eventDidMount: function (info) {
|
|
|
+ console.log('111',info);
|
|
|
+ var tooltip = new tippy(info.el, {
|
|
|
+ content: info.event.start, //悬浮框展示的内容
|
|
|
+ theme: "tomato", //自定义主题，//悬浮框主题，默认主题中的light主题（白底黑字）
|
|
|
+ allowHTML: true, //为true的时候，可以识别content中的html
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
validRange: {
|
|
|
start: "2022-08-26",
|
|
|
@@ -108,23 +129,23 @@ export default {
|
|
|
//注意：该方法在页面初始化时就会触发一次
|
|
|
console.log(info);
|
|
|
// this.search() //请求本页数据
|
|
|
-
|
|
|
},
|
|
|
- handleEventClick(info) { },
|
|
|
- handleDateClick(info) { },
|
|
|
- calendarEventDropOrResize(e) {
|
|
|
- console.log(e);
|
|
|
- console.log(this.calendarOptions.events);
|
|
|
- const index =this.calendarOptions.events.findIndex((item) => item.id == e.event.id)
|
|
|
- console.log(this.calendarOptions.events[index]);
|
|
|
- this.calendarOptions.events[index].start=e.event.startStr
|
|
|
- this.calendarOptions.events[index].end=e.event.endStr
|
|
|
- console.log(e.event.startStr);
|
|
|
- console.log(e.event.endStr);
|
|
|
+ handleEventClick(info) {},
|
|
|
+ handleDateClick(info) {},
|
|
|
+ calendarEventDropOrResize(e) {
|
|
|
+ console.log("@", e);
|
|
|
+ console.log("@@", this.calendarOptions.events);
|
|
|
+ const index = this.calendarOptions.events.findIndex(
|
|
|
+ (item) => item.id == e.event.id
|
|
|
+ );
|
|
|
+ console.log("@@@", this.calendarOptions.events[index]);
|
|
|
+ this.calendarOptions.events[index].start = e.event.startStr;
|
|
|
+ this.calendarOptions.events[index].end = e.event.endStr;
|
|
|
+ console.log("@@@@", e.event.startStr);
|
|
|
+ console.log("@@@@@", e.event.endStr);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -135,6 +156,4 @@ export default {
|
|
|
margin-top: 70px;
|
|
|
margin-bottom: 70px;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
</style>
|
