I created a calendar fullcalendar5 version 5, i add an event ,i show event in my calendar ,now i want to delete event but its give me error : Uncaught TypeError: $(...).fullCalendar is not a function.
also when i want to see id value its give me undefined .
i change code from $('#calendar').fullCalendar('removeEvents', event.id); to event.remove() but also not work.
i try also the see event value but its give me :
{el: a.fc-daygrid-event.fc-daygrid-block-event.fc-h-event.fc-event.fc-event-draggable.fc-event-resizable…, event: EventApi, jsEvent: PointerEvent, view: ViewApi}.
JavaScript
x
100
100
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="UTF-8">5
<title>AGENDA</title>6
<link rel="icon" 7
type="image/png" 8
href="https://findicons.com/files/icons/2805/squareplex/512/google_calendar.png">9
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">10
<link rel="stylesheet" href="css/style.css">11
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/flatly/bootstrap.min.css"12
crossorigin="anonymous">13
<link type="text/css" rel="stylesheet"14
href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">15
16
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/main.css">17
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"18
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="19
crossorigin="anonymous" referrerpolicy="no-referrer"/>20
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>21
<link href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.1/css/all.css' rel='stylesheet'>22
<link rel="stylesheet"23
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css"24
integrity="sha512-63+XcK3ZAZFBhAVZ4irKWe9eorFG0qYsy2CaM5Z+F3kUn76ukznN0cp4SArgItSbDFD1RrrWgVMBY9C/2ZoURA=="25
crossorigin="anonymous" referrerpolicy="no-referrer"/>26
27
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>28
29
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>30
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>31
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"32
integrity="sha512-GDey37RZAxFkpFeJorEUwNoIbkTwsyC736KNSYucu1WJWFK9qTdzYub8ATxktr6Dwke7nbFaioypzbDOQykoRg=="33
crossorigin="anonymous" referrerpolicy="no-referrer"></script>34
35
36
37
38
</head>39
<body>40
41
<div class="container main">42
43
<div class="card mb-4 mt-3 p-2">44
<div id='calendar'></div>45
</div>46
47
<script>48
document.addEventListener('DOMContentLoaded', function() {49
var calendarEl = document.getElementById('calendar');50
var calendar = new FullCalendar.Calendar(calendarEl, {51
initialView: 'dayGridMonth',52
eventColor: 'orange',53
editable: true,54
55
events: [56
{57
id: '1',58
title: 'All Day Event',59
start: '2022-09-01',60
}61
],62
63
eventClick: function(event){64
id = event.id;65
console.log(id);66
if(confirm('Are you sure want to remove it?')) {67
$('#calendar').fullCalendar('removeEvents', event.id);68
}69
},70
71
});72
73
74
75
calendar.render(); 76
});77
</script>78
79
</div>80
</body>81
82
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/main.js"></script>83
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/locales-all.min.js"></script>84
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"85
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"86
crossorigin="anonymous"></script>87
<!-- DATATABLE -->88
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>89
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>90
<script src ="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>91
<script src ="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>92
<script src ="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>93
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>94
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>95
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/main.js"></script>96
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/locales-all.min.js"></script>97
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"98
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"99
crossorigin="anonymous"></script>100
</html>Advertisement
Answer
I would suggest you use event.event.remove(); instead
JavaScript
1
101
101
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="UTF-8">5
<title>AGENDA</title>6
<link rel="icon" 7
type="image/png" 8
href="https://findicons.com/files/icons/2805/squareplex/512/google_calendar.png">9
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">10
<link rel="stylesheet" href="css/style.css">11
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/flatly/bootstrap.min.css"12
crossorigin="anonymous">13
<link type="text/css" rel="stylesheet"14
href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">15
16
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/main.css">17
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"18
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="19
crossorigin="anonymous" referrerpolicy="no-referrer"/>20
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>21
<link href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.1/css/all.css' rel='stylesheet'>22
<link rel="stylesheet"23
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css"24
integrity="sha512-63+XcK3ZAZFBhAVZ4irKWe9eorFG0qYsy2CaM5Z+F3kUn76ukznN0cp4SArgItSbDFD1RrrWgVMBY9C/2ZoURA=="25
crossorigin="anonymous" referrerpolicy="no-referrer"/>26
27
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>28
29
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>30
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>31
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"32
integrity="sha512-GDey37RZAxFkpFeJorEUwNoIbkTwsyC736KNSYucu1WJWFK9qTdzYub8ATxktr6Dwke7nbFaioypzbDOQykoRg=="33
crossorigin="anonymous" referrerpolicy="no-referrer"></script>34
35
36
37
38
</head>39
<body>40
41
<div class="container main">42
43
<div class="card mb-4 mt-3 p-2">44
<div id='calendar'></div>45
</div>46
47
<script>48
document.addEventListener('DOMContentLoaded', function() {49
var calendarEl = document.getElementById('calendar');50
var calendar = new FullCalendar.Calendar(calendarEl, {51
initialView: 'dayGridMonth',52
eventColor: 'orange',53
editable: true,54
55
events: [56
{57
id: '1',58
title: 'All Day Event',59
start: '2022-09-01',60
}61
],62
63
eventClick: function(event){64
id = event.event.id;65
console.log(id);66
if(confirm('Are you sure want to remove it?')) {67
event.event.remove();68
//$('#calendar').fullCalendar('removeEvents', event.id);69
}70
},71
72
});73
74
75
76
calendar.render(); 77
});78
</script>79
80
</div>81
</body>82
83
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/main.js"></script>84
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/locales-all.min.js"></script>85
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"86
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"87
crossorigin="anonymous"></script>88
<!-- DATATABLE -->89
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>90
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>91
<script src ="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>92
<script src ="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>93
<script src ="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>94
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>95
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>96
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/main.js"></script>97
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/locales-all.min.js"></script>98
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"99
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"100
crossorigin="anonymous"></script>101
</html>