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!

Don't mix php and javascript that way. They don't run at the same time in same environment. You are effectively creating numerous `var date` ...`var ranges` etc and each will overwrite the previous — charlietfl, Feb 27 '16 at 16:56
@charlietfl the code works perfect for my project and shows what i want it to show. The problem is that i want to show repeating events on the range that i want! And not just one time. — Konstantinos Natsios, Feb 27 '16 at 16:57
What is the idea? Create recurring events ? You need to manually do that by looping through dates — charlietfl, Feb 27 '16 at 17:01
The idea is to make some events with the data that i take successfuly with the echo from php. And those events i want them to be repeated each thursday for example, from 1-3-2016 until 1-7-2016. So in this date range i want every thursday this event to be appeared. And after the last thursday, no event should be appeared at thursdays! @charlietfl — Konstantinos Natsios, Feb 27 '16 at 17:05
You need to create a loop that increments date until the end date is reached and push each event into the events array. There is no built in way to do this in the plugin — charlietfl, Feb 27 '16 at 17:06

Dimitris Konomis · Accepted Answer · 2016-03-01T20:40:04.647

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

score 1 · Answer 2 · answered Aug 29 '17 at 13:46

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

    }

event.start n event.dowend are objects rite.. is it ok to compare two objects directly with '>=' or '<=' — Lisa, Nov 20 '19 at 07:12

score 0 · Answer 3 · answered May 14 '18 at 17:02

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>

Repeating time on fullcalendar event

3 Answers3

Linked