fullcalendar:未捕获的类型错误:无法读取 null 的属性“nodeName”

时间:2021-02-12 17:43:08

标签: javascript php jquery calendar fullcalendar

经过 3 小时的搜索,我找不到问题的答案。

我已经创建了一个 fullcalendar V3,现在我要更新到 V5。我认为这会很容易,但是,不,对于我的实际水平来说根本不容易。 (我 4 个月就开始写代码了,我真的是个菜鸟)。

所以,有效的代码:

<head>
  <script>
        $(document).ready(function() {

            var calendar = $('#calendar').fullCalendar({
                locale: 'fr',
                defaultView: 'listWeek',
                editable: true,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay,listWeek'
                },
                events: 'load.php',
                eventColor: 'red',
                selectable: true,
                selectHelper: true,

                //try to make data request from input
                //see documents in Montauban/Calendar and try to modify this lignes

                select: function(start, end, allDay) {
                    var title = prompt("Entrez l'evenement");
                    if (title) {
                        var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
                        var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
                        $.ajax({
                            url: "insert.php",
                            type: "POST",
                            data: {
                                title: title,
                                start: start,
                                end: end
                            },
                            success: function() {
                                calendar.fullCalendar('refetchEvents');
                                alert("Evenement créé avec succès");
                            }
                        })
                    }
                },
                editable: true,
                eventResize: function(event) {
                    var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                    var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
                    var title = event.title;
                    var id = event.id;
                    $.ajax({
                        url: "update.php",
                        type: "POST",
                        data: {
                            title: title,
                            start: start,
                            end: end,
                            id: id
                        },
                        success: function() {
                            calendar.fullCalendar('refetchEvents');
                            alert('Evenement mis a jour');
                        }
                    })
                },

                eventDrop: function(event) {
                    var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                    var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
                    var title = event.title;
                    var id = event.id;
                    $.ajax({
                        url: "update.php",
                        type: "POST",
                        data: {
                            title: title,
                            start: start,
                            end: end,
                            id: id
                        },
                        success: function() {
                            calendar.fullCalendar('refetchEvents');
                            alert("Evenement mis a jour");
                        }
                    });
                },

                eventClick: function(event) {
                    if (confirm("Êtes-sur sûr de vouloir supprimer?")) {
                        var id = event.id;
                        $.ajax({
                            url: "delete.php",
                            type: "POST",
                            data: {
                                id: id
                            },
                            success: function() {
                                calendar.fullCalendar('refetchEvents');
                                alert("Evenement supprimé");
                            }
                        })
                    }
                },

            });
        });
    </script>
</head>

以及不工作的代码出现以下错误:

未捕获的类型错误:无法读取 null 的属性“nodeName”

Uncaught TypeError: calendar.FullCalendar is not a function at Object.success ((index):106) at c (jquery.min.js:2)at Object.fireWith [as resolveWith] (jquery.min .js:2)at l (jquery.min.js:2)at XMLHttpRequest。 (jquery.min.js:2)

<head>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
         
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'fr',
                editable: true,
                themeSystem: 'bootstrap',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                events: 'load.php',
                eventColor: 'red',
                selectable: true,
                editable: true,
                eventResize: function(event) {
                    var start = FullCalendar.formatDate(event.start, {
                        month: "long",
                        year: "numeric",
                        day: 'numeric',
                        locale: 'fr',

                    });
                    var end = FullCalendar.formatDate(event.end, {
                        month: "long",
                        year: "numeric",
                        day: 'numeric',
                        locale: 'fr',

                    });
                    var title = event.title;
                    var id = event.id;
                    console.log('hey')
                    $.ajax({
                        url: "update.php",
                        type: "POST",
                        data: {
                            title: title,
                            start: start,
                            end: end,
                            id: id
                        },
                        success: function() {
                            calendar.FullCalendar('refetchEvents');
                            alert('Evenement mis a jour');
                        }
                    })
                },
                eventDrop: function(event) {
                    var start = FullCalendar.formatDate(event.start, {
                        month: "long",
                        year: "numeric",
                        day: 'numeric',
                        locale: 'fr',

                    });
                    var end = FullCalendar.formatDate(event.end, {
                        month: "long",
                        year: "numeric",
                        day: 'numeric',
                        locale: 'fr',

                    });
                    var title = event.title;
                    var id = event.id;
                    $.ajax({
                        url: "update.php",
                        type: "POST",
                        data: {
                            title: title,
                            start: start,
                            end: end,
                            id: id
                        },
                        success: function() {
                            calendar.FullCalendar('refetchEvents');
                            alert("Evenement mis a jour");
                        }
                    });
                },
                eventClick: function(event) {
                    if (confirm("Êtes-sur sûr de vouloir supprimer?")) {
                        var id = event.id;
                        $.ajax({
                            url: "delete.php",
                            type: "POST",
                            data: {
                                id: id
                            },
                            success: function() {
                                calendar.FullCalendar('refetchEvents');
                                alert("Evenement supprimé");
                            }
                        })
                    }
                },
            });
            calendar.render();
        });
    </script>
</head>

在第一个示例(fulcalendar V3)中,当我们“删除事件,删除事件”时,一切正常,数据库更新。在第二个示例(fullcalendar V5)中,我们可以单击并拖放到事件中,但数据库并未使用新信息进行更新。

你能帮我吗?

抱歉我的英语不好。 :)

0 个答案:

没有答案