FullCalendar JS
#
Find similar titles
- 최초 작성자
- 최근 업데이트
Structured data
- Category
- Programming
Table of Contents
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)