1

我设法通过调用 addevents.php 并通过 ajax 将变量传递给 php 脚本来获取要添加到数据库的事件。我有 events.php，它从表中选择所有内容并将其作为字符串传递回日历（default.html）。但是不会填充日历。

events.php
<?php
// List of events
$json = array();

// connection to the database
$mysqli = new mysqli("localhost", "root", null, "fullcalendar");

//check connection
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

//fetches and sends data in string
$result = $mysqli->query("SELECT * FROM calendar_data ORDER BY id");
$display = $result->fetch_array(MYSQLI_ASSOC);
echo json_encode($display);
?>

default.html
<!DOCTYPE html>
<html>
<head>
    <link href='css/fullcalendar.css' rel='stylesheet' />
    <script src='http://code.jquery.com/jquery-1.9.1.js'></script>
    <script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
    <script src='js/fullcalendar.min.js'></script>
    <script>
        $(document).ready(function() {
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();
            var calendar = $('#calendar').fullCalendar({
                editable: true,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                events: "http://localhost:80/fullcalendar/events.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:');
                    if (title) {
                        start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
                        end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
                        $.ajax({
                            url: 'http://localhost:80/fullcalendar/add_events.php',
                            data: 'title='+ title+'&start='+ start +'&end='+ end ,
                            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) {
                    start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
                    end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
                    $.ajax({
                        url: 'http://localhost:80/fullcalendar/update_events.php',
                        data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
                        type: "POST",
                        success: function(json) {
                            alert("Updated Successfully");
                        }
                    });
                },
                eventResize: function(event) {
                    start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
                    end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
                    $.ajax({
                        url: 'http://localhost:80/fullcalendar/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;
        }
        #calendar {
            width: 720px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id='calendar'></div>
</body>
</html>
4

0 回答 0