Question

I am a student who is trying to develop a scheduler for a certain project, but I cannot seem to get FullCalendar to work on my page. I tried using the page the guide helps you create, but that did not work, so now I am trying to use one of the demo pages provided in the FullCalendar folder that I downloaded.
I previously used VS 2015, but now switched over to VS 2017 Community but that didn't help either.
My page:

@{
ViewData["Title"] = "Schedule";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<head>
<meta charset='utf-8' />
<link href='~/fullcalendar/fullcalendar.min.css' rel='stylesheet' />
<link href='~/fullcalendar/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='~/fullcalendar/lib/moment.min.js'></script>
<script src='~/fullcalendar/lib/jquery.min.js'></script>
<script src='~/fullcalendar/fullcalendar.min.js'></script>
<script>

    $(document).ready(function () {

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek'
            },
            defaultDate: '2017-04-12',
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: [
                {
                    title: 'All Day Event',
                    start: '2017-04-01'
                },
                {
                    title: 'Long Event',
                    start: '2017-04-07',
                    end: '2017-04-10'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2017-04-09T16:00:00'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2017-04-16T16:00:00'
                },
                {
                    title: 'Conference',
                    start: '2017-04-11',
                    end: '2017-04-13'
                },
                {
                    title: 'Meeting',
                    start: '2017-04-12T10:30:00',
                    end: '2017-04-12T12:30:00'
                },
                {
                    title: 'Lunch',
                    start: '2017-04-12T12:00:00'
                },
                {
                    title: 'Meeting',
                    start: '2017-04-12T14:30:00'
                },
                {
                    title: 'Happy Hour',
                    start: '2017-04-12T17:30:00'
                },
                {
                    title: 'Dinner',
                    start: '2017-04-12T20:00:00'
                },
                {
                    title: 'Birthday Party',
                    start: '2017-04-13T07:00:00'
                },
                {
                    title: 'Click for Google',
                    url: 'http://google.com/',
                    start: '2017-04-28'
                }
            ]
        });

    });

</script>
<style>
    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }
</style>
</head>
<body>
<h2>Calendar</h2>
<div id='calendar'></div>

</body>

Thanks in advance to any helpers!

EDIT (April 26th):
I pressed F12 as suggested and saw that the console logs an error saying "Uncaught TypeError: $(...).fullCalendar is not a function".
I looked at some other posts that mentioned this issue but I could find no second mention of jquery and made sure the order of references was correct, which were the mentioned solutions in those situations. Is there anything else that can be causing this?

EDIT (April 27th): All files seem to be loading:
Loaded files in website

Answer 1

看起来布局页面再次调用jquery文件，请看这张图片。

尝试删除其中一个，并确保在fullcalendar.js之前调用jquery文件

FullCalendar - Calendar not showing (ASP.NET Core)

1 个答案: