Fullcalendar: Unable to resize repeating events that use ranges[]

Question

I am currently creating a calendar that will display repeating classes for a student for a university project. I am able to display the repeating events on the calendar, but whenever I attempt to resize or drag and drop an event I am getting the following errors in the browser web console:

TypeError: this.eventInstances[0] is undefined [Learn More] fullcalendar.min.js:6:26715

TypeError: t is undefined [Learn More] fullcalendar.min.js:8:6813

This is the JSON being passed into the calendar:

[{"id":22,"title":"Class: CSC3047\n Location: DKB","start":"12:00","end":"14:00",
"allDay":false,"description":"Mr Jack Dell","dow":[1],"ranges":[{"start":"2018-03-12",
"end":"2018-10-15"}]},{"id":23,"title":"Class: CSC3056\n Location: Ashby","start":"09:00",
"end":"11:00","allDay":false,"description":"Narelle Allen","dow":[3],
"ranges":[{"start":"2018-03-12","end":"2018-10-15"}]}]

This is the javascript I am using to display/edit/update the calendar events:

var currentUpdateEvent;
var addStartDate;
var addEndDate;
var globalAllDay;

function updateEvent(event, element) {
    //alert(event.description);

    if ($(this).data("qtip")) $(this).qtip("destroy");

    currentUpdateEvent = event;

    $('#updatedialog').dialog('open');

    $("#eventName").val(event.title);
    $("#eventDesc").val(event.description);
    $("#eventId").val(event.id);
    $("#eventStart").text("" + event.start.toLocaleString());

    if (event.end === null) {
        $("#eventEnd").text("");
    }
    else {
        $("#eventEnd").text("" + event.end.toLocaleString());
    }

}

function updateSuccess(updateResult) {
    //alert(updateResult);
}

function deleteSuccess(deleteResult) {
    //alert(deleteResult);
}

function addSuccess(addResult) {
    // if addresult is -1, means event was not added
    //    alert("added key: " + addResult);

    if (addResult != -1) {
        $('#calendar').fullCalendar('renderEvent',
            {
                title: $("#addEventName").val(),
                start: addStartDate,
                end: addEndDate,
                id: addResult,
                description: $("#addEventDesc").val(),
                allDay: globalAllDay
            },
            true // make the event "stick"
        );


        $('#calendar').fullCalendar('unselect');
    }

}

function UpdateTimeSuccess(updateResult) {
    //alert(updateResult);
}


function selectDate(start, end, allDay) {

    $('#addDialog').dialog('open');


    $("#addEventStartDate").text("" + start.toLocaleString());
    $("#addEventEndDate").text("" + end.toLocaleString());


    addStartDate = start;
    addEndDate = end;
    globalAllDay = allDay;
    //alert(allDay);

}

function updateEventOnDropResize(event, allDay) {

    //alert("allday: " + allDay);
    var eventToUpdate = {
        id: event.id,
        start: event.start

    };

    if (allDay) {
        eventToUpdate.start.setHours(0, 0, 0);

    }

    if (event.end === null) {
        eventToUpdate.end = eventToUpdate.start;

    }
    else {
        eventToUpdate.end = event.end;
        if (allDay) {
            eventToUpdate.end.setHours(0, 0, 0);
        }
    }

    eventToUpdate.start = eventToUpdate.start.format("DD-MM-YYYY hh:mm A");
    eventToUpdate.end = eventToUpdate.end.format("DD-MM-YYYY hh:mm A");

    PageMethods.UpdateEventTime(eventToUpdate, UpdateTimeSuccess);
    $('#calendar').fullCalendar('refetchEvents');

}

function eventDropped(event, dayDelta, minuteDelta, revertFunc) {

    updateEventOnDropResize(event);



}

function eventResized(event, dayDelta, minuteDelta, revertFuncc) {

    updateEventOnDropResize(event);

}

function checkForSpecialChars(stringToCheck) {
    var pattern = /[^A-Za-z0-9 ]/;
    return pattern.test(stringToCheck);
}


$(document).ready(function () {

    // update Dialog
    $('#updatedialog').dialog({
        autoOpen: false,
        modal: true,
        width: 470,
        buttons: {
            "update": function () {
                //alert(currentUpdateEvent.title);
                var eventToUpdate = {
                    id: currentUpdateEvent.id,
                    title: $("#eventName").val(),
                    description: $("#eventDesc").val()
                };

                if (checkForSpecialChars(eventToUpdate.title) || checkForSpecialChars(eventToUpdate.description)) {
                    alert("please enter characters: A to Z, a to z, 0 to 9, spaces");
                }
                else {
                    PageMethods.UpdateEvent(eventToUpdate, updateSuccess);
                    $(this).dialog("close");

                    currentUpdateEvent.title = $("#eventName").val();
                    currentUpdateEvent.description = $("#eventDesc").val();
                    $('#calendar').fullCalendar('updateEvent', currentUpdateEvent);
                }

            },
            "delete": function () {

                if (confirm("do you really want to delete this event?")) {

                    PageMethods.deleteEvent($("#eventId").val(), deleteSuccess);
                    $(this).dialog("close");
                    $('#calendar').fullCalendar('removeEvents', $("#eventId").val());
                }

            }

        }
    });

    //add dialog
    $('#addDialog').dialog({
        autoOpen: false,
        width: 470,
        buttons: {
            "Add": function () {

                //alert("sent:" + addStartDate.format("dd-MM-yyyy hh:mm:ss tt") + "==" + addStartDate.toLocaleString());
                var eventToAdd = {
                    title: $("#addEventName").val(),
                    description: $("#addEventDesc").val(),
                    start: addStartDate.format("DD-MM-YYYY hh:mm A"),
                    end: addEndDate.format("DD-MM-YYYY hh:mm A")

                };

                if (checkForSpecialChars(eventToAdd.title) || checkForSpecialChars(eventToAdd.description)) {
                    alert("please enter characters: A to Z, a to z, 0 to 9, spaces");
                }
                else {
                    //alert("sending " + eventToAdd.title);

                    PageMethods.addEvent(eventToAdd, addSuccess);
                    $(this).dialog("close");
                }

            }

        }
    });

    // page is now ready, initialize the calendar...

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar({
        // put your options and callbacks here
        header:
        {
            left: 'title',
            center: '',
            right: 'month,agendaDay,agendaWeek, prev,next'
        },
        height: 490,
        //contentHeight: auto,
        titleFormat: 'MMMM D YYYY',
        columnFormat: 'ddd D/M',
        defaultView: 'agendaWeek',
        handleWindowResize: true,
        allDaySlot: true,
        minTime: '09:00:00',
        maxTime: '18:00:00',
        slotLabelFormat: 'h(:mm)a',
        slotLabelInterval: '01:00:00',
        firstDay: 1,
        weekends: false,
        hiddenDays: [6, 7],
        eventClick: updateEvent,
        selectable: true,
        selectHelper: true,
        select: selectDate,
        editable: true,
        eventDrop: eventDropped,
        eventResize: eventResized,
        events: {
            url: 'JsonResponse.ashx',
            color: 'blue',
            error: function () {
                alert('Error while Getting events!');
            }
        },
        eventRender: function (event, element) {
            //alert(event.title);
            element.qtip({
                content: event.description,
                position: { corner: { tooltip: 'bottomLeft', target: 'topRight' } },
                style: {
                    border: {
                        width: 1,
                        radius: 3,
                        color: '#0000ff'

                    },
                    padding: 10,
                    textAlign: 'center',
                    tip: true, // Give it a speech bubble tip with automatic corner detection
                    name: 'cream' // Style it according to the preset 'cream' style
                }

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


    });

});

I may be wrong, but I have a feeling that the issue is that qtip is not able to tell which event is in focus due to the ranges value being passed in. Another thing to note is that if I attempt to resize the event twice it will update the database with the new values but will not actually resize the event on the calendar and the event will not update on the calendar until I refresh the page.

Stack trace from browser:

TypeError: this.eventInstances[0] is undefined
[Learn More]
fullcalendar.min.js:6:26715
s</t.prototype.getEventDef
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:6:26715
d</t.prototype.isEventInstanceGroupAllowed
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:9:10438
l</e.prototype.isEventInstanceGroupAllowed
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:7:13696
hitOver
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:10:24171
a</t.prototype.trigger
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:8:15714
l</e.prototype.handleHitOver
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:6:28967
l</e.prototype.handleDragStart
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:6:28573
a</t.prototype.startDrag
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:8:14363
a</t.prototype.handleDistanceSurpassed
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:8:15289
a</t.prototype.handleMove
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:8:14610
a</t.prototype.handleMouseMove
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:8:15474
d
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:3854
e
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:6:16679
dispatch
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:12392
add/r.handle
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:9156
trigger
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:11571
triggerHandler
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:19064
s</e.prototype.trigger
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:6:16925
u</t.prototype.handleMouseMove
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:6:20528
d
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:3854
dispatch
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:12392
add/r.handle
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:9156
TypeError: t is undefined
[Learn More]
fullcalendar.min.js:8:6813
o</t.prototype.buildNewDateProfile
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:8:6813
l</t.prototype.mutateSingle
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:7:6026
f</t.prototype.mutateEventsWithId/<
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:11:28483
forEach self-hosted:271:13 f</t.prototype.mutateEventsWithId
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:11:28434
p</e.prototype.reportEventResize
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:7:22052
interactionEnd
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:10:24614
a</t.prototype.trigger
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:8:15714
a</t.prototype.handleInteractionEnd
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:8:13682
l</e.prototype.handleInteractionEnd
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:6:29260
a</t.prototype.endInteraction
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:8:13574
d
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:3854
e
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:6:16679
dispatch
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:12392
add/r.handle
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:9156
trigger
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:11571
triggerHandler
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:19064
s</e.prototype.trigger
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:6:16925
u</t.prototype.handleMouseUp
http://kmartin41.public.cs.qub.ac.uk/QSIS/js/fullcalendar.min.js:6:20621
d
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:3854
dispatch
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:12392
add/r.handle
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:9156

I have based my repeating events off the following answer: https://stackoverflow.com/a/29393128/5659955

Thanks in advance!

Answer 1

As mentioned in my comment there was a bug raised against fullcalendar for resizing events that only have a time for their start and end. github.com/fullcalendar/fullcalendar/issues/3824

To get around this I have taken the calendar start and end range and created a list of all the dates in-between. I then loop over the list and check if the date is a monday(1) and if it matches the dow value in the db (1). I then assign the date to that event and add it to a class object and make a list of the class objects.

Essentially each event has an individual date assigned with the same start and end time. Any time and event is resized it will update the base event in the database and therefore all events are updated. My solution is in C#.

Table structure:

id  event_id  startTime  endTime  startDate             endDate                 dow
2   22        12PM       01PM     3/12/2018 12:00:00 AM 10/15/2018 12:00:00 AM  1

while (reader.Read())
        {

            int dow;
            DateTime startTime;
            DateTime endTime;
            DateTime newstartdate;
            DateTime newenddate;

            var datelist = new List<DateTime>();
            DateTime tmpdate;

            for (int i = 0; i < end.Subtract(start).Days; i++)
            {
                tmpdate = start.AddDays(i);
                datelist.Add(tmpdate);
            }

            startTime = (DateTime)reader["startTime"];
            endTime = (DateTime)reader["endTime"];
            dow = (int)reader["dow"];

            foreach (DateTime day in datelist.ToList())
            {
                if((int)day.DayOfWeek == dow)
                {
                    CalendarEvent cevent = new CalendarEvent();

                    newstartdate = new DateTime(day.Year, day.Month, day.Day, startTime.Hour, startTime.Minute, 0);
                    newenddate = new DateTime(day.Year, day.Month, day.Day, endTime.Hour, endTime.Minute, 0);

                    cevent.id = (int)reader["event_id"];
                    cevent.title = (string)reader["ModuleName"];
                    cevent.description = (string)reader["Lecturer"];
                    cevent.start = newstartdate;
                    cevent.end = newenddate;
                    DateTime startDate = (DateTime)reader["startDate"];
                    ceventlist.start = startDate.ToString("yyyy-MM-dd");
                    DateTime endDate = (DateTime)reader["EndDate"];
                    ceventlist.end = endDate.ToString("yyyy-MM-dd");
                    datelist.Remove(day);



                    cevent.ranges = new List<CalendarEventList>();
                    cevent.ranges.Add(ceventlist);
                    events.Add(cevent);
                }
            }