php - jQuery完整日历$.ajax调用问题(在页面打开时使用静态事件)

Question

因此，我使用 Yii 和完整日历作为小部件，在 CalendarController 的 View 中调用该小部件。在调用小部件时，小部件会从数据库检索现有事件并将它们放入完整日历中进行显示。现在我还制作了一个简单的过滤器，用于按事件所在的类别(带有提交的下拉列表)过滤掉事件，因此我想将请求发送到名为actionEvents()的calendarController方法，然后该方法接受传递给它的内容(类别我们想要检索事件的事件)，将它们返回到 jQuery，然后再次调用日历，并向其传递所需属性的 json_encode(d) 数组，以便在下拉列表中的选定类别下正确呈现事件。我遇到的问题是，由于某种原因，fullcalendar 似乎正在执行我想要的调用( POST )以及另一个 GET 调用，因此它确实从 Controller 的方法将格式正确的 json 返回到 jQuery，但只显示了一个返回时没有事件的空日历。这是返回数据后控制台的样子。

这是调用ajax调用的代码

$(document).ready(function() {
            var date = new Date(),
                d = date.getDate(),
                m = date.getMonth(),
                y = date.getFullYear();

            $('form.eventFilter').submit(function() {
                var selectedOption = $('form.eventFilter select').val(),
                    eventContainer = $('.fc-event-container');

                var objectToSend = { "categories" : [selectedOption],"datefrom" : "september2013"/*month + "" + year*/ , "dateto" : "september2013"/*month + "" + year*/};

                $.ajax({
                        url: '<?php echo Yii::app()->createUrl('calendar/events'); ?>',
                        type: "POST",
                        async:false,
                        data: {data : JSON.stringify(objectToSend)},
                        success: function(data) {

                            $('#fc_calendar').html('');
                            $('#fc_calendar').fullCalendar({
                                events: data
                            });
                            console.log(data);
                        },
                        error: function() {
                            console.log(data);
                        }

                    });

                return false;
            })
        })

在第一页加载(打开)时呈现初始日历事件的代码是这样的

<div id="fc_calendar"></div>
    <script class="fc_calendar_script">
        // gets calendar and its events working and shown
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        $('#fc_calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            editable: true,
            events: [
            <?php foreach ($eventItems as $event): ?>
            {
                title: '<?php echo htmlentities($event['eventItems']['title']); ?>',
                start: new Date(y,m,d + <?php echo $event['eventItems']['startdate_day_difference']; ?>),
                end:   new Date(y,m,d + <?php echo $event['eventItems']['enddate_day_difference']; ?>),
                url: '<?php echo $event['eventItems']['url']; ?>',
                className: [
                <?php foreach($event['eventCategories'] as $category) { echo ''.json_encode($category['slug']).','; }?> // and categories slugs as classnames, same purpose
                ]
            },
            <?php endforeach; ?>
            ]
        });
    </script>

Controller 中的代码并不那么重要，因为您可以在屏幕截图中看到它返回的内容:)如果有人知道如何解决这个问题，我将非常感激:)尝试了我所知道的一切

好的，回答这个问题的人都会得到赏金:) 当返回 ajax 数据并填充事件时，我在完整日历月渲染方面遇到问题。由于我对每个类别都有复选框(事件与类别有 MANY_MANY 关系)，并且每次选中或取消选中复选框时，所选事件类别的 JSON 数组都会传递到 PHP 方法，该方法在数据库中查询所选类别下的所有事件，并且将 jquery 编码数组中的所有事件返回到 View ，然后 View 获取该事件数组并重新呈现日历，如上面的代码所示。 问题是，当选中或取消选中复选框并且ajax返回时，日历总是在当前月份呈现(所以现在它总是会重新呈现自身以显示九月的事件，直到月底，然后总是十月等等)，但是如果用户在 2013 年 11 月检查他想要过滤事件的事件类别时会怎么样？日历仍将在九月重新呈现。我怎样才能让它在用户选中/取消选中复选框时所在的月份重新渲染？

当单击上个月或下个月按钮时，我拥有的跟踪(或至少应该)当前月份的代码是这样的

$('.fc-button-next span').click(function(){
                start = $('#fc_calendar').fullCalendar('getView').visEnd;
                console.log(start);
            });

            $('.fc-button-prev span').click(function(){
                start = $('#fc_calendar').fullCalendar('getView').visStart;
                console.log(start);
            });

但是这个代码没有正确跟踪，有时它会跳过一个月，有时它会保持在该月不变，有时它会返回正确的月份，这让我很烦恼，所以我无法正确调用应该设置日历的日历函数重新渲染时到正确的月份。

$('#fc_calendar').fullCalendar('gotoDate', start);

Answer 1

我认为您可能正在寻找类似的东西

jQuery(function($){
    $('form.eventFilter').submit(function() {
        $('#fc_calendar').fullCalendar( 'refetchEvents' );
        return false;
    });

    $('#fc_calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        editable: true,
        events: function(start, end, callback) {

            var selectedOption = $('form.eventFilter select').val(),
                eventContainer = $('.fc-event-container');

            //create the data to be sent
            var objectToSend = {
                "categories": [selectedOption],
                "datefrom": start.getDate() + '-' + start.getMonth() + '-' + start.getYear(),
                "dateto": end.getDate() + '-' + end.getMonth() + '-' + end.getYear()
            };          

            //use jsonp based jQuery request
            $.ajax({
                url: 'events.json',
                data: objectToSend,
                cache: false
            }).done(function(data){
                //on success call `callback` with the data
                callback(data)
            })
        }
    });
});

演示:Plunker

注意:此处未使用日期参数格式和 jsonp，您必须更改它以满足您的要求