recurring event and non-recurring event using fullcalendar

Question

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?

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

UPDATED after attempting ADyson's solution:

   <?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; ?>

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

SOLUTION

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; ?>

Answer 1

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:

Non-recurring example:

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

Recurring example:

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

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