Javascript 使用fullcalendar的定期事件和非定期事件

下图显示了我日历的当前状态：

从上图可以看出，有氧训练一直在不停地重复。除了使用事件渲染功能外，是否有其他方法根据范围内的结束日期停止定期事件

注意： 并且是格式为YYYY-MM-DD的日期

尝试ADyson的解决方案后更新：

显然，它进入了周期性和非周期性事件对象，因为它们在foreach循环中

解决方案

---

你想要的是完全可能的。正如我在评论中提到的，您所要做的就是修改eventRender函数，以检查正在渲染的事件上是否存在ranges属性。如果是，则应用范围定义的重复规则。如果不是，则只允许它正常渲染，而不受干扰：

events:[
    <?php 
    inside the foreach loop:
    ..........
     if ($dow == "") {
        ?>
        {
          id: '<?php echo $event['id']; ?>',
          title: '<?php echo $event['title']; ?>',
          color: '<?php echo $event['color']; ?>',
          start: '<?php echo $start; ?>',
          end: '<?php echo $end; ?>',
        },
 <?php }
       else {?>
        {
          id: '<?php echo $event['id']; ?>',
          title: '<?php echo $event['title']; ?>',
          color: '<?php echo $event['color']; ?>',
          start: '04:00',
          end: '05:00',
          dow: '<?php echo $dow; ?>',
          ranges: [{
                     start: '<?php echo $start; ?>', 
                     end: '<?php echo $end; ?>',
                   }]
       },
   <?php } ?>
<?php endforeach; ?>

要使其工作，您的事件可以具有以下结构：

非经常性示例：

eventRender: function(event) {
  //only apply recurrence rules if the event has a "ranges" property
  if (event.ranges) {
    return (event.ranges.filter(function(range) { // test event against all the ranges

      return (event.start.isBefore(range.end) &&
        event.end.isAfter(range.start));

    }).length) > 0; //if it isn't in one of the ranges, don't render it (by returning false)
  } else {
    return true; //just allow the event to render normally if it's not recurring
  }
}

{
  title: 'Non Recurring Event',
  start: "2017-10-03T10:30:00",
  end: "2017-10-03T11:30:00",
  allDay: false
}

反复出现的例子：

eventRender: function(event) {
  //only apply recurrence rules if the event has a "ranges" property
  if (event.ranges) {
    return (event.ranges.filter(function(range) { // test event against all the ranges

      return (event.start.isBefore(range.end) &&
        event.end.isAfter(range.start));

    }).length) > 0; //if it isn't in one of the ranges, don't render it (by returning false)
  } else {
    return true; //just allow the event to render normally if it's not recurring
  }
}

{
  title: 'Non Recurring Event',
  start: "2017-10-03T10:30:00",
  end: "2017-10-03T11:30:00",
  allDay: false
}

---

请在此处查看包含重复事件和非重复事件的工作演示：

尝试YYYY-MM-DD-而不是/开始。请参阅以下内容，其中显示了受支持的解析日期的ISO格式fullCalendar在幕后使用momentJS。除此之外，你没有理由不能这样做。在尝试使用eventRender函数之前，您可能还需要稍微修改它，以检查event.ranges是否确实存在。否则你会在控制台中得到一个JS错误。我没有任何JS错误。我想有经常性事件和非经常性事件，这是那些一天的事件出现在我的日历。但是，我现在只能使其中一个出现在我的日历中。您是否按照我的建议使用了日期格式？如果从其他可接受的事件对象中省略ranges属性，则会出现控制台错误，因为范围将未定义-除非还删除了eventRender代码。但是，如果删除eventRender代码，您也将失去生成其他重复事件的能力。改为按照我上面的建议执行-更改$start和$end中使用的日期格式，并更改eventRender，以便在继续之前检查是否定义了event.ranges。我的日期格式实际上是“-”而不是“/”。我添加了您建议的检查event.ranges是否已定义的内容。日历仅显示定期事件。我希望不需要重复的一天事件也能显示在日历中。请更新问题中的代码以显示当前版本。然后我可以试着重现你的问题，它很有效！非常感谢。但现在有一个小问题。因为我的非周期性事件和周期性事件处于for循环中。因此，我的日期范围为的非经常性事件也会受到影响。我将用最新的图片更新我的帖子，展示它现在的样子。你说的for循环是什么意思？这个循环在哪里？它的目的是什么？我猜是你用来生成事件的代码。在没有看到它的情况下，我无法给出任何特定的建议，但我假设您有某种逻辑错误，在不应该的情况下，将范围或其他重复数据（例如道指）添加到非重复事件中。这是一个foreach循环。它位于事件对象内部。目的是从数据库中检索。{对于重复和非重复的示例}您必须向我展示确切的代码。问题很可能在某个地方。但就像我说的，寻找一些代码，它意外地将道指和/或范围属性添加到不应该包含它们的事件中。您还可以在浏览器中查看页面源中的最终事件数据输出，我想确认这就是正在发生的事情。从循环中可以明显看出，它为数据库中的每个$event生成一个非重复事件和一个重复事件。每次你都会得到一个。我想那不是你想要的。当然，您需要使用$event中的一些信息来确定它是否重复发生？我无法想象你怎么会认为每次都以两种格式打印事件会起作用？我有点担心，您是否真的不太了解您的代码在做什么？

{
  id: 1,
  title: "Recurring Event",
  start: "10:00",
  end: "12:00",
  dow: [1,3,4],
  ranges: [{
      start: "2017-10-01T09:30:00",
      end: "2017-10-04T15:30:00"
    }, {
      start: 2017-10-05T10:00:00",
      end: 2017-10-15T13:30:00"
    }]
}