안녕하세요. 자바스크립트로 full-calendar를 불러오는 방법을 알아보겠습니다.
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. You will leverage one of FullCalendar’s prebuilt bundles to do this. Standard Bundle First, obtain the standard fullc
fullcalendar.io
위 링크에서 zip 파일을 다운받아 압축 해제 후 원하는 경로에 넣어주시면 됩니다.
index.php
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>full-calendar</title>
<!-- 캘린더를 위해 필요한 참조 -->
<link href='/lib/fullcalendar/main.css' rel='stylesheet'>
<script defer src='/lib/fullcalendar/main.js'></script>
<script defer src ="fullcalendar.js"></script>
</head>
<body>
<div id='calendar-container'>
<div id='calendar'></div>
</div>
</body>
</html>full-calendar를 넣어줄 html 코드를 작성해줍니다.
<!-- 캘린더를 위해 필요한 참조 --> 부분에 본인이 파일을 넣어둔 경로로 바꿔줍니다.
fullcalendar.js
const calendarEl = document.getElementById("calendar"); //캘린더를 넣어줄 html div
let calendar;
calendar_rendering();
function calendar_rendering() {
calendar = new FullCalendar.Calendar(calendarEl, {
initialView: "dayGridMonth",
});
calendar.render();
}full-calendar를 렌더링 할 자바스크립트 코드를 작성해줍니다.
full-calendar가 렌더링 된 모습입니다.
'JavaScript' 카테고리의 다른 글
| [Javascript] Video.js 사용해서 동영상 재생하기 (0) | 2022.06.23 |
|---|---|
| [Javascript] filter 함수 사용하기 (0) | 2022.06.21 |
| [Javascript] 토글버튼으로 웹 배경 바꾸기 (0) | 2022.06.09 |
| [Javascript] 버튼클릭으로 팝업창 만들기 (0) | 2022.06.08 |
| [Javascript] 스크롤에 따른 웹페이지 배경색 변경하기 (0) | 2022.05.27 |
