在mysql中的Fullcalendar保存记录

时间:2015-01-21 14:56:13

标签: php jquery mysql ajax fullcalendar

我正在努力创造一个拖累和放大器删除日历(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));
?>

我做错了什么以及如何改进我的剧本?

1 个答案:

答案 0 :(得分:2)

您可能希望扩展您的问题以准确包含出错/无效的内容?

我至少看到一个问题:

您的AJAX调用应如下所示:

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

完成&#39;数据:&#39; line ...它是一个字典,而不是使用POST时的GET Url编码字符串。 您可能还想添加一个失败部分来捕捉错误,或者至少打印掉“json”的价值。如果您的php页面抛出错误(它将在成功回调的变量中)。