完整的日历过滤

Question

显示完整日历的我的查看代码如下：

<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>

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

编辑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>

发生的问题是。 日历最初会加载整个数据。 当我单击下拉按钮进行过滤时，发生过滤。 如果我单击完整日历上的上一个或下一个按钮，那么它也可以工作而不会重复事件。 现在，如果我从数据库中选择下一个事件，则再次可以完美地进行过滤。 但是，当我单击“上一个”或“下一个”按钮时，前一个下拉选择加上当前下拉选择的事件将显示在全日历视图中。 为什么会这样呢？ 我用过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>

Answer 2

这是我使用FullCalendar实现过滤的操作。 通过使用下拉菜单触发事件。 初始视图显示所有事件。 使用下拉菜单会触发过滤器。 过滤器适用于月，周和日视图。

    $(document).ready(function() {

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        defaultDate: (new Date()).toISOString().substring(0, 10),
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: 'include/myfeed.php'
    });

});

function filterByDealer(dealer){
    $('#calendar').fullCalendar('removeEvents');
    $('#calendar').fullCalendar('addEventSource','include/myfeed.php?d='+dealer);
}