更改 FullCalendar 中的资源答案

【问题标题】：Change Resources in FullCalendar更改 FullCalendar 中的资源
【发布时间】：2017-08-09 22:44:21
【问题描述】：

我正在尝试制作具有多个视图选项的网络日历。我有一个学生视图和一个项目视图（FullCalendar 中的两个时间线视图，其中学生和项目都是资源）。

问题是我不知道如何动态更改资源。我试过这个：

var resources = 'students';
$('#calendar').fullCalendar({
    resources: {
        url: 'resource-load.php',
        type: 'POST',
        data: {
            'data': resources
        }
    }
});

当我改变观点时：

switch (selected) {
case 'general':
    $('#calendar').fullCalendar( 'changeView', 'month');
    break;
case 'students':
    $('#calendar').fullCalendar( 'changeView', 'timelineDay');
    $('#calendar').fullCalendar('option','resourceLabelText','Students');
    resources = 'students';
    $('#calendar').fullCalendar('refetchResources');
    break;
case 'proyects':
    $('#calendar').fullCalendar( 'changeView', 'timelineDay');
    $('#calendar').fullCalendar('option','resourceLabelText','Proyects');
    resources = 'proyects';
    $('#calendar').fullCalendar('refetchResources');
    break;
default: break;
}

它可以正确加载学生，但在我更改视图时不会更改资源。我也尝试使用resources as a function，但我真的不知道如何使它起作用。

现在我有了这个：

var resources = 'students';
$('#calendar').fullCalendar({
    resources: function(callback) {
        getResources(function(resourceObjects) {
            callback(resourceObjects);
        });
    }
});

还有一个功能：

function getResources(handleData) {
    $.ajax({
        url:"resource-load.php",
        data: {
            'data': resources
        },
        success:function(data) {
            handleData(data); 
        }
    });
}

和以前一样的其他事件。但现在它甚至不加载事件。

【问题讨论】：

fullcalendar.io/docs/resource_data/addResource 和 fullcalendar.io/docs/resource_data/removeResource 可能会对您有所帮助。你现在在做什么，例如resources = 'students'; 毫无意义。 resources 本身只是一个变量，与 fullCalendar 无关。我想你在想象它会影响 `data: { 'data': resources }, but fullCalendar has already run that code previously, and used the value of resources` 就像那一刻一样。它不会再次运行该代码，也不会采用 resources 的新值。
另外，如果您只是希望能够在每次获取资源时将“数据”的动态值传递到服务器，请尝试按照以下方式实现它：fullcalendar.io/docs/resource_data/resources_function。然后，您可以动态地将您想要的任何值以及 fullCalendar 提供的值传递给服务器。
仅查看代码我可以发现的一件事是：在您的原始定义中，对资源加载的调用是使用 POST 进行的，但在您的新代码中它是 GET（$.ajax 使用GET 除非您另有说明）。您需要在 $.ajax 选项中设置 method: "POST" 选项。您可能还需要设置dataType: "json"，以确保 jQuery 将返回的数据解释为 JSON 对象而不仅仅是字符串。
没问题，乐于助人:-)。如果我将 cmets 中的各个位写入答案，您可以将其标记为已接受的答案吗？这是正确的方法，而不是将其编辑到问题中。
现在已经完成了。祝你项目的其余部分好运。

标签： javascript jquery fullcalendar

【解决方案1】：

您在第一个示例中所做的事情，例如resources = 'students'; 本质上是没有意义的。 resources 本身只是一个变量，与 fullCalendar 无关。

我认为你在想象它会影响data: { 'data': resources }，但 fullCalendar 之前已经运行过该代码，并且使用了当时的 resources 的值。它不会再次运行该代码或获取resources 变量的新值。

如果您只想在每次获取资源时将“数据”的动态值传递到服务器，则需要根据本文档将“资源”fullCalendar 选项实现为自定义函数：fullcalendar。 io/docs/resource_data/resources_function 。然后，您可以将所需的任何值以及 fullCalendar 提供的值传递给服务器。

按照我在 cmets 中写的内容，您的第二个代码示例正是这样做的。根据您之前的示例，唯一的问题是 ajax 调用定义是错误的。您需要覆盖一些默认值，并在 $.ajax 选项中设置以下附加字段：

method: "POST"

和

dataType: "json"

（在第一个例子中，fullCalendar 已经默默地为您设置了 dataType，但现在您正在做一个自定义版本，所以您必须自己做，而且您也只是忘记再次设置 HTTP 方法。）

【讨论】：