javascript - 将事件保留在 Fullcalendar 中

Question

我的页面上有一个 fullcalendar 实例。每次，我插入一个事件(通过引导模式)，我还会使用 AJAX 将数据发送到 php 文件，该文件将内容输入到数据库。然后，每次我调用该页面时，都会从数据库中获取条目并显示在日历中。我使用以下代码添加事件:

var myCalendar = $('#calendar');
var myEvent = {
        title: '<?=$r['title'];?>',
        allDay: true,
        start: '<?=$r['startDate'];?>',
        end: '<?=$r['endDate'];?>'
};
myCalendar.fullCalendar('renderEvent', myEvent);

这就是我直接添加事件的代码(在引导模式中输入信息后)，也是我在从数据库获取信息后添加事件的代码。 这一切都很好，但是:当我例如切换月份，事件不再出现，因此当调用页面时，9月份的所有事件都存在，但是当从9月切换到10月并再次切换回来时，所有事件都不再存在。为什么会发生这种情况？我该如何改变这种行为？

这是完整的代码:

 <script>
        $(document).ready(function(){
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                dayClick: function(date, jsEvent, view) {
                    $('#add_date_modal').modal('show');
                    $('#add_date_startdate').val(date.format());
                    $('#add_date_startdate').datepicker({dateFormat: 'yy-mm-dd',firstDay: 1});
                    $('#add_date_enddate').datepicker({dateFormat: 'yy-mm-dd',firstDay: 1});
                },
                editable:true,
                selectable:true
            });
        });

        function addTitle(){
            var title = $('#add_date_title').val();
            var startdate = $('#add_date_startdate').val();
            var enddate = $('#add_date_enddate').val();
            var end_split = enddate.split('-');
            end_split[2]= parseInt(end_split[2])+parseInt("1");
            enddate = end_split[0] + "-" + end_split[1] + "-" + end_split[2];
            $('#add_date_title').val('');
            $('#add_date_startdate').val('');
            $('#add_date_enddate').val('');
            $('#add_date_modal').modal('hide');

            var myCalendar = $('#calendar');
            var myEvent = {
                title:title,
                allDay: true,
                start: startdate,
                end: enddate
            };
            myCalendar.fullCalendar( 'renderEvent', myEvent );

            $.ajax({
                type: "POST",
                url: "process_calendar_data.php",
                data: {
                    title: title,
                    start: startdate,
                    end: enddate
                }
            });
        }
    </script>

    <?php
    $dbh = new PDO(); //Database information
    $sql = $dbh->prepare("SELECT * FROM calendarData WHERE UID=?");
    $sql->execute(array($_SESSION['user']));
    while($r=$sql->fetch()){
        ?>
        <script>
            $(document).ready(function() {
                var myCalendar = $('#calendar');
                var myEvent = {
                    title: '<?=$r['title'];?>',
                    allDay: true,
                    start: '<?=$r['startDate'];?>',
                    end: '<?=$r['endDate'];?>'
                };
                myCalendar.fullCalendar('renderEvent', myEvent);
            });
        </script>
    <?php
    }

    ?>

process_calendar_data.php:

if(!empty($_POST)){
    $title = $_POST['title'];
    $startdate = $_POST['start'];
    $enddate = $_POST['end'];
    $userID = $_SESSION['user'];
    $dbh = new PDO(...);
    $sql = $dbh->prepare("INSERT INTO calendarData VALUES (?,NULL,?,?,?)");
    $sql->execute(array($userID,$title,$startdate,$enddate));
}

Answer 1

您的变量 mycalendar 没有保存正确的对象，这就是 refetchEvents 不起作用的原因。你需要在初始化时设置它，如下

var mycalendar = $('#calendar').fullcalendar ();

然后就可以正确引用了

此外，您没有 events 选项来呈现事件。最好的方法是让 PHP 脚本获取所有事件，然后将它们转换为 JSON。完成此操作后，您可以将结果设置为事件选项。看看这个: http://fullcalendar.io/docs/event_data/events_json_feed/ 这样，当您调用 fetchEvents 时，它们将再次获取所有已保存的事件 或者在您的情况下，当您单击“下个月”时，它将自动重新获取