fullCalendar事件发布到MySQL的方法 [英] fullCalendar events post method to MySQL

问题描述

我试图用fullCalendar和MySQL创建一个支持MySQL的事件接口。我试图操作fullCalendar文档中的示例，并已成功创建了一个来自我的数据库的事件馈送。

我正在尝试创建 eventDrop 调用，它将事件ID，标题和开始时间发送到数据库。我使用了以前的 question 来创建 eventDrop 调用，这里是整个callendar页面的JavaScript：

<$ p $（$）$（$）$（$）$（$）$（$） ------------------------------------------------- * /

$（'＃external-events div.external-event'）。each（function（）{

//创建一个事件对象（http：// arshaw .com / fullcalendar / docs / event_data / Event_Object /）
//它不需要开始或结束
var eventObject = {
title：$ .trim（$（this ）.text（））//使用元素的文本作为事件标题
};

//将事件对象存储在DOM元素中，以便稍后获取它
$（this）.data（'eventObject'，eventObject）;

/ /使事件可拖动使用jQuery UI
$（this）.draggable（{
zIndex：999，
revert：true，//将导致事件返回到它的
revertDuration：0 //拖动后的原始位置
}）;
}）;

/ *初始化日历
--------------------------------- -------------------------------- * /

$（'＃calendar'）。 fullCalendar（{
header：{
left：'prev，next today'，
center：'title'，
right：'month，agendaweek，agendaDay'
}，
editable：true，
droppable：true，//这可以让东西掉到日历上!!!
drop：function（date，allDay）{//这个函数是当某些东西被删除时调用

//检索被删除元素存储的事件对象
var originalEventObject = $（this）.data（'eventObject'）;

/ /我们需要复制它，以便多个事件没有对同一对象的引用
var copiedEventObject = $ .extend（{}，originalEventObject）;

//赋值报告
copiedEventOb的日期ject.start = date;
copiedEventObject.allDay = allDay;

//在日历上呈现事件
//最后的`true`参数确定事件是否粘住（http://arshaw.com/fullcalendar/docs/event_rendering/ renderEvent /）
$（'＃calendar'）。fullCalendar（'renderEvent'，copiedEventObject，true）;

//如果是这样，从Draggable Events列表中移除元素
$（this）.remove（）;
}，

//来自mysql数据库的事件
events：/json-events.php，

//提交到数据库
eventDrop：function（calEvent，jsEvent，view）{
var method ='POST';
var path ='submit.php';
var params = new Array（）;
params ['id'] = calEvent.id;
params ['start'] = calEvent.start;
params ['end'] = calEvent.end;
params ['title'] = calEvent.title;
post_to_url（路径，参数，方法）;
}
}）;
}）;

我希望PHP文件能够接收POST数据并将其插入到数据库中，到开始时间再加上15分钟（在下面的答案后编辑）：

 <？php 
 
 mysql_connect（）或死（mysql_error（））; 
 mysql_select_db（）或死（mysql_error（））; 
 
 $ id = $ _POST [id]; 
 $ title = $ _POST [title]; 
 $ start = $ _POST [start]; 
 $ end = date（Y-m-d T H：i：s，strtotime（$ start）+900）; 
 
 $ query =INSERT INTO`events` VALUES（`$ id`，`$ title`，`$ start`，`$ end`，``）; 
 mysql_query（$ query）; 
 print $ query; 
？> 
  

数据库没有收到事件数据。

解决方案

这是我提出的结论，我没有任何问题在我的测试和公共服务器上运行。
我采用了FullCalendar，这是我使用的格式。

数据库非常简单。

  id整数11个字符主键自动增量，
标题varchar 50，
开始varchar 50，
结束varchar 50，
 url varchar 50. 
  

这是 index.php 或 index.html 文件。

 <！DOCTYPE html> ; 
< html> 
< head> 
< link href ='css / fullcalendar.css'rel ='stylesheet'/> 
< link href ='css / fullcalendar.print.css'rel ='stylesheet'media ='print'/> 
< script src ='js / jquery-1.9.1.min.js'>< / script> 
< script src ='js / jquery-ui-1.10.2.custom.min.js'>< / script> 
< script src ='js / fullcalendar.min.js'>< / script> 
< script> 
 $（document）.ready（function（）{
 $（'＃calendar'）。fullCalendar（{
 header：{
 left：'prev，next today'， 
 center：'title'，
 right：'month，agendaWeek，agendaDay'
}，
 editable：true，
 events：json.php，
 eventDrop：function（event，delta）{
 alert（event.title +'was moved''+ delta +'days\\\
'+ 
'（should should update your database）'） ; 
}，
 loading：function（bool）{
 if（bool）$（'＃loading'）。show（）; 
 else $（'＃loading'） .hide（）; 
} 
}）; 
}）; 
< / script> 
< style> 
 body {
 margin-top：40px; 
 text-align：center; 
 font-size：14px; 
 font-family：Lucida Grande，Helvetica，Arial，Verdana，sans-serif; 
} 
 #loading {
 position：absolute; 
 top：5px; 
 right：5px; 
} 
 #calendar {
 width：900px; 
 margin：0 auto; 
} 
< / style> 
< / head> 
< body> 
< div id ='loading'style ='display：none'> loading ...< / div> 
< div id ='calendar'>< / div> 
< p> json.php需要在同一个目录中运行。< / p> 
< / body> 
< / html> 
  

这是 json.php 文件。

 <？php 
 mysql_pconnect（localhost，root，）或die（可能不连接）; 
 mysql_select_db（calendar）或死（无法选择数据库）; 
 
 
 $ rs = mysql_query（SELECT * FROM events ORDER BY start ASC）; 
 $ arr = array（）; 
 
 while（$ obj = mysql_fetch_object（$ rs））{
 $ arr [] = $ obj; 
} 
 echo json_encode（$ arr）; 
？> 
  

I am attempting to create a MySQL backed events interface, using fullCalendar and MySQL. I have tried to manipulate the examples in the fullCalendar documentation and have successfully created a events feed from my database.

I am now trying to create a eventDrop call which sends an events id, title and start time to the database. I used the code from a previous question to create the eventDrop call, here is the JavaScript for the whole callendar page:

$(document).ready(function() {    
    /* initialize the external events
    -----------------------------------------------------------------*/

    $('#external-events div.external-event').each(function() {

        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);

        // 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'
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        drop: function(date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);                

            // if so, remove the element from the "Draggable Events" list
            $(this).remove();                     
        },

        // events from mysql database
        events: "/json-events.php",

        // submit to database
        eventDrop: function(calEvent, jsEvent, view) {
            var method = 'POST';
            var path = 'submit.php';
            var params = new Array();
            params['id'] = calEvent.id;
            params['start'] = calEvent.start;
             params['end'] = calEvent.end;
             params['title'] = calEvent.title;
            post_to_url( path, params, method);
  }
    });     
});

The PHP file I hoped would receive the POST data and insert it into the database with an end time equal to the start time plus 15 mins (edited after answer below):

<?php

mysql_connect("") or die(mysql_error());
mysql_select_db("") or die(mysql_error());

$id = $_POST["id"];
$title = $_POST["title"];
$start = $_POST["start"];
$end = date(Y-m-d T H:i:s , strtotime($start)+900);

$query = "INSERT INTO `events` VALUES (`$id`, `$title`, `$start`, `$end`, ``)";
mysql_query($query);
print $query;
?>

The database is not receiving the event data.

解决方案

This is the conclusion I have come up with and I have no problem running this off my test and public server. I have taken the FullCalendar and this is the format I use.

The database is real simple.

id integer 11 chars primary key auto-increment,
title varchar 50,
start varchar 50,
end varchar 50,
url varchar 50.

This is the index.php or index.html file.

<!DOCTYPE html>
<html>
<head>
<link href='css/fullcalendar.css' rel='stylesheet' />
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='js/jquery-1.9.1.min.js'></script>
<script src='js/jquery-ui-1.10.2.custom.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: true,
            events: "json.php",
            eventDrop: function(event, delta) {
                alert(event.title + ' was moved ' + delta + ' days\n' +
                    '(should probably update your database)');
            },
            loading: function(bool) {
                if (bool) $('#loading').show();
                else $('#loading').hide();
            }
        });
    });
</script>
<style>
    body {
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        } 
    #loading {
        position: absolute;
        top: 5px;
        right: 5px;
        }
    #calendar {
        width: 900px;
        margin: 0 auto;
        } 
</style>
</head>
<body>
<div id='loading' style='display:none'>loading...</div>
<div id='calendar'></div>
<p>json.php needs to be running in the same directory.</p>
</body>
</html>

This is the json.php file.

<?php
mysql_pconnect("localhost", "root", "") or die("Could not connect");
mysql_select_db("calendar") or die("Could not select database");


$rs = mysql_query("SELECT * FROM events ORDER BY start ASC");
$arr = array();

while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}
echo json_encode($arr);
?>

这篇关于fullCalendar事件发布到MySQL的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！