vue fullcalendar
文档 https://fullcalendar.io/docs/vue
<FullCalendar ref="myCalendar" :options="calendarOptions" />
以下是中文备注的一些配置说明需要结合文档和自己的需求修改
export default {
name: 'MaintenanceCalendarview',
components: {
FullCalendar
},
data () {
return {
calendarOptions: {
// 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ],
initialView: 'dayGridMonth', // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
locale: 'zh-cn', // 切换语言，当前为中文
eventColor: '#3BB2E3', // 全部日历日程背景色
themeSystem: 'bootstrap', // 主题色(本地测试未能生效)
initialDate: moment().format('YYYY-MM-DD'), // 自定义设置背景颜色时一定要初始化日期时间
timeGridEventMinHeight: '20', // 设置事件的最小高度
aspectRatio: 1.65, // 设置日历单元格宽度与高度的比例。
// displayEventTime: false, // 是否显示时间
// allDaySlot: false, // 周，日视图时，all-day 不显示
eventLimit: true, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
headerToolbar: { // 日历头部按钮位置
left: '',
center: 'prevYear,prev title next,nextYear',
right: 'today dayGridMonth,timeGridWeek,timeGridDay'
},
buttonText: {
today: '今天',
month: '月',
week: '周',
day: '日'
},
slotLabelFormat: {
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false // 设置时间为24小时
},
eventLimitNum: { // 事件显示数量限制(本地测试未能生效)
dayGrid: {
eventLimit: 5
},
timeGrid: {
eventLimit: 2 // adjust to 6 only for timeGridWeek/timeGridDay
}
},
// 事件
// eventClick: this.handleEventClick, // 点击日历日程事件
eventDblClick: this.handleEventDblClick, // 双击日历日程事件 (这部分是在源码中添加的)
eventClickDelete: this.eventClickDelete, // 点击删除标签事件 (这部分是在源码中添加的)
eventDrop: this.eventDrop, // 拖动日历日程事件
eventResize: this.eventResize, // 修改日历日程大小事件
select: this.handleDateSelect, // 选中日历格事件
eventDidMount: this.eventDidMount, // 安装提示事件
// loading: this.loadingEvent, // 视图数据加载中、加载完成触发（用于配合显示/隐藏加载指示器。）
// selectAllow: this.selectAllow, //编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
eventMouseEnter: this.eventMouseEnter, // 鼠标滑过
allowContextMenu: false,
editable: true, // 是否可以进行（拖动、缩放）修改
eventStartEditable: true, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽
selectable: true, // 是否可以选中日历格
selectMirror: true,
selectMinDistance: 0, // 选中日历格的最小距离
dayMaxEvents: true,
weekends: true,
navLinks: true, // 天链接
selectHelper: false,
slotEventOverlap: false // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
}
}
},
methods: {
eventMouseEnter (event, jsEvent, view) { // 鼠标划过的事件
if (event.event.classNames.length) {
// console.log(event)
}
},
eventDrop (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
console.log(event)
}
}
}
<template>
<div style="margin-top: 20px">
<FullCalendar ref="fullCalendar" :options="calendarOptions"></FullCalendar>
</div>
</template>
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import listPlugin from "@fullcalendar/list";
export default {
//import引入的组件需要注入到对象中才能使用
components: { FullCalendar },
data() {
return {
calendarOptions: {
// 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
initialView: "dayGridMonth", // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
firstDay: 0, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
locale: "zh-cn", // 切换语言，当前为中文
eventColor: "#3BB2E3", // 全部日历日程背景色
themeSystem: "bootstrap", // 主题色(本地测试未能生效)
// initialDate: moment().format("YYYY-MM-DD"), // 自定义设置背景颜色时一定要初始化日期时间
timeGridEventMinHeight: "20", // 设置事件的最小高度
aspectRatio: 2.15, // 设置日历单元格宽度与高度的比例。
// displayEventTime: false, // 是否显示时间
// allDaySlot: false, // 周，日视图时，all-day 不显示
eventLimit: true, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
headerToolbar: {
// 日历头部按钮位置
left: "",
center: "prevYear,prev title next,nextYear",
right: "today dayGridMonth,timeGridWeek,timeGridDay",
},
buttonText: {
today: "今天",
month: "月",
week: "周",
day: "日",
},
slotLabelFormat: {
hour: "2-digit",
minute: "2-digit",
meridiem: false,
hour12: false, // 设置时间为24小时
},
eventLimitNum: {
// 事件显示数量限制(本地测试未能生效)
dayGrid: {
eventLimit: 5,
},
timeGrid: {
eventLimit: 2, // adjust to 6 only for timeGridWeek/timeGridDay
},
},
// 事件
dateClick: this.handleDateClick,
eventClick: this.handleEventClick, // 点击日历日程事件
eventDblClick: this.handleEventDblClick, // 双击日历日程事件 (这部分是在源码中添加的)
eventClickDelete: this.eventClickDelete, // 点击删除标签事件 (这部分是在源码中添加的)
eventDrop: this.eventDrop, // 拖动日历日程事件
eventResize: this.eventResize, // 修改日历日程大小事件
select: this.handleDateSelect, // 选中日历格事件
eventDidMount: this.eventDidMount, // 安装提示事件
// loading: this.loadingEvent, // 视图数据加载中、加载完成触发（用于配合显示/隐藏加载指示器。）
// selectAllow: this.selectAllow, //编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
eventMouseEnter: this.eventMouseEnter, // 鼠标滑过
allowContextMenu: false,
editable: true, // 是否可以进行（拖动、缩放）修改
eventStartEditable: true, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽
selectable: true, // 是否可以选中日历格
selectMirror: true,
selectMinDistance: 0, // 选中日历格的最小距离
dayMaxEvents: true,
weekends: true,
navLinks: true, // 天链接
selectHelper: false,
slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
events: [
{
title: "可以拖动但不能缩放",
start: "2022-09-01 12:30",
end: "2022-09-28 13:30",
editable: true,
color: "000", //背景颜色
}, //可以拖动但不能缩放，但在周、日视图中是可以进行缩放的
{
title: "可以拖动、缩放",
start: "2022-09-02 00:00",
end: "2022-09-02 23:59",
color: "red",
editable: true,
}, //可以拖动、缩放
{
title: "event 2",
start: "2022-09-02",
end: "2022-09-02",
color: "red",
editable: true,
},
{
title: "event 1",
// date: "2022-09-20",
// start: "2022-09-02 00:00", //如果添加了时分秒和不添加显示的方式不同
start: "2022-09-20",
end: "2022-09-20",
// classNames: ["cal"], //这个是显示的背影状态
editable: true,
},
{
title: "event 1",
date: "2022-09-01",
// classNames: ["cal"], //这个是显示的背影状态
editable: true,
},
{
title: "event 1",
date: "2022-09-01",
// classNames: ["cal"], //这个是显示的背影状态
editable: true,
},
{
title: "event 1",
date: "2022-09-01",
// classNames: ["cal"], //这个是显示的背影状态
editable: true,
},
{
title: "event 11",
date: "2022-09-01",
// classNames: ["continuousClass"], //这个是显示的背影状态
editable: true,
},
{
start: "2022-09-24",
end: "2022-09-28",
overlap: false,
display: "background", //不显示内容
color: "#ff9f89",
}, //背景色 (添加相同时间的背景色时颜色会重叠) 一点要初始化日期时间 initialDate: '2020-07-10',
],
},
};
},
methods: {
handleEventClick(info) {
console.log("点击事件==", info.event.title);
console.log("点击事件===", info.view.type);
},
handleDateClick: function (arg) {
console.log("date click! " + arg.dateStr);
},
},
};
</script>
<style lang="scss" scoped>
/deep/.fc-header-toolbar div.fc-toolbar-chunk:nth-child(2) {
display: flex;
align-items: center;
}
</style>
版权声明：本文由Web学习之路发布，如需转载请注明出处。
