Repeating time on fullcalendar event

Question

I'm trying to make some repeating events on a certain time with full calendar. For example i want the events to happen from 1-3-2016 until 1-7-2016.

Here is the code that i take all the events.

<script type="text/javascript">
$(document).ready(function()
{
                    var events=new Array();
                var numberofevents = '<?php echo count ($info); ?>';

                    <?php 
                    foreach($info as $module => $kati) { ?>
                    var date = new Date('<?php echo $kati['ModuleSchedule_StartTtime']; ?>');
                    var day = date.getDate();
                    var month = date.getMonth();
                    var year = date.getFullYear();
                    var time = date.getHours();
                    var start_date = new Date(year, month, day, time, 0);
                    var end_date = new Date(year, month, day, time+2, 0);
                    var ranges = [{ start:"2016/03/01", end:"2016/06/01"}] //range of repeat
                    var event_name = '<?php echo $kati['ModuleSchedule_Module_Name']; ?>';
                    var event_description = '<?php echo $kati['ModuleSchedule_Semester_Name'] ?>' + '<br/>' + '<?php echo $kati['ModuleSchedule_Classroom'] ?>' + '<br/>' + '<?php echo $kati['ModuleSchedule_TeacherUserFullName'] ?>';
                    event = new Object();       
                    event.title = event_name;
                    event.start = start_date;
                    event.end = end_date;
                    event.description = event_description;
                    event.color = "blue";
                    event.dow = '<?php echo $kati['ModuleSchedule_DayOfWeek']; ?>';
                    event.ranges = ranges;
                    event.allDay = false;
                    events.push(event);
                    <?php   }
                    ?>


             $('#calendar').fullCalendar({
                 eventRender: function(event, element, view) {
            // opens events in a popup window
            element.find('.fc-title').append("<br/>" + event.description);
            element.qtip({ content: "Στοιχεία μαθήματος: " + event.title + "<br/>" + event.description});
        },
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    editable: true,
                    weekMode: 'liquid',
                    weekends: true,
                    theme: true,
                    selectable: true,
                    editable: false,
                    events: events
                  });
            }); 

On the line that i take the "ranges" is there any proper way to add then in the event ? Because for sure what i'm trying to do is wrong here. Thanks for your time!

Answer 1

You can also use ranges. Please check the code below

$(document).ready(function() {
 $('#calendar').fullCalendar({
  defaultDate: moment(),
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  defaultView: 'month',

  events: [{
    title: "My repeating event",
    start: '10:00',
    end: '14:00',

    dow: [1, 2, 3, 4],

    ranges: [{
      start: moment().startOf('week'), //next two weeks
      end: moment().endOf('week').add(7, 'd'),
    }, {
      start: moment('2018-06-15', 'YYYY-MM-DD'), //all of february
      end: moment('2018-06-15', 'YYYY-MM-DD').endOf('month'),
    }, ],

  }],

  eventRender: function(event) {
    return (event.ranges.filter(function(range) {
      return (event.start.isBefore(range.end) &&
        event.end.isAfter(range.start));
    }).length) > 0;
  },
}) 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.js"></script>
<div id='calendar'></div>

Answer 2

I extended the solution and created a jsfiddle [

$(document).ready(function() {
  $('#scheduler').fullCalendar({
  
        eventRender: function(event, element, view) {

        var theDate = event.start
        var endDate = event.dowend;
				var startDate = event.dowstart;
        
        if (theDate >= endDate) {
                return false;
        }

        if (theDate <= startDate) {
          return false;
        }
        
        },

        defaultView: 'month',
        header: {
        left: 'prev,next today',
  			center: 'title',
  			right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '2016-01-15T16:00:00',
       events: [{
       			id: 1,
            title:"Front End",
            start:'10:00', 
            end:  '13:00', 
            dow: [0, 1, 2, 3, 4, 5, 6],
            dowstart: new Date('2016/01/03'),
            dowend: new Date('2016/01/17')
       }
    ]
  })
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet"/>
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>


<div id='scheduler'></div>

]1 to show you the specific solution that display daily concurrent event only between two dates.

The solution relies on add the two custom dates parameters for the event object:

dowstart: new Date('2016/01/03'),
dowend: new Date('2016/01/17')

And then add the condition to the eventRender function:

eventRender: function(event, element, view) {

    var theDate = event.start
    var endDate = event.dowend;
            var startDate = event.dowstart;

    if (theDate >= endDate) {
            return false;
    }

    if (theDate <= startDate) {
      return false;
    }

    }

Answer 3

Add this to your event object

event.dowend = new Date('2016/7/1');

and on eventRender check if date has reach the dowend and if that's true return false, so the calendar wont create the event

eventRender: function(event, element, view) {
        // opens events in a popup window
        element.find('.fc-title').append("<br/>" + event.description);
        element.qtip({ content: "Στοιχεία μαθήματος: " + event.title + "<br/>" + event.description});

        var theDate = event.start
        var endDate = event.dowend;

        if (theDate >= endDate) {
                return false;
           }                                                            
    }