Javascript 在fullcalendar v4中编辑和删除事件
我想使用ajax编辑事件,并使用完整的日历删除事件,但由于某些原因,它不起作用。我认为这是我的代码的一个小问题,我想在修复它时得到一些帮助 这适用于使用fullcalendar v4、mySQL、AJAX和Javascript的PHPJavascript 在fullcalendar v4中编辑和删除事件,javascript,php,ajax,fullcalendar,Javascript,Php,Ajax,Fullcalendar,我想使用ajax编辑事件,并使用完整的日历删除事件,但由于某些原因,它不起作用。我认为这是我的代码的一个小问题,我想在修复它时得到一些帮助 这适用于使用fullcalendar v4、mySQL、AJAX和Javascript的PHP eventDrop: function (info) { var start = moment(info.event.start).format("Y-MM-DD HH:mm:ss"); var
eventDrop: function (info) {
var start = moment(info.event.start).format("Y-MM-DD HH:mm:ss");
var end = moment(info.event.end).format("Y-MM-DD HH:mm:ss");
var title = info.event.title;
$.ajax({
url: 'edit-event.php',
dataType: 'json',
data: { start: start, end: end, title : title },
type: "POST",
success: function (response) {
calendar.fullCalendar( info.event.title);
//Above is the proper way to reference what I am posting with AJAX
displayMessage("Updated Successfully");
}
});
},
eventClick: function (info) {
var deleteMsg = confirm("Do you really want to delete?");
if (deleteMsg) {
$.ajax({
type: "POST",
url: 'delete-event.php',
data: { title : title },
success: function (response) {
if (parseInt(response) > 0) {
calendar.fullCalendar('removeEvents', info.event.title);//call the 'removeEvents' built in function and reference "var title"
displayMessage("Deleted Successfully");
}
}
});
}
},
edit-event.php
delete-event.php
我希望它点击删除事件
。然后,当它被拖放时,它应该在数据库中更新 当您使用fullcalendar V4时,您不能使用$.fullcalendar,因为V4是纯javascript(即纯js/vanilla js),因为注释V4中提到的@ADYson不再使用jQuery 第二,V4的FullCalendar.formatDate(日期,设置)有不同的实现,您可以检查所有选项 因此,您可以按如下方式使用函数: e、 g 在这里,您可以在start中获得所需的格式,即“Y-MM-DD HH:MM:ss”,确保您有时间 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../packages/core/main.css' rel='stylesheet' />
<link href='../packages/daygrid/main.css' rel='stylesheet' />
<script src='../packages/core/main.js'></script>
<script src='../packages/interaction/main.js'></script>
<script src='../packages/daygrid/main.js'></script>
<script src="https://momentjs.com/downloads/moment.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid'],
defaultDate: '2019-04-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2019-04-01'
},
{
title: 'Long Event',
start: '2019-04-07',
end: '2019-04-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2019-04-09T16:00:00'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2019-04-16T16:00:00'
},
{
title: 'Conference',
start: '2019-04-11',
end: '2019-04-13'
},
{
title: 'Meeting',
start: '2019-04-12T10:30:00',
end: '2019-04-12T12:30:00'
},
{
title: 'Lunch',
start: '2019-04-12T12:00:00'
},
{
title: 'Meeting',
start: '2019-04-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2019-04-12T17:30:00'
},
{
title: 'Dinner',
start: '2019-04-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2019-04-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2019-04-28'
}
],
eventDrop: function (info) {
var start = moment(info.event.start).format("Y-MM-DD HH:mm:ss");
var end = moment(info.event.start).format("Y-MM-DD HH:mm:ss");
$.ajax({
url: 'edit-event.php',
data: { start: start, end: end, id: id },
type: "POST",
success: function (response) {
displayMessage("Updated Successfully");
}
});
},
eventClick: function (info) {
var deleteMsg = confirm("Do you really want to delete?");
if (deleteMsg) {
$.ajax({
type: "POST",
url: 'delete-event.php',
data: { id: id },
success: function (response) {
if (parseInt(response) > 0) {
info.event.remove();
displayMessage("Deleted Successfully");
}
}
});
}
}
});
calendar.render();
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
document.addEventListener('DOMContentLoaded',函数(){
var calendarEl=document.getElementById('calendar');
var calendar=新的完整日历。日历(calendarEl{
插件:['interaction','dayGrid'],
默认日期:“2019-04-12”,
是的,
eventLimit:true,//当事件太多时允许“更多”链接
活动:[
{
标题:“全天活动”,
开始日期:2019-04-01
},
{
标题:“长期活动”,
开始日期:2019-04-07,
完:2019-04-10
},
{
群组ID:999,
标题:“重复事件”,
开始:“2019-04-09T16:00:00”
},
{
群组ID:999,
标题:“重复事件”,
开始:“2019-04-16T16:00:00”
},
{
标题:"会议",,
开始日期:2019-04-11,
完:2019-04-13
},
{
标题:"会议",,
开始:“2019-04-12T10:30:00”,
完:2019-04-12T12:30:00
},
{
标题:"午餐",,
开始:“2019-04-12T12:00:00”
},
{
标题:"会议",,
开始:“2019-04-12T14:30:00”
},
{
标题:"欢乐时光",,
开始:“2019-04-12T17:30:00”
},
{
标题:"晚餐",,
开始:“2019-04-12T20:00:00”
},
{
标题:"生日派对",,
开始:“2019-04-13T07:00:00”
},
{
标题:“点击谷歌”,
网址:'http://google.com/',
开始日期:2019-04-28
}
],
eventDrop:函数(信息){
var start=时刻(info.event.start).format(“Y-MM-DD HH:MM:ss”);
var end=时刻(信息事件开始)。格式(“Y-MM-DD HH:MM:ss”);
$.ajax({
url:'edit event.php',
数据:{start:start,end:end,id:id},
类型:“POST”,
成功:功能(响应){
显示消息(“更新成功”);
}
});
},
事件单击:函数(信息){
var deleteMsg=confirm(“您真的要删除吗?”);
如果(删除消息){
$.ajax({
类型:“POST”,
url:'delete event.php',
数据:{id:id},
成功:功能(响应){
if(parseInt(响应)>0){
info.event.remove();
显示消息(“删除成功”);
}
}
});
}
}
});
calendar.render();
});
身体{
利润率:40像素10像素;
填充:0;
字体系列:Arial、Helvetica Neue、Helvetica、无衬线字体;
字体大小:14px;
}
#历法{
最大宽度:900px;
保证金:0自动;
}
POST['title']从何而来,它不是随AJAX请求一起发送的?实际上我不需要它,因为它是拖放事件,但会在数据库上更新,正在尝试单击编辑具体是哪个部分(或多个部分)不起作用?这到底意味着什么?您看到了什么错误或意外行为?您是否尝试过任何调试来缩小问题范围?如果您使用的是fullCalendar v4,那么我很确定$.fullCalendar.formatDate
将无法工作,因为fullCalendar不再使用jQuery。控制台中的任何错误。此外,SQL查询容易受到注入攻击。请查看如何使用参数化查询和准备好的语句来保护数据库。有一个很好的风险解释,还有一个简单的页面显示如何使用PHP/mySQLi安全地编写查询。永远不要相信数据进入y
include "dbconnect.php";
if(isset($_POST['title'])){
$title = $_POST['title'];
echo $sqlDelete = "DELETE from events_table WHERE title='$title'";
mysqli_query($conn, $sqlDelete);
echo mysqli_affected_rows($conn);
}
var start = moment(info.event.start).format("Y-MM-DD HH:mm:ss");
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../packages/core/main.css' rel='stylesheet' />
<link href='../packages/daygrid/main.css' rel='stylesheet' />
<script src='../packages/core/main.js'></script>
<script src='../packages/interaction/main.js'></script>
<script src='../packages/daygrid/main.js'></script>
<script src="https://momentjs.com/downloads/moment.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid'],
defaultDate: '2019-04-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2019-04-01'
},
{
title: 'Long Event',
start: '2019-04-07',
end: '2019-04-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2019-04-09T16:00:00'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2019-04-16T16:00:00'
},
{
title: 'Conference',
start: '2019-04-11',
end: '2019-04-13'
},
{
title: 'Meeting',
start: '2019-04-12T10:30:00',
end: '2019-04-12T12:30:00'
},
{
title: 'Lunch',
start: '2019-04-12T12:00:00'
},
{
title: 'Meeting',
start: '2019-04-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2019-04-12T17:30:00'
},
{
title: 'Dinner',
start: '2019-04-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2019-04-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2019-04-28'
}
],
eventDrop: function (info) {
var start = moment(info.event.start).format("Y-MM-DD HH:mm:ss");
var end = moment(info.event.start).format("Y-MM-DD HH:mm:ss");
$.ajax({
url: 'edit-event.php',
data: { start: start, end: end, id: id },
type: "POST",
success: function (response) {
displayMessage("Updated Successfully");
}
});
},
eventClick: function (info) {
var deleteMsg = confirm("Do you really want to delete?");
if (deleteMsg) {
$.ajax({
type: "POST",
url: 'delete-event.php',
data: { id: id },
success: function (response) {
if (parseInt(response) > 0) {
info.event.remove();
displayMessage("Deleted Successfully");
}
}
});
}
}
});
calendar.render();
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>