在 ASP.Net Core 中开始使用 FullCalendar 的问题答案

【问题标题】：Issue getting started with FullCalendar in ASP.Net Core在 ASP.Net Core 中开始使用 FullCalendar 的问题
【发布时间】：2019-12-30 18:24:13
【问题描述】：

出于某种原因，我真的无法为我的 ASP.Net Core 项目 Razor Page 设置 FullCalendar.io。恕我直言，文档也很差，所以我将非常感谢任何关于我应该做什么的提示。

首先，我创建了 CalendarController.cs。此时应该显示日历的View 是Index，我将控制器方法保持为空，如下所示：

public ActionResult Index()
{
    return View();
}

Index.cshtml 取自这里：https://fullcalendar.io/docs/initialize-globals

    <!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />

    <link href='fullcalendar/core/main.css' rel='stylesheet' />
    <link href='fullcalendar/daygrid/main.css' rel='stylesheet' />

    <script src='fullcalendar/core/main.js'></script>
    <script src='fullcalendar/daygrid/main.js'></script>

    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'dayGrid' ]
        });

        calendar.render();
      });

    </script>
  </head>
  <body>

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

  </body>
</html>

如果我运行我的项目并转到Calendar/Index，页面是空白的。我错过了哪一步？在getting started 页面上，他们声明必须安装一个包。我做的方式是Nu-Get Package Manager -> Install Jquery.FullCalendar - 这是错误的方式吗？我尝试在Package Manager Console 中运行此npm install --save @fullcalendar/core @fullcalendar/daygrid，但没有成功。

正如我所说，我们非常欢迎任何有关这方面的帮助。很抱歉在所有文档中发布这样的内容！我只是想不通它来自他们。

编辑：我还在控制台中收到以下警告：

C:/Users/user/source/repos/Intersection/Intersection/Views/Calendar/fullcalendar/core/main.js' 未找到。并且找不到“C:/Users/user/source/repos/Intersection/Intersection/Views/Calendar/fullcalendar/daygrid/main.js”。

【问题讨论】：

您是否在控制台上看到任何 javascript 警告或错误？
@Marie 是的 - C:/Users/user/source/repos/Intersection/Intersection/Views/Calendar/fullcalendar/core/main.js' not found. 和 'C:/Users/user/source/repos/Intersection/Intersection/Views/Calendar/fullcalendar/daygrid/main.js' not found.
我尝试通过将存档 fullcalendar-4.3.1.zip 拖放到 Views/Calendar 来导入，但出现以下错误：Could not find module 'luxon' 和 Could not find module 'moment'
根据您在问题中链接的入门页面，在手动设置时，The first step is to download and unzip a ZIP archive from the Getting Started page 我对 .net 核心项目或剃须刀页面构建管道了解不足，无法进一步提供帮助，但您的依赖项是绝对没有正确设置。

标签： c# asp.net-core fullcalendar

【解决方案1】：

我认为你的问题在这里：

<link href='fullcalendar/core/main.css' rel='stylesheet' />
    <link href='fullcalendar/daygrid/main.css' rel='stylesheet' />

    <script src='fullcalendar/core/main.js'></script>
    <script src='fullcalendar/daygrid/main.js'></script>

我不知道您的视图在哪里，但在本说明中，您告诉您要查找与您所在级别相同的脚本，这可能是错误的；因为您将拥有wwwroot 文件夹，所以类似的东西应该可以工作，这就是为什么它告诉您：“Couldnt file that file”，因为该位置没有文件：

<link href='~/fullcalendar/core/main.css' rel='stylesheet' />
    <link href='/wwwroot/yourPaht/fullcalendar/daygrid/main.css' rel='stylesheet' />

    <script src='~/wwwroot/yourPath/fullcalendar/core/main.js'></script>
    <script src='/fullcalendar/daygrid/main.js'></script>

试试这 4 种方法，然后告诉我们！！

【讨论】：

【解决方案2】：

您将 fullcalendar 的 JavaScript 和 CSS 文件放在哪里？似乎它正在此处的视图文件夹下寻找它们：

/Views/Calendar/fullcalendar/daygrid/main.js

我猜它们实际上是安装在您项目的根目录下或/content 或/scripts 文件夹或其他东西下，因此您需要为您的js 更新script 和link 标签和 css 文件指向正确的位置。

【讨论】：

正如我告诉@Marie：我尝试通过将存档 fullcalendar-4.3.1.zip 拖放到 Views/Calendar 来导入，但出现以下错误：找不到模块 'luxon' 和可能找不到模块“时刻”。更准确地说 - 我只使用包文件夹这样做。编辑：我将存档的全部内容放在正确的位置，但 could not find module 错误仍然存在

【解决方案3】：

也许你可以尝试下载libary

把js文件和css文件放到~/content或者~/script

【讨论】：