javascript - 全日历过滤

Question

我的显示完整日历的 View 代码如下:

<div class="content">
    <div id='input'>
        <?php echo form_dropdown("package_id", $packagelist, "",'id="packageid"'); ?>
    </div>
    <div id='calendar'></div>
</div>

<style>
    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        $('#packageid').change(function() { //any select change on the dropdown with id country trigger this code           
         //$('#calendar').fullCalendar ('removeEvents');   
        var packageid = $('#packageid').val();
            alert(packageid);
            if(packageid !== null)
            { $('#calendar').fullCalendar({
                 //var $pid = packageid;
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                displayEventEnd: {
                    month: true,
                    basicWeek: true,
                    "default": true
                },
                defaultDate: '2014-11-12',
                //editable: true,
                eventLimit: false, // allow "more" link when too many events

                events: 
                "<?php echo base_url('admin/schedule/scheduledetails/hel/');?>"+"/"+packageid,
            }); 
    }


        });
    });

</script>

当我第一次单击下拉菜单时，过滤后的事件将显示在日历上。但是，当我单击下拉菜单中的另一个项目时，日历上不会发生任何更改。现在，如果我刷新页面并从下拉列表中选择另一个项目，则会显示包含已过滤事件的日历。现在，如果我再次尝试更改下拉列表选择，日历上不会发生任何更改。我究竟做错了什么。我在 onchange 函数之后调用了 javascript 来显示日历。

编辑2:现在我已将代码编辑为如下所示:

<script type="text/javascript">  
    $(document).ready(function(e)  {  
        $('#calendar').fullCalendar('removeEvents');
        $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                displayEventEnd: {
                    month: true,
                    basicWeek: true,
                    "default": true
                },
                defaultDate: '2015-11-12',
                //editable: true,
                eventLimit: false, // allow "more" link when too many events

                events: "<?php echo base_url('admin/schedule/scheduledetails/json/')?>",
                 cache : false,
            }); 

});


</script>

此脚本用于最初显示日历以及整体事件。

现在完成以下脚本来过滤事件:

<script>

     $(document).ready(function() {
        $('#packageid').change(function() { //any select change on the dropdown with id country trigger this code           
         $('#calendar').fullCalendar ('removeEvents');   
        var packageid = $('#packageid').val();
           // alert(packageid);
             $('#calendar').fullCalendar('removeEvents');

             $('#calendar').fullCalendar('addEventSource', '<?php echo base_url();?>admin/schedule/scheduledetails/hel/'+packageid); 
             //$('#calendar').fullCalendar('removeEvents');

        }); 
    });


</script>

出现的问题是 .日历最初加载了全部数据。当我单击用于过滤的下拉按钮时，就会发生过滤。如果我单击完整日历上的上一个或下一个按钮，那么它也可以工作，而不会重复事件。现在，如果我从数据库中选择下一个事件，过滤再次完美发生。但是，当我单击“上一个”或“下一个”按钮时，上一个下拉选择的事件加上当前下拉选择的事件将显示在全日历 View 上。为什么会发生这种情况？我已经使用了removeEvents。为什么它不起作用？

Answer 1

您每次调用 fullCalendar 来创建新的日历，您需要销毁它，或者只是更改源并刷新:

我在这里所做的是添加一个新的源；如果您想更改/删除旧源，只需将事件源保存在一个变量中，以便在“addEventSource”调用之前在“removeEventSource”调用中使用。

<script type="text/javascript">
    $(document).ready(function() {

        $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                displayEventEnd: {
                    month: true,
                    basicWeek: true,
                    "default": true
                },
                defaultDate: '2014-11-12',
                //editable: true,
                eventLimit: false, // allow "more" link when too many events

                events: 
                "<?php echo base_url('admin/schedule/scheduledetails/hel/');?>"+"/"+packageid,
            }); 

        $('#packageid').change(function() { //any select change on the dropdown with id country trigger this code           
        var packageid = $('#packageid').val();
            alert(packageid);
        if( packageid != null ) {
            $('#calendar').fullCalendar('addEventSource', '/admin/schedule/scheduledetails/hel/'+packageid);
        }

    }


        });
    });

</script>