I'm using FullCalendar 4.3.1 . Calendar is displayed correctly but, I can´t add event dynamically. And I get this error: When using JQuery:
TypeError: $(...).fullCalendar is not a function
I try it without JQuery and still not working:
TypeError: document.getElementById(...).fullCalendar is not a function
I have this page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href = 'libs/fullcalendar/core/main.css' rel = 'stylesheet' />
<link href = 'libs/fullcalendar/daygrid/main.css' rel = 'stylesheet' />
<link href = 'libs/fullcalendar/timegrid/main.css' rel = 'stylesheet' />
<link href = 'libs/fullcalendar/list/main.css' rel = 'stylesheet' />
<script src='libs/fullcalendar/core/main.js'></script>
<script src='libs/fullcalendar/core/locales/sk.js'></script>
<script src='libs/fullcalendar/interaction/main.js'></script>
<script src='libs/fullcalendar/daygrid/main.js'></script>
<script src='libs/fullcalendar/timegrid/main.js'></script>
<script src='libs/fullcalendar/list/main.js'></script>
<script src='libs/fullcalendar/moment/main.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['moment', 'interaction', 'dayGrid', 'timeGrid', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
locale: 'sk'
});
calendar.render();
});
function addEventToCalendar()
{
$('#calendar').fullCalendar('renderEvent', {
title: 'dynamic event',
start: new Date(),
allDay: true
});
//not working too
/*
document.getElementById('calendar').fullCalendar('renderEvent', {
title: 'dynamic event',
start: new Date(),
allDay: true
});
*/
}
</script>
</head>
<body>
<div style="margin-top: 10px">
<a onclick="addEventToCalendar()">
<i class="fas fa-calendar-alt calendarButtonText"></i> Add event
</a>
</div>
<div id='calendar' ></div>
</body>
</html>
Where is the problem?