FullCalendar API 사용방법 : Programming Story

오늘은 FullCalendar API로 달력을 띄워보는 프로젝트를 실시해보겠다.

https://fullcalendar.io/docs/initialize-globals

너무나도 달력 API로 잘 알려진 Full Calendar

설치 방법과 사용 방법도 매우 간단하다.

일단

npm install @fullcalendar/core @fullcalendar/interaction @fullcalendar/daygrid

위 명령어로 full calendar를 설치하자.

만약 여기서 bash terminal에서 npm 명령어가 듣지 않는다면 node.js 부터 설치하고 시스템 경로를 추가해준 뒤 시행해주면 된다.

그런 다음에 index.html 파일에

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>

위와 같이 Full Calendar API를 불러오는 소스를 작성해주면 끝!

역시 잘 만들어진 API를 활용하면 금방 원하는 결과를 산출할 수 있다.

로컬에서 서버를 띄워주면

이런식으로 달력 완성!

여기에 원하는 기능을 더 추가하여 나만의 달력을 만들 수 있다.