사용 배경
회사 업무중 fullcalendar 라이브러리를 사용하게 되었다.
처음에는 순수 자바스크립트로 구글링해가면서 달력을 구현했었는데 기능들이 자꾸 추가가 되면서 fullcalendar를 사용하게 되었다. 이 것 저 것 여러가지 구현해보면서 알아낸 것을 기록하고자 한다.
다음에 달력 구현할 일이 있으면 여러므로 편하게 사용할 수 있도록 하는 것이 목표이다.
참고 사이트
FullCalendar - JavaScript Event Calendar
Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more
fullcalendar.io
기본 코드
1. fullcalendar 다운받기 (2023.04.06 기준 6.1.5 버전 다운받았음)
script 파일 추가해준다.
<script src='../dist/index.global.js'></script>실제 사용할 때는 상대경로를 절대경로로 바꿔서 사용했다.
2. html 코드 추가
<body>
<div id='calendar'></div>
</body>html에도 당연히 코드 추가해준다. calendar id 잡아주기
3. 전체 기본 코드.
밑에서 하나씩 설명 달아야지
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
initialDate: '2023-01-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2023-01-01'
},
{
title: 'Long Event',
start: '2023-01-07',
end: '2023-01-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2023-01-09T16:00:00'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2023-01-16T16:00:00'
},
{
title: 'Conference',
start: '2023-01-11',
end: '2023-01-13'
},
{
title: 'Meeting',
start: '2023-01-12T10:30:00',
end: '2023-01-12T12:30:00'
},
{
title: 'Lunch',
start: '2023-01-12T12:00:00'
},
{
title: 'Meeting',
start: '2023-01-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2023-01-12T17:30:00'
},
{
title: 'Dinner',
start: '2023-01-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2023-01-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2023-01-28'
}
]
});
calendar.render();
});
1) 달력 헤더 부분 수정
headerToolbar: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},기본 설정이다.
난 dayGridMonth만 사용할거라 다 지웠다. 달력 이전과 이후만 남겨두고 다 날림.
headerToolbar: {
left: 'prev',
center: 'title',
right: 'next'
},
2) 나머지 기본 설정 설명
initialDate: '2023-04-06', // 달력 처음 로드될 때 표시되는 날짜. default는 현재 날짜
navLinks: false, // 요일이랑 날짜 클릭 시 일이나 주단위 보여주는 화면으로 넘어감
editable: true, // 드래그해서 수정 가능한지. 길게 확장도 가능
dayMaxEvents: true, // +more 표시 전 최대 이벤트 갯수. true는 셀 높이에 의해 결정
정말 정말 기본적인 것만 설명하였다.
더 알아야 하는 내용은 차근 차근 계속 추가 예정이다.
'웹개발 > 라이브러리' 카테고리의 다른 글
| [fullcalendar] 커스텀달력 / tooltip 추가하기 (0) | 2023.04.08 |
|---|---|
| [fullcalendar] 커스텀달력 / 이전달, 다음달 날짜 선택 막기 (0) | 2023.04.08 |
| [fullcalendar] 커스텀 달력 / 한국어 '일' 삭제하기 (5) | 2023.04.06 |