ASP.NET Core MVC - Javascript library loads but its functions aren't recognized-CodePudding

I am creating an ASP.NET Core MVC application (.NET version 5) where I am trying to use a Javascript library called FullCalendar. I added the library's Javascript using a CDN link in a script tag at the bottom of the app's layout (see _Layout.cshtml) and linked the library's stylesheet (also using a CDN).

_Layout.cshtml:

@using Microsoft.AspNetCore.Identity
@using Infrastructure
@inject UserManager<ApplicationUser> UserMananager;

@{
    var user = await UserMananager.GetUserAsync(User);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - App</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@@5.1.0/main.min.css">
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <div >
        ...
    </div>

    <div >
        @RenderBody()
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@@5.1.0/main.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

I use the library in one of my razor pages like this:

Index.cshtml:

@section Scripts {
    <script>
        $(document).ready(function() {    
            $("#calendar").fullCalendar({ // This function is not recognized
                header: {
                    left: "",
                    center: "prev title next",
                    right: ""
                },
                eventClick: function(event, jsEvent, view) {
                    $("#modalTitle").html(event.title);
                    $("#modalBody").html(event.description);
                    $("#eventUrl").attr("href", event.url);
                    $("#fullCalModal").modal();
                    return false;
                },
                events: "@Url.Action("GetAppointments", "Appointment")"
            })
        })
    </script>
}

<div >
    <div id="calendar">
    </div>
    <div id="fullCalModal" >
        <div >
            <div >
                <div >
                    <button type="button"  data-dismiss="modal"><span aria-hidden="true">x</span><span >close</span></button>
                    <h3 id="modalTitle" ></h3>
                </div>
                <div id="modalBody" >

                </div>
                <div >
                    <button type="button"  data-dismiss="modal">Close</button>
                    <a  id="eventUrl" target="_blank">Event Page</a>
                </div>
            </div>
        </div>
    </div>
</div>

However, when I open the page the following error pops up in the console:

Uncaught TypeError: $(...).fullCalendar is not a function

I looked at the network tab and the FullCalendar library seems to load just fine and the jQuery library to loads before the FullCalendar library (as it should):

So, you could try to use the 5.10.1 version fullcalendar reference, like this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>

Second, if you check the

For the fullCalendar function, this might apply to the previous version fullCalendar, like this sample(it using fullCalendar 3.10.0 version and the fullCalendar function, if you add the JS reference and copy the code to Asp.net core application, it also works well).