[js] FullCalendar.js

FullCalendar.js는 강력하고 유연한 자바스크립트 캘린더 라이브러리이다.

✅ HTML 기본 구조

<div id="calendar"></div>

 

✅ JavaScript 기본 초기화

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');

    const calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',  // month/week/day
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      events: [
        {
          title: '회의',
          start: '2025-07-24',
          end: '2025-07-25'
        },
        {
          title: '출장',
          start: '2025-07-26'
        }
      ]
    });

    calendar.render();
  });
</script>

 

✅   주요 옵션 설명

옵션	설명
initialView	초기 보기 형태 (dayGridMonth, timeGridWeek, timeGridDay, listWeek 등)
headerToolbar	상단 툴바 위치 및 버튼 지정
events	일정 데이터 (배열 또는 URL로 Ajax 호출 가능)
locale	언어 설정 (ko 사용 시 한국어)
editable	드래그/수정 가능 여부
selectable	날짜 선택 가능 여부
eventClick	이벤트 클릭 시 처리 함수
dateClick	날짜 클릭 시 처리 함수

 

 

✳️ 요약

• 기본적인 사용은 new FullCalendar.Calendar()로 캘린더 생성 → .render()로 화면에 표시.
• events, dateClick, eventClick, editable 등 다양한 기능 설정 가능.
• JSON 형식의 데이터를 통해 서버 연동도 쉽게 구현 가능.