使用自定义查询参数获取 fullcalendar api

我正试图配置 fullcalendar 5 从数据库中获取 api。除了开始和结束之外，我还想向请求传递额外的查询参数。我已经尝试过这种方法，但发现请求总是忽略附加参数。

 events：{
                url：'http://localhost:4000/api/timesheet'、
                type: 'GET'、
                data：{
                    user：something'、
                    project: 'somethingelse'.
                },
                error: function () {
                    alert('there was an error while fetching events!')；
                },
                color: 'yellow'、
                textColor: 'black'.
            },

请求的 URL 是：

http://localhost:4000/api/timesheet?start=2024-05-26T00:00:00+02:00&end=2024-07-07T00:00:00+02:00

说的对，FullCalendar 在 events 对象中使用 data 选项时，默认只传递 start 和 end 参数。

要传递额外的查询参数，可以使用以下两种方法：

方法一： 使用 extraParams 选项 (推荐)

FullCalendar 提供了 extraParams 选项，允许在发送 AJAX 请求时添加额外的参数。

events: {
  url: 'http://localhost:4000/api/timesheet',
  type: 'GET',
  extraParams: {
    user: 'something',
    project: 'somethingelse'
  },
  error: function () {
    alert('there was an error while fetching events!');
  },
  color: 'yellow',
  textColor: 'black'
}

使用 extraParams ，FullCalendar 会将这些参数附加到请求 URL 中。

方法二： 动态构建 URL

也可以在 events 对象的 url 属性中动态构建完整的 URL，包括所有需要的参数。

events: {
  url: function(info) {
    return 'http://localhost:4000/api/timesheet' +
           '?start=' + info.startStr +
           '&end=' + info.endStr +
           '&user=something' +
           '&project=somethingelse';
  },
  type: 'GET',
  error: function () {
    alert('there was an error while fetching events!');
  },
  color: 'yellow',
  textColor: 'black'
}

在这个例子中，我们使用了一个返回 URL 字符串的函数。函数接收一个 info 对象作为参数，该对象包含 startStr 和 endStr 属性，表示当前视图的开始和结束日期。

两种方法都可以实现的需求，但使用 extraParams 选项更简洁易读，推荐使用这种方法。