[library] FullCalendar 일정표 만들기

FullCalendar란?

 

자바스크립트로 구현된 대화형 캘린더 라이브러리 대화형 캘린더 라이브러리입니다.

요약하면 그냥 일정 관리에 유용한 라이브러리입니다.

 

 

결과물

 

 

See the Pen 풀캘린더 by sodium casein (@xyyhsawg-the-selector) on CodePen.

 

 

연동방법

1. CDN

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>

2. HTML

<div id='calendar'></div>
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    events: [
      {
        title: 'Meeting',
        start: '2024-10-25',
        end: '2024-10-26'
      },
      {
        title: 'Conference',
        start: '2024-10-27',
        allDay: true
      }
    ]
  });
  calendar.render();
});

 

 

마무리

 

저는 간단하게 구현해봤지만 몇가지 특징들이 있습니다.

1. 드래그 앤 드롭으로 이벤트 조작: 이벤트를 마우스로 간단히 드래그하여 날짜나 시간을 변경할 수 있어 편리합니다.
2. 다양한 뷰 제공: FullCalendar는 월별, 주별, 일별 등 다양한 뷰를 제공하여, 사용자 맞춤형 캘린더를 구현할 수 있습니다.
3. 이벤트 데이터 연동: AJAX 요청을 통해 서버에서 데이터를 가져와 캘린더에 표시할 수 있으므로, 동적인 일정 관리가 가능합니다.
4. 반응형 디자인: 모바일에서도 사용하기 편리한 반응형 디자인을 제공합니다.
5. 커스터마이징이 가능하여, 원하는 방향에 맞추어서 진행할 수 있습니다.

 

 

FullCalendar - JavaScript Event Calendar