FullCalendar JS란? #

• 자바스크립트 기반 오픈 소스 라이브러리
• 웹/앱 개발 달력이나 일정, 스케줄러 관련 구현 시 가장 많이 사용하는 라이브러리

FullCalendar 시작하기 #

• 다운로드

html #

  <div id='calendar'></div>

js #

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

Event Object #

• 이벤트 영역에서는 달력에 들어갈 이벤트 (일정)들에 대한 속성을 저장한다.

• 배열, JSON feed, addEvent 메소드를 통해 이벤트 객체를 가져올 수 있으며, 이벤트 관련 다양한 프로퍼티와 메소드를 가지고 있다.

     <script>
      ...
      var calendar = new FullCalendar.Calendar(calendarEl, {
       ...
        editable: true,
        events: [
          {
            title: 'All Day Event',
            start: '2020-02-01'
          },
          ...
      </script>
  

  • title : String, 이벤트에 표시될 제목
  • start : Date object, 이벤트 시작 날짜 (& 시간)
  • end : Date object, 이벤트 종료 날짜 (& 시간)
  • groupId: String, 이벤트 그룹, 이벤트 드래그 / 리사이징 할 경우 동일한 그룹 이벤트들은 자동으로 같이 수정된다.
  • editable : Boolean, 이벤트 드래그, 리사이징 등의 편집 여부를 설정한다. (default : false)

참조문헌 #

• FullCalendar - Event Object