Repeating Time On Fullcalendar Event

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 al

Solution 1:

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) {
                returnfalse;
           }                                                            
    }

Solution 2:

I extended the solution and created a jsfiddle [

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

        var theDate = event.startvar endDate = event.dowend;
				var startDate = event.dowstart;
        
        if (theDate >= endDate) {
                returnfalse;
        }

        if (theDate <= startDate) {
          returnfalse;
        }
        
        },

        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: newDate('2016/01/03'),
            dowend: newDate('2016/01/17')
       }
    ]
  })
});

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" /></script><scriptsrc="https://code.jquery.com/jquery-2.2.4.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script><divid='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:newDate('2016/01/03'),dowend:newDate('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) {
            returnfalse;
    }

    if (theDate <= startDate) {
      returnfalse;
    }

    }

Solution 3:

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 weeksend: moment().endOf('week').add(7, 'd'),
    }, {
      start: moment('2018-06-15', 'YYYY-MM-DD'), //all of februaryend: 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;
  },
}) 

 
});

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