Question

根据选中或未选中的复选框，我无法显示/隐藏一组事件。我不明白如何使用jquery插件FullCalendar的eventRender属性。我从数据库中获取数据并在日历上显示正常。选中所有复选框。如果用户取消选中该复选框，我希望隐藏该组事件。如果选中，请显示。这是我的标记：

<div id="groups" style="float:left; width: 200px; height: 100px">
    <div style="border: 2px solid black; background-color: lightblue">
        <label><input type="checkbox" checked="checked" name="e1" id="e1" value="1" />Warehouse Group</label>     
    </div>
    <div style ="border: 2px solid black; background-color: red">
        <label><input type="checkbox" checked="checked" name="e2" id="e2" value="2" />Interface Group</label>     
    </div>
</div>

这是我的文档就绪功能：

$(document).ready(function () {

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

$('#calendar').fullCalendar({

    header:
    {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    titleFormat: {month: 'MMMM'},              
    defaultView: 'month',                 
    editable: false,
    events: function (start, end, timezone, callback) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetAllEvents", "Home")',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (doc) {
                var events = [];                     
                $(doc).each(function () { 
                    events.push({
                        title: $(this).attr('title'),  
                        start: $(this).attr('start'), 
                        end: $(this).attr('end'),
                        id: $(this).attr('id'),
                        description: $(this).attr('description'),
                        color: $(this).attr('color'), 
                        textColor: 'black'
                    });

                });
                callback(events);
                } ,                                                                   
            error: function () {
                alert("There was an error fetching events!")
            }
        });
    },
    eventRender: function(event, element) {
        //THIS IS WHERE I AM CONFUSED...
        //Render the event if the 'value' attribute of a checked checkbox
        //equals the description value of the event, show the event.
        $('input[type="checkbox"]').each(function () {
            if ($(this).checked) {
                if ($(this).val() == event.description)
                {
                    show event
                }
            }          
        });         
    }
     });

$('input[type="checkbox"]').on('change', function () {
    $('#calendar').fullCalendar('rerenderEvents');
});

更新更改了渲染功能，以便代码执行。但是我不明白在这个函数中要返回什么来显示事件？

eventRender: function(event, element) {
                $('input[type="checkbox"]').each(function () {
                    if ( $( this ).is( ":checked" ) ) {
                        if ($(this).val() == event.description)
                        {
                            alert('title: ' + event.title);
                            return event.title;
                        }
                    }          
                });

更新我试图传递要显示的组的组ID。它适用于初始化，但是当我取消选中其中一个组时，该数组仍然有2个项而不是一个。这是我的代码：

 $(document).ready(function () {

// page is now ready, initialize the calendar...
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var groupSelectedArray = [];

$('input[type="checkbox"]').each(function () {
    if ($(this).is(":checked")) {
        groupSelectedArray.push($(this).val());

    }
});
var groupData = { selectedGroups: groupSelectedArray };

$('#calendar').fullCalendar({

    header:
    {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    titleFormat: {month: 'MMMM'},              
    defaultView: 'month',                 
    editable: false,

    events: function (start, end, groupSelectedArray, callback) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetAllEvents", "Home")',
            data: JSON.stringify(groupData),//{ selectedGroups: groupSelectedArray },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (doc) {
                var events = [];                     
                $(doc).each(function () { 
                    events.push({
                        title: $(this).attr('title'),  
                        start: $(this).attr('start'), 
                        end: $(this).attr('end'),
                        id: $(this).attr('id'),
                        description: $(this).attr('description'),
                        color: $(this).attr('color'), 
                        textColor: 'black'
                    });

                });
                callback(events);
                } ,                                                                   
            error: function () {
                alert("There was an error fetching events!")
            }
        });
    }

这是取消选中此框时：

$('input[type="checkbox"]').on('change', function () {
            var groupSelectedArray = [];

            $('input[type="checkbox"]').each(function () {
                if ($(this).is(":checked")) {
                    groupSelectedArray.push($(this).val());

                }
            });
            var groupData = { selectedGroups: groupSelectedArray };

            $('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('refetchEvents');
            $('#calendar').fullCalendar('rerenderEvents');
        });

为什么在取消选中复选框时，groupSelectedArray没有重置为1项？

Answer 1

事件渲染回调以隐藏/显示事件：

    eventRender: function(event, element) {
            $('input[type="checkbox"]').each(function () {
                if ( $( this ).is( ":checked" ) ) {
                    if ($(this).val() == event.description)
                    {
                        // Show event: return the given event
                        alert('title: ' + event.title);
                        return event.title;
                    }
                }

                //  Hide event: return false
                return false;

            });

全部

fullcalendar基于复选框值显示事件

1 个答案: