fullcalendar addEventSource not adding event array to calendar

904
November 22, 2016, at 3:47 PM

I am creating an on-call schedule in which the user selects the group with a member list and the length and type of rotation. When the user clicks the 'Create Schedule' button, a list of events are displayed on the calendar representing this rotation schedule. The events are created and added to an event array but they will not display on the calendar. When the code reaches,

 $('#edit_calendar').fullCalendar('addEventSource', newEvents);

the application just hangs and no events are displayed on the calendar. This is the function that is called for the click event:

$("#rotation_schedule_btn").click(function () {
    //create member list order    
    var memberList = [];         
    $("#rotationList li").each(function () {
        memberList.push({
            id: $(this).attr('id'),
            name: $(this).text(),
            color: $(this).css('background-color')
        })
    });
    //start and end date and time for new schedule
    var startDate = new Date($('#schedule_start_date').val());
    var endDate = new Date($('#schedule_end_date').val());
    //remove events between startDate & endDate
    $('#edit_calendar').fullCalendar('removeEvents', function (event) {
        if (event.start.toDate() >= startDate && event.start.toDate() <= endDate
               || event.end.toDate() >= startDate && event.end.toDate() <= endDate) {
            return true;
        }
    });
    //Create events from rotation schedule selected
    var newEvents = [];
    var rotation_length = $('#rotation_type_select option:selected').val();
    var rotation_start_date = new Date(startDate);
    var rotation_end_date = new Date(rotation_start_date);
    rotation_end_date.setDate(rotation_end_date.getDate() + parseInt(rotation_length));
    rotation_end_date.setMinutes(rotation_end_date.getMinutes() - 1);
    var member_index = 0;
    while (rotation_end_date <= endDate)
    {
        var event = new Object();
        event = {
            title: memberList[member_index].name,
            start: rotation_start_date,
            end: rotation_end_date,              
            objectID: memberList[member_index].id,
            color: memberList[member_index].color,
            allDay: true,
            textColor: 'black'
        };
        newEvents.push(event);
        rotation_start_date.setDate(rotation_start_date.getDate() + parseInt(rotation_length));         
        rotation_end_date.setDate(rotation_end_date.getDate() + parseInt(rotation_length));
        if ((memberList.length - 1) == member_index)
        {
            member_index = 0;
        }
        else {
            member_index++;
        }
    }           
    //Render events on calendar
     $('#edit_calendar').fullCalendar('addEventSource', newEvents);
}); //end create schedule button click

Why won't the newEvents array display on the calendar? I would greatly appreciate it if you can tell me where I have gone wrong.

Thanks.

UPDATE After reviewing the newEvents array, it seems that all of the start and end dates are the same. There are 3 events, each event should last 1 week (7 days). But all of the events have the same start and end date.

Answer 1

I think I know what's going on. In this case you are passing a reference to your event objects rather than the value of rotation_start_date and rotation_end_date:

event = {
        title: memberList[member_index].name,
        start: rotation_start_date,
        end: rotation_end_date,              
        objectID: memberList[member_index].id,
        color: memberList[member_index].color,
        allDay: true,
        textColor: 'black'
    };

The moment you update said the values of those dates, all your events see the same update since they all have the same reference to those objects. What you want to do is either declare new variables that will hold the value within your loop or just set the start and end date of the event to a new date using the values from rotation_start_date and rotation_end_date

    var event = new Object();
    event = {
        title: 'title',
        start: new Date(rotation_start_date),
        end: new Date(rotation_end_date),
        objectID: member_index,
        color: 'blue',
        allDay: true,
        textColor: 'black'
    };

You didn't provide any code, but I created a jsfiddle with some example code to test this out fullcalendar example

Answer 2

Final answer:

 while (rotation_end_date <= endDate)
    {
        var event = new Object();
        event = {
            title: memberList[member_index].name,
            start: new Date(rotation_start_date),
            end: new Date(rotation_end_date),
            objectID: memberList[member_index].id,
            color: memberList[member_index].color,
            allDay: true,
            textColor: 'black'
        };
        newEvents.push(event);
        rotation_start_date = new Date(rotation_start_date.setDate(rotation_start_date.getDate() + parseInt(rotation_length)));
        rotation_end_date = new Date(rotation_end_date.setDate(rotation_end_date.getDate() + parseInt(rotation_length)));
Rent Charter Buses Company
READ ALSO
Adding flip on hover

Adding flip on hover

I have two javascript function on for flip back and other for flip front. The flipBack and flipFront works when element is clicked.

343
How to validate form in cakephp 2.7.5 using jquery?

How to validate form in cakephp 2.7.5 using jquery?

I have EmployeesController and Employee Model,and In Employees view this is add_emp. ctp view.

356
Reset is not working when drop down with Chosen select Class

Reset is not working when drop down with Chosen select Class

this is the code snippet for dropdown,.

329