fm:
用了两个星期研究这个全日历,具体的命令记不住了,就在packjson文件中导入这些东西 ,注意版本 全日历官网有不同的版本 同样 有些版本不同 就没办法使用
"@fullcalendar/core": "^4.4.2",
"@fullcalendar/daygrid": "^4.3.0",
"@fullcalendar/interaction": "^4.3.0",
"@fullcalendar/list": "^4.4.2",
"@fullcalendar/resource-timeline": "^4.4.2",
"@fullcalendar/timegrid": "^4.3.0",
"@fullcalendar/timeline": "^4.3.0",
"@fullcalendar/vue": "^4.3.1",
import FullCalendar from '@fullcalendar/vue'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import interactionPlugin,{ Draggable } from '@fullcalendar/interaction'
import TodayListDetail from './components/TodayListDetail'
import calendarColor from
import '@fullcalendar/core/main.css'
import '@fullcalendar/timeline/main.css'
import '@fullcalendar/resource-timeline/main.css'
components: {
FullCalendar,
Schedule,
CRMFullScreenDetail: () =>
import('@/components/CRMFullScreenDetail')
},
然后呢 这里就是左侧的拖拽列表 最重要的是 external-events 这个id 最后是通过dom 获取到这个左侧列表监听拖拽到日历中
mounted() {
var containerEl = document.getElementById('external-events');
// 初始化外部事件
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
console.log(eventEl,eventEl.innerText,'11111')
return {
title: eventEl.innerText
}
},
}
);
然后就是日历
<FullCalendar
ref="fullCalendar"
:defaultView="defaultView"
:header="{
left: '',
// center: 'prevYear,prev, title, next,nextYear',
// center: 'title',
center: '