vue组件中使用全日历插件fullcalendar,日程安排上使用,功能效果研发中

vue组件中使用全日历fullcalendar,使用方法如下:
1.先把需要用到的包下载好
npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction ‘@fullcalendar/timegrid’ ‘@fullcalendar/list’
2.components注册组件
3.template中使用组件且用options定义数据,具体操作看以下代码

<template><div class="calendar"><!-- <button @click="toggleWeekends">关闭周末</button> --><FullCalendar true ref="fullcalendar" :options="calendarOptions" /></div>
</template><script>
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
// import { formatDate, Calendar } from '@fullcalendar/vue';
import { formatDate, Calendar } from '@fullcalendar/core';
export default {name: '',data() {return {calendarOptions: {plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],initialView: 'dayGridMonth', //初始化视图类型dateClick: this.handleDateClick, //点击日期触发事件// eventClick: this.handleEventClick, //点击事件//weekends: false,selectable: true, //是否可以选择droppable: true,editable: true, //是否可以拖拽编辑events: [{ title: '放假', date: '2021-05-01', id: 1 },{ title: '上班', date: '2021-05-10', id: 2 },],buttonText: {//右侧按钮day: '日视图',month: '月视图',week: '周视图',},headerToolbar: {left: 'prev,next today', // 左侧按钮  点击触发对应顺序的字符串代表的事件center: 'title', // 中间标题right: 'dayGridMonth,dayGridWeek,dayGridDay',// 右侧按钮 点击触发对应顺序的字符串代表的事件},},};},methods: {handleDateClick: function (arg) {//alert('日期是' + arg.dateStr);if (confirm('您是否要在' + arg.dateStr + '添加一个新的事件?')) {this.calendarOptions.events.push({title: '休息',start: arg.date,allDay: arg.allDay,});}},// handleEventClick(info) {//   alert('Event: ' + info.event.title);//   info.el.style.borderColor = 'red';// },// toggleWeekends: function () {//   this.calendarOptions.weekends = !this.calendarOptions.weekends;// },},components: {FullCalendar,},mounted() {document.addEventListener('DOMContentLoaded', function () {let draggableEl = document.getElementById('mydraggable');let calendarEl = document.getElementById('mycalendar');let calendar = new Calendar(calendarEl, {plugins: [interactionPlugin,dayGridPlugin,interactionPlugin,timeGridPlugin,listPlugin,],droppable: true,});calendar.render();new Draggable(draggableEl);});let str = formatDate(new Date(), {month: 'long',year: 'numeric',day: 'numeric',timeZoneName: 'short',timeZone: 'UTC',locale: 'es',});console.log(str);let calendarApi = this.$refs.fullcalendar.getApi();calendarApi.next();},
};
</script><style lang="less" scoped>
.calendar {width: 800px;// height: 500px;
}
</style>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！