是我遇到麻烦的mysql? fullcalendar

时间:2015-03-03 22:39:22

标签: php jquery mysql ajax fullcalendar

我在使用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: "&nbsp;&#9668;&nbsp;",
                    next: "&nbsp;&#9658;&nbsp;",
                    prevYear: "&nbsp;&lt;&lt;&nbsp;",
                    nextYear: "&nbsp;&gt;&gt;&nbsp;",
                    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;
&#13;
&#13;

ajax.php

&#13;
&#13;
<?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;
&#13;
&#13;

如果对此问题有任何建设性的意见或帮助,我将不胜感激。

1 个答案:

答案 0 :(得分:0)

嘿,伙计们感谢您的帮助。我看了一下像charlietfl这样的ajax,我发现了一些错误。它们主要是关于数据库连接的错误,但看到事件被插入到表中它似乎不正确。我仔细检查了php和mysql的语法,结果发现我使用的是一些在最新版本的php中已经折旧的mysql函数。建议我更改它以匹配PDO或mysqli结构,看它是否会起作用。感谢大家的投入,我真的很感激。