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>

正在发生的问题是。日历最初加载了整个数据。当我点击下拉按钮进行过滤时，过滤就会发生。如果我单击完整日历上的上一个或下一个按钮，那么它也可以在没有重复事件的情况下工作。现在，如果我从数据库中选择下一个事件，则再次完成过滤。但是当我单击上一个或下一个按钮时，先前下拉选择的事件加上当前下拉选项将显示在fullcalendar视图上。为什么会这样？我用过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);
}

完整的日历过滤

2 个答案: