Why Uncaught TypeError: $ (...). FullCalendar is not a function?

Question

I imported it as shown below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/fullcalendar.js"></script>
<script type="text/javascript" src="js/locale/ko.js"></script>
<link rel="stylesheet" href="css/fullcalendar.css">
<link rel="stylesheet" href="css/fcImportantCSS.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/adminMainPage.css">

And I wrote the following.

HTML:

<div id="calendarContainer" style="display:none">
    <input type="hidden" value="" id="ri_startDate">
    <input type="hidden" value="" id="ri_endDate">
    <div id="calendar"></div>
</div>  

JS:

// fullCalendar 관련
$('#calendar').fullCalendar({
  header: {
    center: "title", // 센터에는 타이틀 명이 오고
    left: "prev", // 왼쪽에는 < 버튼이 오고
    right: "next" // 오른쪽에는 > 버튼이 오게됌
  },
  lang: 'ko', // 달력 한글 설정
  editable: true, // 달력의 이벤트를 수정할 수 있는지 여부를 결정
  dayClick: function(date, allDay, view) // 일 클릭시 발생
  {
    var dateFormat = date.format('YYYY-MM-DD');

    if (confirm('휴진으로 등록 하시겠습니까?')) {

    } else {
      alert('bye ~ ');
    }
  }
});

It worked well when tested, but now it does not work.

The following error has occurred:

Uncaught TypeError: $(...).fullCalendar is not a function

Why am I getting this error?

How to fix the code to catch this error?

I need your help, and please tell me your opinion.

Answer 1

Try it with it.

$(function(){
// fullCalendar 관련
$('#calendar').fullCalendar({
  header: {
    center: "title", // 센터에는 타이틀 명이 오고
    left: "prev", // 왼쪽에는 < 버튼이 오고
    right: "next" // 오른쪽에는 > 버튼이 오게됌
  },
  lang: 'ko', // 달력 한글 설정
  editable: true, // 달력의 이벤트를 수정할 수 있는지 여부를 결정
  dayClick: function(date, allDay, view) // 일 클릭시 발생
  {
    var dateFormat = date.format('YYYY-MM-DD');

    if (confirm('휴진으로 등록 하시겠습니까?')) {

    } else {
      alert('bye ~ ');
    }
  }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/fullcalendar/1.5.4/fullcalendar.js"></script>
<link href="https://cdn.jsdelivr.net/fullcalendar/1.5.4/fullcalendar.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/fullcalendar/1.5.4/gcal.js"></script>
<link href="https://cdn.jsdelivr.net/fullcalendar/1.5.4/fullcalendar.print.css"  rel="stylesheet"/>
<div id = "calendar"></div>

Run codeHide result