Skip to content

FullCalendar JS #

Find similar titles

2회 업데이트 됨.

Edit
  • 최초 작성자
    leh
  • 최근 업데이트
    dongiljogun

Structured data

Category
Programming

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)

참조문헌 #

0.0.1_20231010_1_v71