Fullcalendar 动态切换资源列可见性

我在一个webapp上有一个FullCalendar调度程序，它具有资源和事件的双向数据绑定，所有这些都工作得很好。我希望能够为用户提供一个下拉列表，使他们能够切换列的可见性，理想情况下完全是客户端

---

我尝试了addResource/removeResource的组合，但我的问题是，日历的重新提交程序（例如，当添加新事件时）会显示以前删除的资源。我可以解决这个问题，但是我更喜欢使用JS/CSS的简单方法。我目前找不到将资源设置为不可见或宽度为零的方法-这可能吗？

我遇到了同样的挑战。我使用复选框而不是下拉列表，但是工作方式是相同的

我的资源存储在一个变量中，当我取消选中某个框时，该资源将被删除，该资源的对象将添加到另一个数组中，并使用resourceId作为键，将索引添加到对象中，以将对象恢复到原来的列中。重新选中该框时，对象将添加到资源数组中，资源将重新蚀刻

/* retrieve the resources from the server */
var planningResources;
var removedResource = [];

$.ajax({
    url: '/planning/resources/',
    method: 'get',
    success: function (response) {
        planningResources = response;
        showCalendar();
    }
    , error: function () {
        if (typeof console == "object") {
            console.log(xhr.status + "," + xhr.responseText + "," + textStatus + "," + error);
        }
    }
});

/* create the calendar */
showCalendar = function () {
    $('#calendar').fullCalendar({
        ...
    });
}

/* checkbox on click */
$('.resource').click(function() {
    var resourceId = $(this).val();
    var hideResource = !$(this)[0].checked;
    $('.status:checkbox:checked').each(function () {
    });
    if(hideResource) {
        $.each(planningResources, function(index, value){
            if( value && value.id == resourceId ) {
                value.ndx = index;
                removedResource[resourceId] = value;
                planningResources.splice(index,1);
                return false;
            }
        });
        $('#planningoverview').fullCalendar(
            'removeResource',
            resourceId
        );
    }
    else {
        planningResources.splice(removedResource[resourceId].ndx, 0, removedResource[resourceId]);
        $('#planningoverview').fullCalendar('refetchResources');
    }
});

showCalendar();

它可能不会在选美比赛中获得第一名，但它对我很有用

---

干杯

我也遇到了同样的挑战。我使用复选框而不是下拉列表，但是工作方式是相同的

我的资源存储在一个变量中，当我取消选中某个框时，该资源将被删除，该资源的对象将添加到另一个数组中，并使用resourceId作为键，将索引添加到对象中，以将对象恢复到原来的列中。重新选中该框时，对象将添加到资源数组中，资源将重新蚀刻

/* retrieve the resources from the server */
var planningResources;
var removedResource = [];

$.ajax({
    url: '/planning/resources/',
    method: 'get',
    success: function (response) {
        planningResources = response;
        showCalendar();
    }
    , error: function () {
        if (typeof console == "object") {
            console.log(xhr.status + "," + xhr.responseText + "," + textStatus + "," + error);
        }
    }
});

/* create the calendar */
showCalendar = function () {
    $('#calendar').fullCalendar({
        ...
    });
}

/* checkbox on click */
$('.resource').click(function() {
    var resourceId = $(this).val();
    var hideResource = !$(this)[0].checked;
    $('.status:checkbox:checked').each(function () {
    });
    if(hideResource) {
        $.each(planningResources, function(index, value){
            if( value && value.id == resourceId ) {
                value.ndx = index;
                removedResource[resourceId] = value;
                planningResources.splice(index,1);
                return false;
            }
        });
        $('#planningoverview').fullCalendar(
            'removeResource',
            resourceId
        );
    }
    else {
        planningResources.splice(removedResource[resourceId].ndx, 0, removedResource[resourceId]);
        $('#planningoverview').fullCalendar('refetchResources');
    }
});

showCalendar();

它可能不会在选美比赛中获得第一名，但它对我很有用

---

干杯有一个简单的方法：

将资源存储在数组变量resourceData中。 创建另一个名为VisibleResourceId的数组来存储要显示的任何资源的ID。 在resources回调函数中，筛选resourceData以仅包含VisibleResourceId中存在资源id的资源。返回筛选后的数组，fullcalendar将只为您添加所需的资源。 要从视图中删除资源，只需从VisibleResourceId和refetchResources中删除资源id即可。要重新添加资源，请将id添加到VisibleResourceId和refetchResources。完成了

---

有一种简单的方法可以做到这一点：

将资源存储在数组变量resourceData中。 创建另一个名为VisibleResourceId的数组来存储要显示的任何资源的ID。 在resources回调函数中，筛选resourceData以仅包含VisibleResourceId中存在资源id的资源。返回筛选后的数组，fullcalendar将只为您添加所需的资源。 要从视图中删除资源，只需从VisibleResourceId和refetchResources中删除资源id即可。要重新添加资源，请将id添加到VisibleResourceId和refetchResources。完成了

---

您可以为此使用resourceColumns选项。在“列对象”中，可以将“宽度”属性设置为像素数或百分比。如果在此处传递函数，则可以在其他地方轻松处理width属性。然后，hide/show函数可以将宽度设置为0以隐藏列。之后，您可以触发reinitView更新视图：$'calendar'。fullCalendarreinitView

您可以为此使用resourceColumns选项。在“列对象”中，可以将“宽度”属性设置为像素数或百分比。如果在此处传递函数，则可以在其他地方轻松处理width属性。然后，hide/show函数可以将宽度设置为0以隐藏列。之后，您可以触发reinitView更新视图：$'calendar'。fullCalendarreinitView

日历的重新加载程序（例如，当添加新事件时）将显示以前删除的资源。你能给我看复制这个的代码吗？我无法做到这一点-请参阅演示-单击移除资源按钮以使用fullcalendar的removeResource删除资源，然后拖动日历以添加事件。删除的资源将保持删除状态。您的页面是否在创建事件时发回？日历的重新提交程序（例如，添加新事件时）会显示以前删除的资源。你能给我看复制这个的代码吗？我无法做到这一点-请参阅演示-单击移除资源按钮以使用fullcalendar的removeResource删除资源，然后拖动日历以添加事件。删除的资源将保持删除状态。创建事件时，您的页面是否回发？