将事件保存在全日历中

Question

我的页面上有一个完整日历的实例。每次，我插入一个事件（通过 bootstrap 模式），我还将带有 AJAX 的数据发送到 php 文件，该文件将内容输入数据库。然后，每次我调用该页面时，条目都会从数据库中取出并出现在日历中。我使用以下代码添加事件：

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

这是我直接添加事件的代码（在 bootstrap 模式中输入信息后），也是我从数据库获取信息后添加事件的代码。这一切都很好，但是：当我例如切换月份，事件不再出现，所以当调用页面时，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 时，它们将再次获取所有已保存的事件或者在您的情况下，当您单击下个月时，它将自动重新获取

将事件保存在全日历中

Keep events in Fullcalendar

javascript

php

jquery

fullcalendar