FullCalendar 不工作 MVC 5答案

【问题标题】：FullCalendar not working MVC 5FullCalendar 不工作 MVC 5
【发布时间】：2017-06-30 08:47:57
【问题描述】：

我正在尝试显示完整的日历，但没有运气。我已尝试从 nuGet 下载完整日历并包含文件但无法正常工作。

  <script src="~/Scripts/lib/jquery.min.js"></script>
    <script src="~/Scripts/lib/moment.min.js"></script>
    <script src="~/Scripts/fullcalendar.min.js"></script>
    <link href="~/Content/fullcalendar.min.css" rel="stylesheet" />


    <script src="~/Scripts/gcal.js"></script>
    <link href="~/Content/fullcalendar.print.css" rel="stylesheet" />

    <link href="~/Content/bootstrap.css" rel="stylesheet" />


    <script type="text/javascript">
        $(document).ready(function () {

            $('#calendar').fullCalendar({
            });

        });

    </script>



    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

</head>
<body>

    <div id='calendar'></div>

</body>
</html>

我也尝试了下面的代码，但也无法正常工作。我做错了什么以及如何显示完整日历？

<!DOCTYPE html>

<html>
<head>


    <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
    <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
    <script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
    <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
    <script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            defaultDate: '2014-09-12',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
        });
    });
    </script>



    <link href="~/Content/bootstrap.css" rel="stylesheet" />


    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

</head>
<body>

    <div id='calendar'></div>

</body>
</html>

在 Chrome 浏览器中检查元素

编辑 1：

我已经更改了脚本中的代码，现在没有任何错误，但仍然没有显示任何内容

<script type="text/javascript">
    var m = moment('2016-09-19');

    $('#calendar').fullCalendar({
        // put your options and callbacks here
        header: {
            left: 'title',
            center: '',
            right: 'prev,next'
        },
        weekends: false,
        weekNumbers: true,
        defaultView: 'month',
        defaultDate: m,
        events: [{
            start: '2016-09-19',
            allDay: true,
            rendering: 'background',
            backgroundColor: '#F00',
            title: 'full',
            textColor: '#000',
            className: 'event-full'
        }, {
            start: '2016-09-20',
            allDay: true,
            rendering: 'background',
            backgroundColor: '#F00',
            title: 'full',
            textColor: '#000',
            className: 'event-full'
        }],
        eventAfterRender: function (event, element, view) {
            element.append('FULL');
        },
        viewRender: function (view, element) {
            var start = new Date("2016-09-01");
            var end = new Date("2016-11-30");

            if (end < view.end) {
                $("#calendar .fc-next-button").hide();
                return false;
            } else {
                $("#calendar .fc-next-button").show();
            }

            if (view.start < start) {
                $("#calendar .fc-prev-button").hide();
                return false;
            } else {
                $("#calendar .fc-prev-button").show();
            }

        }
    });

</script>

【问题讨论】：

标签： jquery calendar fullcalendar asp.net-mvc-5

【解决方案1】：

您需要包含完整的日历 CSS 文件。从您的示例中，我只能看到 fullcalendar.print.css - 仅在将日历发送到打印机时才有效。 nuget 下载的文件中的某处应该是“fullcalendar.css”。确保将其包含在页面中，否则很可能不会正确呈现任何内容。

请参阅https://fullcalendar.io/docs/usage/ 以获取所有必需文件的非常简单的示例以及您必须包含它们的顺序。如果示例中建议的相对路径与您的解决方案中的文件位置不匹配，则显然更改它们。

【讨论】：