求助：为PHP FullCalendar插件实现事件点击跳转至数据库自定义链接

我来帮你解决这个问题！要实现点击事件跳转到自定义链接，只需要在FullCalendar里添加事件点击的回调逻辑，同时确保你的PHP接口已经正确返回link字段就可以了，具体步骤如下：

1. 确认PHP返回的JSON包含link字段 #

你的PHP代码已经用了SELECT *，只要数据库的events表确实存在link字段，返回的JSON数据里就会自动包含每个事件的link值。可以直接在浏览器地址栏访问events.php，查看返回的JSON结构是否包含该字段，比如类似这样：

[{"id":"1","title":"团队会议","start":"2024-05-22","end":"2024-05-22","link":"/meeting-detail.php?id=1",...},...]

2. 修改FullCalendar的JS配置，添加事件点击跳转逻辑 #

你需要在FullCalendar的初始化配置里新增eventClick回调函数，用来处理点击事件后的跳转；另外如果你不需要点击空白日期跳转，可以调整或移除原有的select回调，具体修改后的代码如下：

$(document).ready(function() {
  function fmt(date) {
    return date.format("YYYY-MM-DD HH:mm");
  }
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  var calendar = $('#calendar').fullCalendar({
    editable: true,
    header: {
      left: 'prev,next',
      center: 'title',
      right: '',
    },
    events: "events.php",
    eventRender: function(event, element, view) {
      if (event.allDay === 'true') {
        event.allDay = true;
      } else {
        event.allDay = false;
      }
    },
    selectable: true,
    selectHelper: true,
    editable: true,
    // 新增：点击事件时跳转到对应的自定义链接
    eventClick: function(event, jsEvent, view) {
      // 先检查link字段是否有效，避免空跳转
      if (event.link && event.link.trim() !== '') {
        window.location.href = event.link;
      }
    },
    // 如果你不需要点击空白日期跳转，可以删除下面的select回调
    select: function(start, end, jsEvent, view) {
      // 这里可以保留或修改为你需要的空白日期点击逻辑，比如跳转到新增事件页面
      // window.location = "add-event.php";
    },
  });
});

额外提示 #

• 如果link字段存储的是相对路径（比如/event-detail.php?id=2），直接用window.location.href就能正常跳转；如果是外部链接，记得确保字段里包含完整的http://或https://前缀。
• 代码里加了link字段的有效性判断，避免因字段为空导致的无效跳转。

这样修改后，用户点击日历上的事件就会自动跳转到该事件对应的自定义链接啦！

内容的提问来源于stack exchange，提问作者Yeeting Cheung