|
|
@@ -0,0 +1,131 @@
|
|
|
+<template>
|
|
|
+ <FullCalendar ref="fullCalendar" :options="calendarOptions" class="calendar" id="calendar" />
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+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';
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
+ components: { FullCalendar },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ calendarOptions: {
|
|
|
+ plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin, multiMonthPlugin, bootstrap5Plugin],
|
|
|
+ initialView: "dayGridYear",
|
|
|
+ locale: "zh",
|
|
|
+ firstDay: 1,
|
|
|
+ unselectAuto: true, //当点击页⾯⽇历以外的位置时，是否⾃动取消当前的选中状态。false是不取消
|
|
|
+ selectable: true, //是否可以选中日历格
|
|
|
+ editable: true,
|
|
|
+
|
|
|
+ buttonText: {
|
|
|
+ prev:"上一页",
|
|
|
+ next:"下一页",
|
|
|
+ today: "今天",
|
|
|
+ month: "月",
|
|
|
+ week: "周",
|
|
|
+ day: "日",
|
|
|
+ list: "周列表",
|
|
|
+ },
|
|
|
+ headerToolbar: {
|
|
|
+ left: "prev,next today",
|
|
|
+ center: "title",
|
|
|
+ right: "dayGridYear,multiMonthYearGrid,multiMonthYearStack,dayGridMonth,timeGridWeek,timeGridDay listWeek",
|
|
|
+ themeSystem: "bootstrap5",
|
|
|
+ },
|
|
|
+ views: {
|
|
|
+ multiMonthYearGrid: {
|
|
|
+ type: 'multiMonthYear',
|
|
|
+ buttonText: '年(网格)'
|
|
|
+ },
|
|
|
+ multiMonthYearStack: {
|
|
|
+ type: 'multiMonthYear',
|
|
|
+ buttonText: '年(叠)',
|
|
|
+ multiMonthMaxColumns: 1
|
|
|
+ },
|
|
|
+ dayGridYear: {
|
|
|
+ buttonText: '年(连续的)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ height: 1150,
|
|
|
+ validRange: this.validRange, //设置可显示的总日期范围
|
|
|
+ events: [
|
|
|
+
|
|
|
+ {
|
|
|
+ id: 111,
|
|
|
+ title: "国庆节放假",
|
|
|
+ start: "2022-10-01",
|
|
|
+ end: "2022-10-08",
|
|
|
+ color: "#ffcc99",
|
|
|
+ editable: true, //允许拖动缩放，不写默认就是false
|
|
|
+ overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 222,
|
|
|
+ title: "五一劳动节放假",
|
|
|
+ start: "2022-05-01",
|
|
|
+ end: "2022-05-06",
|
|
|
+ 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, //点击日程触发
|
|
|
+ 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) { },
|
|
|
+ },
|
|
|
+};
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.calendar {
|
|
|
+ width: 70%;
|
|
|
+ height: 100%;
|
|
|
+ margin-left: 250px;
|
|
|
+ margin-top: 70px;
|
|
|
+ margin-bottom: 70px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
