时间戳

首页 > 解决方案 > fullcalendar：未捕获的 TypeError：无法读取 null 的属性“nodeName”

javascript - fullcalendar：未捕获的 TypeError：无法读取 null 的属性“nodeName”

问题描述

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

我已经创建了一个完整的日历 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”

未捕获的类型错误：calendar.FullCalendar 不是 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) 在 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）中，我们可以单击并拖放事件，但数据库不会使用新信息更新。

你能帮帮我吗？

对不起，我的英语不好。:)

标签： javascriptphpjquerycalendarfullcalendar

解决方案

推荐阅读