Question

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

enter image description here

这是调用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>

控制器中的代码并不重要，因为你可以在屏幕截图中看到它返回的内容:)如果有人知道如何解决这个问题我真的很感激:)尝试了我所知道的一切

好的，所以无论谁回答这个问题都会得到赏金：） 当返回ajax数据并填充事件时，我遇到完整日历月渲染问题。由于我有每个类别的复选框（事件与类别有MANY_MANY关系），每次选中或取消选中复选框时，所选事件类别的JSON数组将传递给PHP方法，该方法查询DB以查找所选类别下的所有事件。将jquery编码数组中的所有事件返回到视图，该视图然后获取该事件数组并重新呈现日历，如上部代码所示。问题是当选中或取消选中复选框并且返回ajax时，日历总是在当前月份呈现（所以现在它总是会重新呈现自己以显示9月的事件，直到月末，然后始终为Ocbober等等）），但是，如果用户在上，那么当他检查了他想要过滤事件的事件类别时，可以说2013年11月？日历仍将在9月份重新发布。我如何在用户选中/取消选中复选框时的月份重新渲染？

我点击上一个或下个月按钮时跟踪（或至少应该）当前月份的代码是

$('.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);
            });

然而，这段代码没有正确跟踪，有时它会跳过一个月，有时它会在一个月内保持不变，有时它会返回propper月，这会让我烦恼所以我无法正确调用日历的这个功能，应该设置日历关于重新投降的月份。

$('#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，您必须更改它以符合您的要求

Answer 2

我看到你使用JSON.stringify(data);这就是我认为你的错误是

也许你需要一个jsonp，下面你有我的例子

$.ajax({
            'url': 'http://domain.com/index.php/api/news?callback=?',
            'data': {'data': JSON.stringify(data), callback: 'jsonPCallback'},
            'success': function(data) {
//                console.log(data);
            },
            jsonpCallback: jsonPCallback,
            dataType: 'jsonp'
        });

function jsonPCallback(cbdata){
        console.log('callback2')
//        console.log(cbdata);
        return false;
    }

现在，你也使用类似

的东西

echo $_GET['callback'].'('.CJSON::encode(array('status_live' => 1, 'data' => $data_decoded)).')';

在控制器中返回结果？

同样，createUrl可能是错误的，因为你需要一个绝对路径

Answer 3

Actualy问题解决方案与问题本身一样奇怪，如下所示。你必须使用指定的方式进行ajax调用来获取插件文档中的json，任何其他方式你发送自己的调用（GET或POST）和日历之后进行另一次调用（因此另一个GET）如果您使用jQueries本机功能只使用“常规”$ .ajax，$ .post或$ .get调用这应该真的发布在某个部分的网站上，以便人们不会混淆为什么他们的日历没有进行ajax调用，我想知道之前没有其他人有类似的问题。因此，这是使用完整日历调用它的“正确”文档方式，您可以找到HERE

$('#fc_calendar').html('');
                $('#fc_calendar').fullCalendar({

                    eventSources: [

                        // your event source
                        {
                            url: '?r=calendar/events',
                            type: 'POST',
                            data: { data : JSON.stringify(objectToSend)},
                            error: function(data) {
                                alert(data);
                            },
                        }

                        // any other sources...

                    ]

                });

因此，它会自动获取任何返回的（格式正确的数据），并使用它来重新呈现这些事件的新日历。这是非常奇怪的方式，但这是唯一可行的方法。

Answer 4

我无法发表评论，你在上一个查询参数

中有变量：“nothing”

仔细检查您是否在控制器中查找了ajax请求（重要！），

如果这是apache的404，你有url重写问题，看起来url中缺少index.php？！

jQuery完整日历$ .ajax调用问题（在页面打开时使用静态事件）

4 个答案: