【FullCalendar】Google 캘린더의 커스터마이즈 예(코피페용)

FullCalendar의 사용법과 커스터마이즈의 예를 소개한다.

절차

1. API 키 획득

Google Cloud Platform로 이동하여 (메뉴) -> API 및 서비스 -> 라이브러리

--> 'Google Calendar API'

--> "활성화"

왼쪽 상단에 프로젝트 이름이 표시되는지 확인 (프로젝트가 생성되지 않은 경우 새 프로젝트 만들기) --> (메뉴) --> "API 및 서비스"--> "자격 증명"

--> "자격 증명 만들기"--> "API 키"

API 키가 생성되면 키 제한

2. FullCalendar 사용

초기화

다음 방법 중 하나로 표준 fullcalendar 번들을 얻습니다.

Download: 푼이던 r-5.9.0. 다음 p

CDN: jsdelivr

NPM: npm install fullcalendar

그런 다음 다음과 같이 초기화 코드를 작성합니다.

<!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>

데모 페이지

이 fullcalendar 번들의 main.js 및 main.css에는 다음 패키지가 포함됩니다.

@fullcalendar/core

@fullcalendar/interaction(for date selecting , event dragging & resizing )

@fullcalendar/daygrid (for month and dayGrid views)

@fullcalendar/timegrid (for timeGrid views)

@fullcalendar/list (for list views )

@fullcalendar/bootstrap(requires 3rd-party Bootstrap/FontAwesome packages. more info )

@fullcalendar/google-calendar ( more info )

3. 사용자 정의 예

See the Pen Customize Google Calendar by Probability Hill ( @probabilityhill )
on CodePen.

Reference

이 문제에 관하여(【FullCalendar】Google 캘린더의 커스터마이즈 예(코피페용)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/probabilityhill/items/1be4e0dfb9f3a906f203

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다