2

所以我使用 Yii 和完整的日历作为在 CalendarController 视图中调用的小部件。在调用小部件时，小部件从数据库中检索现有事件并将它们放入完整的日历中以显示。现在我还制作了一个简单的过滤器，用于按类别过滤事件（带有提交的下拉列表），所以我想将请求发送到一个名为 actionEvents() 的 calendarController 方法，然后该方法将传递给它的内容（类别我们要检索事件的事件），将它们返回给 jQuery，然后再次调用日历，将所需属性的 json_encode(d) 数组传递给它，以正确呈现下拉列表中所选类别下的事件。我遇到的问题是，由于某种原因，fullcalendar 似乎正在执行我想要的调用（ POST ）以及另一个 GET 调用，因此它确实从控制器的方法将格式正确的 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>

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

好的，所以赏金给回答这个问题的人:) 当返回 ajax 数据并填充事件时，我遇到了完整日历月渲染的问题。由于我对每个类别都有复选框（事件与类别有 MANY_MANY 关系），并且每次选中或取消选中复选框时，所选事件类别的 JSON 数组都会传递给 PHP 方法，该方法会查询数据库中选择的类别下的所有事件和将 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);
            });

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

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

4 回答 4

3

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

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

于 2013-09-15T01:03:14.350 回答
1

我看到你使用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可能是错误的，因为您需要绝对路径

于 2013-09-09T13:20:35.393 回答
1

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

$('#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...

                    ]

                });

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

于 2013-09-09T14:32:29.480 回答
0

我无法评论，您在最后一个查询参数中分配了变量：“nothing”

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

如果这是 apache 的 404，你有 url 重写问题，而且看起来 index.php 从 url 中丢失了？！

于 2013-09-09T12:16:28.310 回答