Vollkalender: Die Größe sich wiederholender Ereignisse, die Bereiche verwenden, kann nicht geändert werden. []

Hip Hip Array

Ich erstelle gerade einen Kalender, in dem sich wiederholende Klassen für einen Studenten für ein Universitätsprojekt angezeigt werden. Ich kann die sich wiederholenden Ereignisse im Kalender anzeigen, aber wenn ich versuche, die Größe eines Ereignisses zu ändern oder es per Drag & Drop zu verschieben, werden in der Browser-Webkonsole die folgenden Fehler angezeigt:

TypeError: this.eventInstances [0] ist undefiniert [Weitere Informationen] fullcalendar.min.js: 6: 26715

TypeError: t ist undefiniert [Weitere Informationen] fullcalendar.min.js: 8: 6813

Dies ist der JSON, der an den Kalender übergeben wird:

[{"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"}]}]

Dies ist das Javascript, das ich zum Anzeigen / Bearbeiten / Aktualisieren der Kalenderereignisse verwende:

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


    });

});

Ich kann mich irren, aber ich habe das Gefühl, dass das Problem darin besteht, dass qtip aufgrund des übergebenen Bereichswerts nicht erkennen kann, welches Ereignis im Fokus steht. Eine andere zu beachtende Sache ist, dass ich versuche, die Größe des Ereignisses zweimal zu ändern aktualisiert die Datenbank mit den neuen Werten, ändert jedoch nicht die Größe des Ereignisses im Kalender und das Ereignis wird erst im Kalender aktualisiert, wenn ich die Seite aktualisiere.

Stapelverfolgung vom 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

Ich habe meine sich wiederholenden Ereignisse auf die folgende Antwort gestützt: https://stackoverflow.com/a/29393128/5659955

Danke im Voraus!

Hip Hip Array

Wie in meinem Kommentar erwähnt, wurde gegen den Vollkalender ein Fehler beim Ändern der Größe von Ereignissen ausgelöst, für deren Start und Ende nur Zeit bleibt. github.com/fullcalendar/fullcalendar/issues/3824

Um dies zu umgehen, habe ich den Start- und Endbereich des Kalenders genommen und eine Liste aller dazwischen liegenden Daten erstellt. Ich durchlaufe dann die Liste und überprüfe, ob das Datum ein Montag (1) ist und ob es mit dem Dow-Wert in der Datenbank (1) übereinstimmt. Ich weise dann diesem Ereignis das Datum zu und füge es einem Klassenobjekt hinzu und erstelle eine Liste der Klassenobjekte.

Im Wesentlichen hat jedes Ereignis ein individuelles Datum mit derselben Start- und Endzeit. Jedes Mal, wenn die Größe eines Ereignisses geändert wird, wird das Basisereignis in der Datenbank aktualisiert, und daher werden alle Ereignisse aktualisiert. Meine Lösung ist in C #.

Tabellenstruktur:

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

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am2020-11-29

Lass mich ein paar Worte sagen

0Kommentare

LoginNach der Teilnahme an der Überprüfung

Vorheriger Beitrag:Rufen Sie zwei Funktionen onValueChange in React Native auf

TOP Liste

Artikel