我在使用fullcalendar时遇到了麻烦。我不确定它是我的php还是mysql代码。日历显示,我可以添加一个新的事件,但事件不会粘在日历上。事件数据确实插入到数据库中,但它实际上并没有出现在实际的日历本身上。
这是我到目前为止的代码:
的index.php
<!DOCTYPE html>
<html>
<head>
<title>FullCalendar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel='stylesheet' type='text/css' href='css/style.css' />
<link rel='stylesheet' type='text/css' href='css/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='css/jquery-ui-1.8.11.custom.css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script src='js/fullcalendar.min.js'></script>
<script src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* global variables */
var event_start = $('#event_start');
var event_end = $('#event_end');
var event_type = $('#event_type');
var calendar = $('#calendar');
var form = $('#dialog-form');
var event_id = $('#event_id');
var format = "MM/dd/yyyy HH:mm";
/* button to add events */
$('#add_event_button').button().click(function(){
formOpen('add');
});
/** cleaning function form */
function emptyForm() {
event_start.val("");
event_end.val("");
event_type.val("");
event_id.val("");
}
/* opening form types*/
function formOpen(mode) {
if(mode == 'add') {
/* hide button Delete , Edit and display the Add*/
$('#add').show();
$('#edit').hide();
$("#delete").button("option", "disabled", true);
}
else if(mode == 'edit') {
/* hide the Add button , display the Edit and Delete*/
$('#edit').show();
$('#add').hide();
$("#delete").button("option", "disabled", false);
}
form.dialog('open');
}
/* date time picker */
event_start.datetimepicker({hourGrid: 4, minuteGrid: 10, dateFormat: 'mm/dd/yy'});
event_end.datetimepicker({hourGrid: 4, minuteGrid: 10, dateFormat: 'mm/dd/yy'});
/* initialize full calendar */
calendar.fullCalendar({
firstDay: 1,
height: 500,
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
monthNames: ['January','Feburary','March','April','May','June','July','August','September','October','November','December'],
monthNamesShort: ['Jan.','Feb.','Маr','Apr.','May','Jun','Jul','Aug.','Sept.','Oct.','Nov.','Dec.'],
dayNames: ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturdat"],
dayNamesShort: ["Su","Mo","Tu","We","Th","Fr","Sa"],
buttonText: {
prev: " ◄ ",
next: " ► ",
prevYear: " << ",
nextYear: " >> ",
today: "today",
month: "month",
week: "week",
day: "day"
},
/* time format output before the event name*/
timeFormat: 'H:mm',
/* click event handler for a particular day */
dayClick: function(date, allDay, jsEvent, view) {
var newDate = $.fullCalendar.formatDate(date, format);
event_start.val(newDate);
event_end.val(newDate);
formOpen('add');
},
/* handler for event click */
eventClick: function(calEvent, jsEvent, view) {
event_id.val(calEvent.id);
event_type.val(calEvent.title);
event_start.val($.fullCalendar.formatDate(calEvent.start, format));
event_end.val($.fullCalendar.formatDate(calEvent.end, format));
formOpen('edit');
},
/* record source */
eventSources: [{
url: 'ajax.php',
type: 'POST',
data: {
op: 'source'
},
error: function() {
alert('Error connecting to the data source!');
}
}]
});
/* form handler */
form.dialog({
autoOpen: false,
buttons: [{
id: 'add',
text: 'add',
click: function() {
$.ajax({
type: "POST",
url: "ajax.php",
data: {
start: event_start.val(),
end: event_end.val(),
type: event_type.val(),
op: 'add'
},
success: function(id){
calendar.fullCalendar('renderEvent', {
id: id,
title: event_type.val(),
start: event_start.val(),
end: event_end.val(),
allDay: false
});
}
});
emptyForm();
}
},
{ id: 'edit',
text: 'edit',
click: function() {
$.ajax({
type: "POST",
url: "ajax.php",
data: {
id: event_id.val(),
start: event_start.val(),
end: event_end.val(),
type: event_type.val(),
op: 'edit'
},
success: function(id){
calendar.fullCalendar('refetchEvents');
}
});
$(this).dialog('close');
emptyForm();
}
},
{ id: 'cancel',
text: 'cancel',
click: function() {
$(this).dialog('close');
emptyForm();
}
},
{ id: 'delete',
text: 'delete',
click: function() {
$.ajax({
type: "POST",
url: "ajax.php",
data: {
id: event_id.val(),
op: 'delete'
},
success: function(id){
calendar.fullCalendar('removeEvents', id);
}
});
$(this).dialog('close');
emptyForm();
},
disabled: true
}]
});
});
</script>
</head>
<body>
<div id="calendar"></div>
<button id="add_event_button">Add Event</button>
<div id="dialog-form" title="Событие">
<p class="validateTips"></p>
<form>
<p><label for="event_type">type</label>
<input type="text" id="event_type" name="event_type" value=""></p>
<p><label for="event_start">start</label>
<input type="text" name="event_start" id="event_start"/></p>
<p><label for="event_end">end</label>
<input type="text" name="event_end" id="event_end"/></p>
<input type="hidden" name="event_id" id="event_id" value="">
</form>
</div>
</body>
</html>
&#13;
ajax.php
<?php
$con=mysqli_connect("localhost","root","","fullcalendar");
$start = $_POST['start'];
$end = $_POST['end'];
$type = $_POST['type'];
$op = $_POST['op'];
$id = $_POST['id'];
switch ($op) {
case 'add':
$sql = 'INSERT INTO events (
start,
end,
type)
VALUES
("' . date("Y-m-d H:i:s", strtotime($start)) . '",
"' . date("Y-m-d H:i:s", strtotime($end)) . '",
"' . $type . '")';
if (mysqli_query($GLOBALS["___mysqli_ston"], $sql)) {
echo ((is_null($___mysqli_res = mysqli_insert_id($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res);
}
break;
case 'edit':
$sql = 'UPDATE events SET start = "' . date("Y-m-d H:i:s", strtotime($start)) . '",
end = "' . date("Y-m-d H:i:s", strtotime($end)) . '",
type = "' . $type . '"
WHERE id = "' . $id . '"';
if (mysqli_query($GLOBALS["___mysqli_ston"], $sql)) {
echo $id;
}
break;
case 'source':
$sql = 'SELECT * FROM events';
$result = mysqli_query($GLOBALS["___mysqli_ston"], $sql);
$json = Array();
while ($row = mysqli_fetch_assoc($result)) {
$json[] = array(
'id' => $row['id'],
'title' => $row['type'],
'start' => $row['start'],
'end' => $row['end'],
'allDay' => false
);
}
echo json_encode($json);
break;
case 'delete':
$sql = 'DELETE FROM events WHERE id = "' . $id . '"';
if (mysqli_query($GLOBALS["___mysqli_ston"], $sql)) {
echo $id;
}
break;
}
&#13;
如果对此问题有任何建设性的意见或帮助,我将不胜感激。
答案 0 :(得分:0)