我使用ajax成功地存储并检索了数据库中的事件,现在如何在fullcalnder中将其显示为事件??在数据库中保存事件:使用Ajax。
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-12',
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$.ajax ({
url: "http://localhost/phplec/sms/calendar/test",
type: 'POST',
data: {'title': title, 'start' : start.format(), 'end': end.format()},
success: function(msg) {
alert(msg);
}
});
控制器:在这里我接受Ajax请求并连接到DB
function test() {
$this->load->model('calendar_model');
$data = array(
'title' => $_POST['title'],
'start' => $_POST['start'],
'end' => $_POST['end']
);
$this->calendar_model->add_record($data);
echo "working";
}
现在我想在第laod页上完整显示我的数据库。我成功地从数据库中获取了事件,并将其转换为json,现在如何在视图中显示它。
function get_records()
{
$data = $this->db->get("calendar_test");
$json_data = json_encode($data->result_array());
var_dump($json_data);
}
如何动态显示此事件
$.ajax ({
url: "http://localhost/phplec/sms/calendar/get_records",
type: 'GET',
dataType: "html", //expect html to be returned
success: function(response){
alert(response)
}
我成功地在fullcalander.js中获得了事件json,现在如何将其传递给事件。
根据我的理解,如果你想在日历日点击,它会提示你输入标题,然后你将数据提交到数据库,然后你想再次看到它。以下是您需要采取的步骤:
-
您需要使用
events
方法,以便fullcalendar知道如何在加载时获取事件,如下所示:$('#calendar').fullCalendar({ // ....your other methods... events: 'http://localhost/phplec/sms/calendar/get_records' //this should echo out JSON });
-
在ajax成功地将事件保存到数据库中之后,然后调用
refetchEvents
方法,如下所示:$('#calendar').fullCalendar('refetchEvents');
最后,我会这样做:
var myCalendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: 'http://localhost/phplec/sms/calendar/get_records',
defaultDate: '2015-02-12',
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:');
if (title) {
var eventData = {
title: title,
start: start.format(),
end: end.format()
};
$.ajax({
url: "http://localhost/phplec/sms/calendar/test",
type: 'POST',
data: eventData,
success: function(result) {
if(result === "working"){
myCalendar.fullCalendar('refetchEvents');
}else{
alert("Error Message");
}
},
error: function(xhr, status, msg) {
alert(msg);
}
});
}
}
});