使用全日历的重复事件和非重复事件 [英] recurring event and non-recurring event using fullcalendar

问题描述

events: [

     {
      id: '<?php echo $event['id']; ?>',
      title: '<?php echo $event['title']; ?>',
      color: '<?php echo $event['color']; ?>',
      start: '<?php echo $start; ?>',
      end: '<?php echo $end; ?>',
      dow: '<?php echo $dow; ?>',
      ranges: [{
                 start: '<?php echo $start; ?>', 
                 end: '<?php echo $end; ?>',
               }]
      },
]

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

Following image below shows my current status of my calendar:

如上图所示，有氧运动一直在不停地重复进行.除了使用事件呈现功能之外，是否有一种方法可以根据范围内的结束日期来停止重复发生的事件?

As seen from the image above, the cardio training has been recurring non-stop. Is there a way to stop the recurring event based on the end date in ranges, other than using event render function?

注意: <?php echo $start; ?>和<?php echo $end; ?>是采用YYYY-MM-DD格式的日期.

Take note: <?php echo $start; ?> and <?php echo $end; ?> is a date formatted in YYYY-MM-DD.

尝试ADyson解决方案后已更新:

   <?php foreach ($events as $event): ..... ?> 
{
      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; ?>',
               }]
}, 
{
      id: '<?php echo $event['id']; ?>',
      title: '<?php echo $event['title']; ?>',
      color: '<?php echo $event['color']; ?>',
      start: '<?php echo $start; ?>',
      end: '<?php echo $end; ?>',
} <?php endforeach; ?>

显然，由于它们位于foreach循环中，因此它会进入重复发生的事件对象和非重复发生的事件对象.

Apparently, it went into recurring and non-recurring event objects due to they are in the foreach loop.

解决方案

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函数，以检查正在渲染的事件是否存在"ranges"属性.如果是这样，则应用范围定义的重复规则.如果没有，那么只需允许它正常渲染而不会受到干扰:

What you want is perfectly possible. As I mentioned in the comments, all you have to do is modify the eventRender function to check whether the "ranges" property exists on the event being rendered. If it does, then apply the recurrence rules defined by the ranges. If not, then just allow it to render normally with no interference:

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
  }
}

为此，您的事件可以具有以下结构:

For this to work, your events can have the following structures:

非重复示例:

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

重复示例:

{
  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"
    }]
}

在此处查看有效的演示，其中包含重复性事件和非重复性事件: http://jsfiddle.net/sbxpv25p/27/

See a working demo here, containing both recurring and non-recurring events: http://jsfiddle.net/sbxpv25p/27/

这篇关于使用全日历的重复事件和非重复事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！