全日历保存记录 mysql

Question

我正在尝试创建拖放式日历 (Fullcalendar) 并将新的或编辑过的项目保存在 MySQL 数据库中。

但我现在有两个问题。

第一个：

我无法在月视图中拖放超过 1 个项目： http://snag.gy/SF9wI.jpg

但是如果我在周视图中拖动一个新的，它会起作用：http://snag.gy/0tW2m.jpg 如果我返回月视图，我刚刚在周视图中创建的视图仍然存在。

第二个：

我是 ajax,jquery 的新手，我真的不知道如何使用 $_post，所以我可以将我的记录保存在我的 MySQL 数据库中。我尝试了一些指南但没有成功。

MySQL 数据库：

名称：tblEvent

idEvent INT auto_increment PRIMARY KEY
fiTask INT
fiUser INT
dtStart DATETIME
dtEnd DATETIME
dtUrl VARCHAR(255)
dtAllDay TINYINT(1)

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:

    <?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:

    <?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));
?>

我哪里做错了，我该如何改进我的脚本？

Answer 1

您可能希望扩展您的问题以准确地包括正在发生的事情wrong/not？

我至少看到一个问题：

您的 AJAX 调用应如下所示：

$.ajax({
    url: '/add_event.php',
    data: {'title': title, 'start': start ...}
    type: "POST",
    success: function (json) {
        alert('Added Successfully');
    }
});

完成 'data:' 行...它是一个字典，而不是使用 POST 时的 GET Url 编码字符串。你可能还想添加一个失败部分来捕获错误，或者至少打印出 'json' 的值，以防你的 php 页面抛出错误（它将在成功回调的那个变量中).

全日历保存记录 mysql

Fullcalendar save record in mysql

php

mysql

ajax

jquery

fullcalendar

第一个：

第二个：