지난 주 게시물에서 우리는 . 이번 주에는 Vue.js 을 사용하면서 Vue CLI 앱에 캘린더를 추가하는 방법을 살펴보겠습니다.

첫 번째 단계는 install Vue CLI 및 create the app 입니다. (프로세스에 대해 더 자세히 알고 싶다면 done this once before이 있습니다.) 터미널에서 폴더로 이동하여 npm run serve를 실행하면 웹 브라우저에서 http://localhost:8080/을 열 수 있고 다음을 볼 수 있습니다. Vue CLI "hello world"앱.

다음으로 FullCalendar plugins 을 설치하려면 npm install --save @fullcalendar/vue3 @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid 를 실행할 수 있습니다. 그런 다음 다음과 같이 캘린더 구성 요소를 구축할 수 있어야 합니다.

<script>
import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarOptions: {
        plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin ],
        initialView: 'dayGridMonth',
        // Don't show the weekends
        weekends: false,
        // Define the header for the calendar
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        // Define Event Data
        events: 'https://gist.githubusercontent.com/steinbring/80157cc5866de53c8cd975a1673f4425/raw/72d8dfb2880b76ffbd7bb8a48f3803aab3b804ba/events.json'
      }
    }
  }
}
</script>
<template>
  <FullCalendar :options="calendarOptions" />
</template>

우리가 만든 we built out a calendar에서 데이터를 가져오는 지난 번 mock JSON api을 기억할 것입니다. 이 데모는 동일한 헤더 레이아웃, 동일한 기본값 및 (가장 중요하게도) 동일한 모의 API를 사용해야 합니다. 나는 a github repo showing how to do this 뿐만 아니라 a demo site, so that you can see the end-result 을 생성했습니다. 데모 URL은 Render , like my previous examples 에서 호스팅됩니다.

스타인브링 / vue-calendar-demo

FullCalendar를 vue 앱과 함께 사용하는 방법의 예

vue-calendar-demo

프로젝트 설정

npm install

개발을 위한 컴파일 및 핫 리로드

npm run serve

프로덕션을 위해 컴파일 및 축소

npm run build

린트 및 수정 파일

npm run lint

구성 사용자 지정

Configuration Reference을 참조하십시오.


View on GitHub


이 여정의 다음 단계는 모의 API를 실제 API로 교체하는 방법을 보여주는 것입니다. 계속 지켜봐주십시오. 그때까지 질문, 의견 등이 있으면 언제든지 의견을 남겨주세요.