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

Question

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?

The cdn link is bad. Go to: cdn.jsdelivr.net/npm/fullcalendar@@5.1.0/main.min.js In a browser, and you get the following: Couldn't find the requested release version @5.1.0. — Steve
– Steve, Commented Jan 19, 2022 at 2:07
Try the cdn with only 1 @ cdn.jsdelivr.net/npm/[email protected]/main.min.js — haldo
– haldo, Commented Jan 19, 2022 at 2:27

Zhi Lv · Accepted Answer · 2022-01-19 05:42:42Z

1

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

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:

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

answered Jan 19, 2022 at 5:42

Zhi Lv

22.2k1 gold badge28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David200337 Over a year ago

Oh, I mistakenly thought that the fullCalendar function also applied for the newer versions and thought ASP.NET might didn't like the @ symbol (and read that a double @ escapes the sign). Thank you very much!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related