본문 바로가기
JavaScript

[JavaScript] Full-calendar 사용하기

by teamnova 2022. 6. 16.
728x90

안녕하세요. 자바스크립트로 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가 렌더링 된 모습입니다.