[TIL] 20220506 캠프 19일차

C____JIN·2022년 5월 6일

TIL 내일배움캠프

TIL 1.0

목록 보기

9/78

1. FullCalendar

1) FullCalendar에서 달력 불러오기

main.js, main.css 파일 / Example 파일 다운로드
- fullcalendar-5.11.0.zip
- main.js, main.css를 적용해야 정상 작동
기본 코드

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link href='fullcalendar/main.css' rel='stylesheet' />
    <script src='fullcalendar/main.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>

2. Google Calendar API

1) Google Calendar를 FullCalendar에 연동하기

구글 콘솔 접속하기

프로젝트 생성

라이브러리에서 Google Calendar API 찾아서 시작하기

API 키 발급받기

구글 캘린더에서 새로운 캘린더 생성하고 공개 설정하기

캘린더 ID 기억하기

소스코드

let calendar = new Calendar(calendarEl, {
  plugins: [ googleCalendarPlugin ],
  googleCalendarApiKey: '<YOUR API KEY>',
  events: {
    googleCalendarId: 'abcd1234@group.calendar.google.com',
    className: 'gcal-event' // an option!
  }
});

3. 마무리

팀프로젝트에서 구글 캘린더 API를 사용하려고 구글 캘린더 일정을 달력에 표시에서 웹사이트에 출력하는 기능을 하기 위해 찾아서 연습을 해보았다. 결국에 원하는 결과를 만들 수 없어서 프로젝트 주제를 바꿔 사용하지 못하게 되긴 했지만, 새로운 기능을 알 수 있었다.
비록 이번 프로젝트에서는 사용하지 않았지만 이번에 알게 된 기능을 활용한 프로젝트를 진행해보고 싶다.