본문 바로가기
jQuery, CSS, HTML

[JavaScript] FullCalendar 캘린더 사용법 - (1. 설치 및 기본 사용법)

by 집탱구리 2022. 10. 11.
반응형

 

 

https://fullcalendar.io/

 

FullCalendar - JavaScript Event Calendar

Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more

fullcalendar.io

 

 

 

npm 으로 설치

npm install fullcalendar

Download : fullcalendar-5.11.3.zip

 

CDN : jsdelivr

// JavasScript
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales-all.min.js"></script>

// css
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.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>

 

fullcalendar의 main.js와 main.css에는 아래의 패키지가 포함되어 있다.

 

npm이나 yarn으로 설치 할 때 전체 번들을 다운받지 않고 필요한 플러그인만 다운 받을 수 있다.

아래 코드는 사용하려는 플러그인과 함께 코어 패키지를 설치하는 명령어이다.

npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list

 

 

플러그인

이름 기능
@fullcalendar/core fullcalendar클래스를 제공
@fullcalendar/interaction dateClick, selectable, event drag-n-drop & resizing을 감지하는데 필요
eventClick 또는 eventMouseEnter/eventMouseLeave에는 필요 없음.
@fullcalendar/daygrid Month 및 DayGrid 제공 : 
dayGridMonth, dayGridWeek, dayGridDay, dayGrid (generic)
@fullcalendar/timegrid TimeGrid 제공:
timeGridWeek, timeGridDay, timeGrid (generic)
@fullcalendar/list Lists 제공:
listYear, listMonth, listWeek, listDay, list (generic)
@fullcalendar/scrollgrid 특정 보기에 대한 수평스크롤과 같은 고급 스크롤 기능 제공
@fullcalendar/bootstrap5 Bootstrap 5 테마 제공
@fullcalendar/bootstrap Bootstrap 4 테마 제공
@fullcalendar/google-calendar 공개된 Google 캘린더 피드에서 이벤트를 로드
@fullcalendar/icalendar iCalendar 피드에서 이벤트 로드
@fullcalendar/rrule 이벤트 반복을 위해 RRule라이브러리 활용
@fullcalendar/luxon2
 명명된 시간대 구현, 형식 지정 문자열 구현 및 Luxon DateTimes로 변환하기 위한 유틸리티 제공 More info
@fullcalendar/luxon Luxon v1 지원 More info
@fullcalendar/moment Moment개체로 변환하기 위한 형식 지정문자열 구현 및 유틸리티 제공 More info
@fullcalendar/moment-timezone 명명된 시간대 구현을 제공 More info
@fullcalendar/react React 구성 요소를 제공 More info
@fullcalendar/vue Vue 구성 요소를 제공 More info
@fullcalendar/angular Angular 구성 요소를 제공 More info

 

 

Getting / Setting 동적 옵션

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


    // get locale
    let cal_local = calendar.getOption('locale');
    console.log(cal_local); // 'en'

    // set locale
    calendar.setOption('locale', 'fr');
    cal_local = calendar.getOption('locale');
    console.log(cal_local); // 'fr'
});

예외) 함수를 사용해서 변경 해야함.

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        timeZone:'local',
        initialDate: '2022-10-20',
        initialView: 'dayGridMonth',
    });
    calendar.render();
 
 
    // get initialDate
    let cal_initialDate = calendar.getOption('initialDate');
    console.log(cal_initialDate);

    // gotoDate
    calendar.gotoDate('2022-03-20');
    // 2022-03월로 달력 이동
});

 

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        timeZone:'local',
        initialDate: '2022-10-14',
        initialView: 'dayGridMonth',
    });
    calendar.render();

	// timeGridDay로 변경
    calendar.changeView('timeGridDay');

	// 2022-12-01의 날짜로 timeGridDay로 변경
    calendar.changeView('timeGridDay', '2022-12-01');

	// 2022-10-01 ~ 2022-10-05 범위의 timeGrid로 변경
    calendar.changeView('timeGrid', {
        start: '2022-10-01',
        end: '2022-10-05'
    });
});

 

 

destory

fullcalendar 요소를 제거

 calendar.destroy();
반응형

'jQuery, CSS, HTML' 카테고리의 다른 글

[JavaScript] FullCalendar 캘린더 사용법 - (3. Sizing)  (0) 2022.10.20
[JavaScript] FullCalendar 캘린더 사용법 - (2. Toolbar)  (0) 2022.10.14
[jQuery + HTML + CSS] 오디오 플레이어 만들기 - 2  (4) 2020.08.12
[jQuery + HTML + CSS] 오디오 플레이어 만들기 - 1.  (0) 2020.08.04
[jQuery + HTML + CSS] 오디오 플레이어 만들기 - 0.  (0) 2020.07.27

관련글

댓글

티스토리툴바