自己在VUE下使用fullCalendar 遇到的坑，记录下来，以备查询
最终解决还是要看官网文档：https://fullcalendar.io/docs
可以参考别人的翻译，但是有延迟，因为翻译容易过时了，官方文档是不断更新的。
虽然是英文
1.慢慢看懂，最重要得懂。
2.用谷歌翻译成中文，虽然不准，但大概意思还是对的，就像做阅读理解。哈
下面记下自己的代码，能备查询
<template> <div id="mycalendar"> <person-head :title="title"></person-head> <div class="main"> <FullCalendar ref="fullCalendar" defaultView="dayGridMonth" locale="zh-cn" firstDay="1" weekNumberCalculation="ISO" :header="header" :plugins="calendarPlugins" :events="calendarEvents" height="800" contentHeight="auto" :showNonCurrentDates="false" :custom-buttons="customButtons" @eventClick="handleEventClick" /> </div> <!-- <div class="data">{{calendarEvents}}</div>--> </div> </template> <script> import FullCalendar from '@fullcalendar/vue' import dayGridPlugin from '@fullcalendar/daygrid' import interactionPlugin from '@fullcalendar/interaction' import personHead from '../share/header/personHead' export default { name: 'MyCalendar', components: { FullCalendar, personHead }, data () { return { calendarPlugins: [ dayGridPlugin, interactionPlugin // needed for dateClick ], header: { left: 'prev', center: 'title', right: 'today next' }, customButtons: { prev: { // this overrides the prev button text: "PREV", click: () => { console.log("eventPrev") // this.$refs.calendar.prev() let calendarApi = this.$refs.fullCalendar.getApi() calendarApi.prev() console.log(calendarApi.view.title) console.log(calendarApi.view.type) console.log(calendarApi.view.activeStart) console.log(calendarApi.view.activeEnd) console.log(calendarApi.view.currentStart.getFullYear().toString()) console.log((calendarApi.view.currentStart.getMonth() + 1).toString()) console.log(calendarApi.view.currentEnd) // let dateObject = this.$refs.fullCalendar.getDate() // console.log(dateObject.format('L')) this.getCalendar(calendarApi.view.currentStart.getFullYear().toString(), (calendarApi.view.currentStart.getMonth() + 1).toString()) } }, next: { // this overrides the next button text: "下一月", click: () => { console.log("eventNext") let calendarApi = this.$refs.fullCalendar.getApi() calendarApi.next() this.getCalendar(calendarApi.view.currentStart.getFullYear().toString(), (calendarApi.view.currentStart.getMonth() + 1).toString()) } } }, title: '我的日程', // calendarEvents: [] calendarEvents: [] } }, mounted () { this.getCalendar(2020, 3) }, created () { }, methods: { /* 使用方法 @dateClick="handleDateClick" handleDateClick (arg) { if (confirm('您是否要在' + arg.dateStr + '添加一个新的事件?')) { this.calendarEvents.push({ // add new event data title: '新的事件', start: arg.date, allDay: arg.allDay }) } }, */ handleEventClick (info) { alert('课程: ' + info.event.title) // change the border color just for fun info.el.style.borderColor = 'red' }, next () { alert('next') }, getCalendar (year, month) { let data = { search_id: '', // year: '2020', year: year, // month: '3' month: month } this.$axios({ method: 'GET', url: '/api/app/v1/get_live_course_calendar2', params: data, headers: { 'sign': this.$encryption(data, this.$store.state.token, this.$store.state.uid) } }) .then(res => { console.log(res) console.log(res.data.data) if (res.data.errcode === 200) { this.calendarEvents = res.data.data this.modifyCss() // this.monthData = res.data; } else if (res.data.errcode === -1) { this.$store.dispatch('alterName', '') this.$store.dispatch('alterNickname', '') this.$store.dispatch('alterPortrait', '') this.$store.dispatch('alterSchool', '') this.$store.dispatch('alterToken', '') this.$store.dispatch('alterUid', '') this.$store.dispatch('alterVipname', '') this.$store.dispatch('alterViptime', '') this.$router.push({name: 'PwdLogin', query: {backto: 'MyCalendar'}}) } else { console.log(res.data.message) } }) .catch(err => { console.log(err) }) } } } </script> <style scoped lang="stylus"> #mycalendar height: 100vh background-color: #f3f5f7 >>> .main margin: 0 auto padding: .2rem background-color: #fff .fc direction: ltr; text-align: left; .fc-rtl text-align: right; body .fc /* extra precedence to overcome jqui */ font-size: 1em; /* Colors --------------------------------------------------------------------------------------------------*/ .fc-highlight /* when user is selecting cells */ background: #bce8f1; opacity: 0.3; .fc-bgevent /* default look for background events */ background: #8fdf82; opacity: 0.3; .fc-nonbusiness /* default look for non-business-hours areas */ /* will inherit .fc-bgevent's styles */ background: #d7d7d7; /* Popover --------------------------------------------------------------------------------------------------*/ .fc-popover position: absolute; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); .fc-popover .fc-header /* TODO: be more consistent with fc-head/fc-body */ display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 2px 4px; .fc-rtl .fc-popover .fc-header flex-direction: row-reverse; .fc-popover .fc-header .fc-title margin: 0 2px; .fc-popover .fc-header .fc-close cursor: pointer; opacity: 0.65; font-size: 1.1em; /* Misc Reusable Components --------------------------------------------------------------------------------------------------*/ .fc-divider border-style: solid; border-width: 1px; hr.fc-divider height: 0; margin: 0; padding: 0 0 2px; /* height is unreliable across browsers, so use padding */ border-width: 1px 0; .fc-bg, .fc-bgevent-skeleton, .fc-highlight-skeleton, .fc-mirror-skeleton /* these element should always cling to top-left/right corners */ position: absolute; top: 0; left: 0; right: 0; .fc-bg bottom: 0; /* strech bg to bottom edge */ .fc-bg table height: 100%; /* strech bg to bottom edge */ /* Tables --------------------------------------------------------------------------------------------------*/ .fc table width: 100%; box-sizing: border-box; /* fix scrollbar issue in firefox */ table-layout: fixed; border-collapse: collapse; border-spacing: 0; font-size: 1em; /* normalize cross-browser */ .fc th text-align: center; .fc th, .fc td border-style: solid; border-width: 1px; padding: 0; vertical-align: top; .fc td.fc-today border-style: double; /* overcome neighboring borders */ /* Internal Nav Links --------------------------------------------------------------------------------------------------*/ a[data-goto] cursor: pointer; a[data-goto]:hover text-decoration: underline; /* Fake Table Rows --------------------------------------------------------------------------------------------------*/ .fc .fc-row /* extra precedence to overcome themes forcing a 1px border */ /* no visible border by default. but make available if need be (scrollbar width compensation) */ border-style: solid; border-width: 0; .fc-row table /* don't put left/right border on anything within a fake row. the outer tbody will worry about this */ border-left: 0 hidden transparent; border-right: 0 hidden transparent; /* no bottom borders on rows */ border-bottom: 0 hidden transparent; .fc-row:first-child table border-top: 0 hidden transparent; /* no top border on first row */ /* Day Row (used within the header and the DayGrid) --------------------------------------------------------------------------------------------------*/ .fc-row position: relative; .fc-row .fc-bg z-index: 1; /* highlighting cells & background event skeleton */ .fc-row .fc-bgevent-skeleton, .fc-row .fc-highlight-skeleton bottom: 0; /* stretch skeleton to bottom of row */ .fc-row .fc-bgevent-skeleton table, .fc-row .fc-highlight-skeleton table height: 100%; /* stretch skeleton to bottom of row */ .fc-row .fc-highlight-skeleton td, .fc-row .fc-bgevent-skeleton td border-color: transparent; .fc-row .fc-bgevent-skeleton z-index: 2; .fc-row .fc-highlight-skeleton z-index: 3; /* row content (which contains day/week numbers and events) as well as "mirror" (which contains temporary rendered events). */ .fc-row .fc-content-skeleton position: relative; z-index: 4; padding-bottom: 2px; /* matches the space above the events */ .fc-row .fc-mirror-skeleton z-index: 5; .fc .fc-row .fc-content-skeleton table, .fc .fc-row .fc-content-skeleton td, .fc .fc-row .fc-mirror-skeleton td /* see-through to the background below */ /* extra precedence to prevent theme-provided backgrounds */ background: none; /* in case <td>s are globally styled */ border-color: transparent; .fc-row .fc-content-skeleton td, .fc-row .fc-mirror-skeleton td /* don't put a border between events and/or the day number */ border-bottom: 0; .fc-row .fc-content-skeleton tbody td, .fc-row .fc-mirror-skeleton tbody td /* don't put a border between event cells */ border-top: 0; /* Scrolling Container --------------------------------------------------------------------------------------------------*/ .fc-scroller -webkit-overflow-scrolling: touch; /* TODO: move to timegrid/daygrid */ .fc-scroller > .fc-day-grid, .fc-scroller > .fc-time-grid position: relative; /* re-scope all positions */ width: 100%; /* hack to force re-sizing this inner element when scrollbars appear/disappear */ /* Global Event Styles --------------------------------------------------------------------------------------------------*/ .fc-event position: relative; /* for resize handle and other inner positioning */ display: block; /* make the <a> tag block */ font-size: 0.85em; line-height: 1.4; border-radius: 3px; border: 1px solid #3788d8; .fc-event, .fc-event-dot background-color: #3788d8; /* default BACKGROUND color */ .fc-event, .fc-event:hover color: #fff; /* default TEXT color */ text-decoration: none; /* if <a> has an href */ .fc-event[href], .fc-event.fc-draggable cursor: pointer; /* give events with links and draggable events a hand mouse pointer */ .fc-not-allowed, .fc-not-allowed .fc-event /* to override an event's custom cursor */ cursor: not-allowed; .fc-event .fc-content position: relative; z-index: 2; /* resizer (cursor AND touch devices) */ .fc-event .fc-resizer position: absolute; z-index: 4; /* resizer (touch devices) */ .fc-event .fc-resizer display: none; .fc-event.fc-allow-mouse-resize .fc-resizer, .fc-event.fc-selected .fc-resizer /* only show when hovering or selected (with touch) */ display: block; /* hit area */ .fc-event.fc-selected .fc-resizer:before /* 40x40 touch area */ content: ""; position: absolute; z-index: 9999; /* user of this util can scope within a lower z-index */ top: 50%; left: 50%; width: 40px; height: 40px; margin-left: -20px; margin-top: -20px; /* Event Selection (only for touch devices) --------------------------------------------------------------------------------------------------*/ .fc-event.fc-selected z-index: 9999 !important; /* overcomes inline z-index */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); .fc-event.fc-selected:after content: ""; position: absolute; z-index: 1; /* same z-index as fc-bg, behind text */ /* overcome the borders */ top: -1px; right: -1px; bottom: -1px; left: -1px; /* darkening effect */ background: #000; opacity: 0.25; /* Event Dragging --------------------------------------------------------------------------------------------------*/ .fc-event.fc-dragging.fc-selected box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3); .fc-event.fc-dragging:not(.fc-selected) opacity: 0.75; /* Horizontal Events --------------------------------------------------------------------------------------------------*/ /* bigger touch area when selected */ .fc-h-event.fc-selected:before content: ""; position: absolute; z-index: 3; /* below resizers */ top: -10px; bottom: -10px; left: 0; right: 0; /* events that are continuing to/from another week. kill rounded corners and butt up against edge */ .fc-ltr .fc-h-event.fc-not-start, .fc-rtl .fc-h-event.fc-not-end margin-left: 0; border-left-width: 0; padding-left: 1px; /* replace the border with padding */ border-top-left-radius: 0; border-bottom-left-radius: 0; .fc-ltr .fc-h-event.fc-not-end, .fc-rtl .fc-h-event.fc-not-start margin-right: 0; border-right-width: 0; padding-right: 1px; /* replace the border with padding */ border-top-right-radius: 0; border-bottom-right-radius: 0; /* resizer (cursor AND touch devices) */ /* left resizer */ .fc-ltr .fc-h-event .fc-start-resizer, .fc-rtl .fc-h-event .fc-end-resizer cursor: w-resize; left: -1px; /* overcome border */ /* right resizer */ .fc-ltr .fc-h-event .fc-end-resizer, .fc-rtl .fc-h-event .fc-start-resizer cursor: e-resize; right: -1px; /* overcome border */ /* resizer (mouse devices) */ .fc-h-event.fc-allow-mouse-resize .fc-resizer width: 7px; top: -1px; /* overcome top border */ bottom: -1px; /* overcome bottom border */ /* resizer (touch devices) */ .fc-h-event.fc-selected .fc-resizer /* 8x8 little dot */ border-radius: 4px; border-width: 1px; width: 6px; height: 6px; border-style: solid; border-color: inherit; background: #fff; /* vertically center */ top: 50%; margin-top: -4px; /* left resizer */ .fc-ltr .fc-h-event.fc-selected .fc-start-resizer, .fc-rtl .fc-h-event.fc-selected .fc-end-resizer margin-left: -4px; /* centers the 8x8 dot on the left edge */ /* right resizer */ .fc-ltr .fc-h-event.fc-selected .fc-end-resizer, .fc-rtl .fc-h-event.fc-selected .fc-start-resizer margin-right: -4px; /* centers the 8x8 dot on the right edge */ /* DayGrid events ---------------------------------------------------------------------------------------------------- We use the full "fc-day-grid-event" class instead of using descendants because the event won't be a descendant of the grid when it is being dragged. */ .fc-day-grid-event margin: 1px 2px 0; /* spacing between events and edges */ padding: 0 1px; tr:first-child > td > .fc-day-grid-event margin-top: 2px; /* a little bit more space before the first event */ .fc-mirror-skeleton tr:first-child > td > .fc-day-grid-event margin-top: 0; /* except for mirror skeleton */ .fc-day-grid-event .fc-content /* force events to be one-line tall */ white-space: nowrap; overflow: hidden; .fc-day-grid-event .fc-time font-weight: bold; /* resizer (cursor devices) */ /* left resizer */ .fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer, .fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer margin-left: -2px; /* to the day cell's edge */ /* right resizer */ .fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer, .fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer margin-right: -2px; /* to the day cell's edge */ /* Event Limiting --------------------------------------------------------------------------------------------------*/ /* "more" link that represents hidden events */ a.fc-more margin: 1px 3px; font-size: 0.85em; cursor: pointer; text-decoration: none; a.fc-more:hover text-decoration: underline; .fc-limited /* rows and cells that are hidden because of a "more" link */ display: none; /* popover that appears when "more" link is clicked */ .fc-day-grid .fc-row z-index: 1; /* make the "more" popover one higher than this */ .fc-more-popover z-index: 2; width: 220px; .fc-more-popover .fc-event-container padding: 10px; /* Now Indicator --------------------------------------------------------------------------------------------------*/ .fc-now-indicator position: absolute; border: 0 solid red; /* Utilities --------------------------------------------------------------------------------------------------*/ .fc-unselectable -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* TODO: more distinction between this file and common.css */ /* Colors --------------------------------------------------------------------------------------------------*/ .fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-content, .fc-unthemed .fc-popover, .fc-unthemed .fc-list-view, .fc-unthemed .fc-list-heading td border-color: #ddd; .fc-unthemed .fc-popover background-color: #fff; .fc-unthemed .fc-divider, .fc-unthemed .fc-popover .fc-header, .fc-unthemed .fc-list-heading td background: #eee; .fc-unthemed td.fc-today background: #fcf8e3; .fc-unthemed .fc-disabled-day background: #d7d7d7; opacity: 0.3; /* Icons -------------------------------------------------------------------------------------------------- from https://feathericons.com/ and built with IcoMoon */ @font-face font-family: "fcicons"; src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype"); font-weight: normal; font-style: normal; .fc-icon /* use !important to prevent issues with browser extensions that change fonts */ font-family: "fcicons" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; .fc-icon-chevron-left:before content: ""; .fc-icon-chevron-right:before content: ""; .fc-icon-chevrons-left:before content: ""; .fc-icon-chevrons-right:before content: ""; .fc-icon-minus-square:before content: ""; .fc-icon-plus-square:before content: ""; .fc-icon-x:before content: ""; .fc-icon display: inline-block; width: 1em; height: 1em; text-align: center; /* Buttons -------------------------------------------------------------------------------------------------- Lots taken from Flatly (MIT): https://bootswatch.com/4/flatly/bootstrap.css */ /* reset */ .fc-button border-radius: 0; overflow: visible; text-transform: none; margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; .fc-button:focus outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; .fc-button -webkit-appearance: button; .fc-button:not(:disabled) cursor: pointer; .fc-button::-moz-focus-inner padding: 0; border-style: none; /* theme */ .fc-button display: inline-block; font-weight: 400; color: #212529; text-align: center; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.4em 0.65em; font-size: 1em; line-height: 1.5; border-radius: 0.25em; .fc-button:hover color: #212529; text-decoration: none; .fc-button:focus outline: 0; -webkit-box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25); box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25); .fc-button:disabled opacity: 0.65; /* "primary" coloring */ .fc-button-primary color: #fff; background-color: #2C3E50; border-color: #2C3E50; .fc-button-primary:hover color: #fff; background-color: #1e2b37; border-color: #1a252f; .fc-button-primary:focus -webkit-box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5); box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5); .fc-button-primary:disabled color: #fff; background-color: #2C3E50; border-color: #2C3E50; .fc-button-primary:not(:disabled):active, .fc-button-primary:not(:disabled).fc-button-active color: #fff; background-color: #1a252f; border-color: #151e27; .fc-button-primary:not(:disabled):active:focus, .fc-button-primary:not(:disabled).fc-button-active:focus -webkit-box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5); box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5); /* icons within buttons */ .fc-button .fc-icon vertical-align: middle; font-size: 1.5em; /* Buttons Groups --------------------------------------------------------------------------------------------------*/ .fc-button-group position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; .fc-button-group > .fc-button position: relative; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; .fc-button-group > .fc-button:hover z-index: 1; .fc-button-group > .fc-button:focus, .fc-button-group > .fc-button:active, .fc-button-group > .fc-button.fc-button-active z-index: 1; .fc-button-group > .fc-button:not(:first-child) margin-left: -1px; .fc-button-group > .fc-button:not(:last-child) border-top-right-radius: 0; border-bottom-right-radius: 0; .fc-button-group > .fc-button:not(:first-child) border-top-left-radius: 0; border-bottom-left-radius: 0; /* Popover --------------------------------------------------------------------------------------------------*/ .fc-unthemed .fc-popover border-width: 1px; border-style: solid; /* List View --------------------------------------------------------------------------------------------------*/ .fc-unthemed .fc-list-item:hover td background-color: #f5f5f5; /* Toolbar --------------------------------------------------------------------------------------------------*/ .fc-toolbar display: flex; justify-content: space-between; align-items: center; .fc-toolbar.fc-header-toolbar margin-bottom: 1.5em; .fc-toolbar.fc-footer-toolbar margin-top: 1.5em; /* inner content */ .fc-toolbar > * > :not(:first-child) margin-left: 0.75em; .fc-toolbar h2 font-size: 1.75em; margin: 0; /* View Structure --------------------------------------------------------------------------------------------------*/ .fc-view-container position: relative; /* undo twitter bootstrap's box-sizing rules. normalizes positioning techniques */ /* don't do this for the toolbar because we'll want bootstrap to style those buttons as some pt */ .fc-view-container *, .fc-view-container *:before, .fc-view-container *:after -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; .fc-view, .fc-view > table /* so dragged elements can be above the view's main element */ position: relative; z-index: 1; fc-scroller.fc-day-grid-container height: auto /* .fc-view border: 1px solid #000 .fc-row height: 80px table width: 100% border-collapse: collapse td border: .02rem solid #ccc .fc-header-toolbar display: flex justify-content: space-between margin: .3rem auto .fc-button width: .8rem height: .4rem background-color: #1a252f border-color: #151e27 padding: .02rem .4rem color: #fff border-radius: .05rem text-align: center .fc-icon width: .8rem height: .4rem font-size: .3rem */ </style>
仅供参考一些参数和函数方法
