웹 캘린더 라이브러리 중 하나인 FullCalendar를 시작해보자.
나는 간단하게 script 태그를 사용할 것이다. (React, Vue, Angular, Typescript 모두 지원한다.)
FullCalendar 공식 홈페이지에 들어가면
처음 셋팅하는 방법을 아주 잘 설명하고 있다.
https://fullcalendar.io/docs/initialize-globals
Initialize with Script Tags - Docs | FullCalendar
It’s possible to manually include the necessary tags in the head of your HTML page and then initialize a calendar via browser globals. Leverage one of FullCalendar’s prebuilt bundles or include individual plugins Standard Bundle First, obtain the stand
fullcalendar.io
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.1/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
나는 예제를 계속 이어 나갈 것이기 때문에
document.addEventListener ~~ 부분부터 새로운 파일로 쪼개줬다. (index.js)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.1/index.global.min.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
index.js
document.addEventListener("DOMContentLoaded", function () {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: "dayGridMonth",
});
calendar.render();
});
그리고 index.html 의 파일경로를 브라우저에서 열어주면
아래처럼 달력이 보인다.
준비 끝!
'개발 > HTML+CSS+JS' 카테고리의 다른 글
| [FullCalendar v6] 06. Day 클릭 시, 다른 달력 뷰로 전환하기 (navLinks, navLinkDayClick) (0) | 2023.02.09 |
|---|---|
| [FullCalendar v6] 05. 날짜 범위 지정하기 (minDate, maxDate) (0) | 2023.02.08 |
| [FullCalendar v6] 04. Cell Content 변경하기 (0) | 2023.02.07 |
| [FullCalendar v6] 03. Sizing (달력 크기 설정), headerDates 고정 (0) | 2023.02.06 |
| [FullCalendar v6] 02. Toolbar 설정 (headerToolbar, footerToolbar), 한국어 설정 (locale) (0) | 2023.02.06 |