Uncaught TypeError: $(...).fullCalendar is not a function despite adding alll the library

Question

我正在尝试使用 fullcalendar library 渲染日历。下面是包含所有脚本 declare

的代码

这是我的代码

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css">


<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    
    <script>
        $(document).ready(function () {
            var eventList = [];
            $.ajax({
                type: "GET",
                url: "/home/GetEvents",
                success: function (data) {
                    @*console.log("data ", data);*@
                    $.each(data, function (i, content) {
 
                        eventList.push({
                            title: content.Subject,
                            description: content.Description,
                            creationDate: moment(content.CreationDate),
                            modifiedDate: content.ModifiedDate != null ? moment(content.ModifiedDate) : "",
                            color: content.Color,
                            isFullday: content.isFullday

                        });
                    })

                    GenerateCalendar(eventList);
                },

                error: function (error) {
                    console.log("unable to generate calendar, the error is: ", error);
                }
            })


            function GenerateCalendar(events) {
                // do not create another calendar if one exist
                $('#calender').fullCalendar('destroy');
                $("#calender").fullCalendar({
                    contentHeight: 400,
                    defaultDate: new Date(),
                    timeFormat: "h(:mm)a",
                    header: {
                        left: "previous, next today",
                        center: "title",
                        right: "month, basicWeek, basicDay, agenda"
                    },
                    eventLimit: true,
                    eventColor: "#378006",
                    events: events
                })
            }
        })
    </script>

我已经从这个 link 添加了所有必要的脚本，但是当我尝试使用库中的函数时，出现错误。

任何建议表示赞赏

Answer 1

这是link的解决方案，我希望这对以后的人有所帮助

function GenerateCalendar(events) {
 var calendarEl = document.getElementById('calender');
 var calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridMonth'
 });
 calendar.render();
}

Uncaught TypeError: $(...).fullCalendar is not a function despite adding alll the library

Uncaught TypeError: $(...).fullCalendar is not a function despite adding alll the library

html

fullcalendar