Fullcalendar保存记录在MySQL [英] Fullcalendar save record in mysql
问题描述
我想创建一个拖放放大器;在MySQL数据库中删除日历（Fullcalendar）并保存新的或已编辑的内容。
I'm trying to create a drag & drop calendar(Fullcalendar) and saving the new or edited items in a MySQL database.
不过，我有2个问题的时刻。
But I'm having 2 problems at the moment.
我不能拖＆放;降更多的则在月视图1项： http://snag.gy/SF9wI.jpg
I can't drag & drop more then 1 item in the month view: http://snag.gy/SF9wI.jpg
但是，如果我拖在周视图一个新的，它的工作原理： http://snag.gy/0tW2m .JPG 如果我回去的月视图我刚刚在周视图中创建的仍然存在。
But if I drag a new one in the Week view ,It works : http://snag.gy/0tW2m.jpg and if I go back to the Month view the ones I just created in the Week view are still there.
我是新的阿贾克斯，jQuery和我真的不知道如何使用$ _ POST，这样我就可以保存在我的MySQL数据库我的记录。我尝试了一些指导，但没有成功。
I'm new in ajax,jquery and I don't really know how to use $_post, so I can save my records in my MySQL database. I tried a few guides but no success.
MySQL数据库：
名称： tblEvent 的
name: tblEvent
idEvent INT auto_increment PRIMARY KEY
fiTask INT
fiUser INT
dtStart DATETIME
dtEnd DATETIME
dtUrl VARCHAR(255)
dtAllDay TINYINT(1)
的index.php：
index.php:
<?php
include_once './Includes/functions.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../lib/jquery-ui.custom.min.js'></script>
<script src='../fullcalendar.js'></script>
<script src='../lang/de.js'></script>
<script>
$(document).ready(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var h = {};
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-event').each(function () {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
slotEventOverlap: false,
eventLimit: true,
droppable: true, // this allows things to be dropped onto the calendar
events: "./event.php",
// Convert the allDay from string to boolean
eventRender: function (event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
var title = prompt('Event Title:');
var url = prompt('Type Event url, if exits:');
var eventData;
if (title) {
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: './add_event.php',
data: 'title=' + title + '&start=' + start + '&end=' + end + '&url=' + url,
type: "POST",
success: function (json) {
alert('Added Successfully');
}
});
$('#calendar').fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
/*eventDrop: function (event, delta) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: './update_events.php',
data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
type: "POST",
success: function (json) {
alert("Updated Successfully");
}
});
}*/
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#wrap {
width: 1100px;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
#external-events .fc-event {
margin: 10px 0;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #666;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
float: right;
width: 900px;
}
</style>
</head>
<body>
<div id='wrap'>
<div id='external-events'>
<h3>Aufgaben</h3>
<?php
foreach (SelectTask() as $x) {
echo "<div class='fc-event'>" . $x['dtTask'] . "</div>";
}
?>
</div>
<div id='calendar'></div>
<div style='clear:both'></div>
</body>
</html>
event.php：
event.php:
<?php
// List of events
$json = array();
// Query that retrieves events
$requete = "SELECT * FROM tblEvent";
// connection to the database
try {
$dbc = new PDO('mysql:host=10.140.2.19;dbname=dbcontrol', 'ymartins', 'a15370430x');
} catch (Exception $e) {
exit('Unable to connect to database.');
}
// Execute the query
$resultat = $dbc->query($requete) or die(print_r($dbc->errorInfo()));
// sending the encoded result to success page
echo json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));
?>
add_event.php：
add_event.php:
<?php
// Values received via ajax
$title = $_POST['title'];
$user = $_POST['user'];
$start = $_POST['start'];
$end = $_POST['end'];
$url = $_POST['url'];
// connection to the database
try {
$dbc = new PDO('mysql:host=10.140.2.19;dbname=dbcontrol', '****', ****);
} catch (Exception $e) {
exit('Unable to connect to database.');
}
// insert the records
$sql = "INSERT INTO tblEvent (dtTitle, dtStart, dtEnd, dtUrl) VALUES (:title, :start, :end, :url)";
$q = $dbc->prepare($sql);
$q->execute(array(':title' => $title, ':start' => $start, ':end' => $end, ':url' => $url));
?>
我是什么做错了，我怎么能提高我的脚本？
What am I doing wrong and how can I improve my script?
推荐答案
您可能想扩展您的问题，包括到底是怎么回事错了/不能正常工作？
You may want to expand your question to include exactly what is going wrong/not working?
我看到一个问题至少有：
I see one issue at least:
你的AJAX调用应该是这样的：
your AJAX call should look like this:
$.ajax({
url: '/add_event.php',
data: {'title': title, 'start': start ...}
type: "POST",
success: function (json) {
alert('Added Successfully');
}
});
完成数据：行......它的字典，使用POST时，不是获取网址连接codeD字符串。 您可能还需要增加一个失败的部分发现错误，或者至少打印出的情况下的JSON你的PHP页面抛出一个错误的值（它会在成功回调的变量）。
complete the 'data:' line... its a dict, not a GET Url encoded string when using POST. you may also want to add a failure section to catch errors, or at least print out the value of the 'json' in case your php page throws an error (it will be in that variable of the success callback).
这篇关于Fullcalendar保存记录在MySQL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
