Vue.js FullCalendar v5 구성 요소 - 이벤트가 제대로 표시되지 않습니다.
<p>최근 우리는 Vue.js 프로젝트에서 FullCalendar 구성 요소를 버전 4.4.2에서 버전 5.9.0으로 업그레이드했습니다. 그런데 이벤트가 표시되지 않는 문제가 발생했습니다. 원본 파일에서 이유를 찾을 수 없었기 때문에 완전히 새로운 파일에서 달력을 만들기 시작하기로 결정하고 오류를 찾기 위해 단계별로 달력을 만들기로 했습니다. 그러나 이 새 파일에서도 이벤트를 표시할 수 없으며 현재로서는 내가 무엇을 잘못하고 있는지 전혀 알 수 없습니다. 콘솔에서는 일련의 이벤트를 볼 수 있지만 달력에는 표시할 수 없습니다. </p>
<p>코드는 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;"><템플릿>
<b-컨테이너 유체 @click="logEvents">
<VueFullCalendar :options="calendarOptions" style="너비: 100%;"
</b-컨테이너>
</템플릿>
<스크립트>
'@fullcalendar/vue'에서 VueFullCalendar 가져오기
'@fullcalendar/resource-timegrid'에서 ResourceTimeGrid 가져오기
'@fullcalendar/daygrid'에서 dayGridPlugin 가져오기
'@fullcalendar/timegrid'에서 timeGridPlugin 가져오기
'@fullcalendar/interaction'에서 상호작용 플러그인을 가져옵니다.
'@fullcalendar/list'에서 목록 플러그인 가져오기
기본값 내보내기 {
구성요소: {
VueFullCalendar
},
이름: '캘린더',
데이터: 함수 () {
반품 {
달력옵션: {
플러그인: [dayGridPlugin, timeGridPlugin,interactionPlugin,resourceTimeGrid,listPlugin],
헤더 도구 모음: {
왼쪽: '이전,다음 오늘',
가운데: '제목',
오른쪽: 'dayGridMonth,resourceTimeGridWeek,resourceTimeGridDay'
},
초기 보기: 'resourceTimeGridWeek',
SlotMinTime: '09:00:00',
SlotMaxTime: '21:30:00',
allDaySlot: 거짓,
이벤트: [
{
제목: '이벤트 2',
시작: '2021-09-28T09:00',
종료: '2021-09-28T10:30'
},
{
제목: '이벤트 1',
시작: '2021-09-28T11:00',
종료: '2021-09-28T13:00'
}
]
}
}
},
방법: {
로그이벤트() {
console.log(this.calendarOptions.events)
}
}
}
</스크립트>
<스타일>
@import '~@fullcalendar/list/main.min.css';
<p>내가 뭔가 잘못한 걸까요? </p>
<p>도움을 주셔서 진심으로 감사드립니다. </p>
<p>좋은 소식을 기원합니다. </p>
