Search code examples
javascriptasp.net-mvcasp.net-core.net-5

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

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 class="sidebar">
        ...
    </div>

    <div class="home_content">
        @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 class="container">
    <div id="calendar">
    </div>
    <div id="fullCalModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">x</span><span class="sr-only">close</span></button>
                    <h3 id="modalTitle" class="modal-title"></h3>
                </div>
                <div id="modalBody" class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <a class="btn btn-primary" 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): Network tab screenshot

Would anyone know what's going wrong here?

Solution 
  •  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@@5.1.0/main.min.js"></script>

    First, if directly access the above fullcalendar reference, it couldn't find this version package.

    enter image description here

    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 fullcalendar document, you can see that, in Fullcalendar V5 version, we should create a FullCalendar.Calendar object to render the fullcalendar, instead of using the fullCalendar function. code like this:

    <div id="calendar">
</div>
@section Scripts {  
    <script>

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

    </script>
}

    The result as below:

    enter image description here

    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).