全日历过滤

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);
}