fullcalendar.io可以在.net core Blazor中使用吗？

Question

我尝试在Blazor Webassembly页面中使用FullCalendar。任何人都知道如何在Blazor中使用FullCalendar ???有人可以帮助我吗？

我将FullCalendar包含在libman.json中

   {
      "library": "@fullcalendar/core",
      "provider": "unpkg",
      "destination": "wwwroot/lib/fullCalendar"
    }

在wwwroot / index.html中

   <script src="_framework/blazor.webassembly.js"></script>
   <script src="exampleJsInterop.js"></script>

wwwroot文件夹中的我的js文件“ exampleJsInterop.js”

window.exampleJsFunctions = {

    showPrompt: function (text) {
        return prompt(text, 'Type your name here');
    },
    displayWelcome: function (welcomeMessage) {
        document.getElementById('welcome').innerText = welcomeMessage;
    },

    calendar: function () {
        document.getElementById("#calendar").fullCalendar({
            schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
            editable: false,
            allDaySlot: true,
            eventLimit: true,
            axisFormat: 'HH:mm',
            slotLabelFormat: 'HH:mm',
            aspectRatio: 2,
            header: {
                left: 'today prev,next',
                center: 'title',
                right: 'month '
            },
            //defaultView: 'timelineDay',
            selectable: true,
        });
    }

};

剃刀页面

@page "/fullCalendar"
@inject IJSRuntime JsRuntime;

<h1>FullCalendar</h1>

<button type="button" class="btn btn-primary" @onclick="test">
    Bouton test
</button>

<div class="container">
    <div id='calendar'></div>
</div>

@code {
      private async void test() {
        await JsRuntime.InvokeVoidAsync("exampleJsFunctions.calendar");
    }
}

代码有什么问题？

错误：

（（Microsoft.JSInterop.JSException：未定义$）main.js：1加载资源失败：服务器响应状态为404（未找到）blazor.webassembly.js：1调试热键：Shift + Alt + D（当应用程序具有焦点时）favicon.ico：1无法加载资源：服务器以状态404（未找到）响应blazor.webassembly.js：1 WASM：d.printErr @ blazor.webassembly.js：1put_char @ mono.js：1写@ mono.js：1写@ mono.js：1doWritev @ mono.js：1___syscall146 @ mono.js：1Module._mono_background_exec @ mono.js：1pump_message @ mono.js：1setTimeout（异步）_schedule_background_exec @ mono.js：1Module._mono_wasm_invoke_method @ mono.js：1callMethod @ blazor.webassembly.js：1beginInvokeDotNetFromJS @ blazor.webassembly.js：1l @ blazor.webassembly.js：1e.invokeMethodAsync @ blazor.webassembly.js：1（匿名）@ blazor.webassembly.js：1t.dispatchEvent @ blazor.webassembly.js：1（匿名）@ blazor.webassembly.js：1（匿名）@ blazor.webassembly.js：1e.onGlobalEvent @ blazor.webassembly.js：1再显示26帧blazor.webassembly.js：1 WASM：未处理的异常：d.printErr @ blazor.webassembly.js：1put_char @ mono.js：1写@ mono.js：1写@ mono.js：1doWritev @ mono.js：1___syscall146 @ mono.js：1Module._mono_background_exec @ mono.js：1pump_message @ mono.js：1setTimeout（异步）_schedule_background_exec @ mono.js：1Module._mono_wasm_invoke_method @ mono.js：1callMethod @ blazor.webassembly.js：1beginInvokeDotNetFromJS @ blazor.webassembly.js：1l @ blazor.webassembly.js：1e.invokeMethodAsync @ blazor.webassembly.js：1（匿名）@ blazor.webassembly.js：1t.dispatchEvent @ blazor.webassembly.js：1（匿名）@ blazor.webassembly.js：1（匿名）@ blazor.webassembly.js：1e.onGlobalEvent @ blazor.webassembly.js：1再显示26帧blazor.webassembly.js：1 WASM：Microsoft.JSInterop.JSException：$不是已定义d.printErr @ blazor.webassembly.js：1put_char @ mono.js：1写@ mono.js：1写@ mono.js：1doWritev @ mono.js：1___syscall146 @ mono.js：1Module._mono_background_exec @ mono.js：1pump_message @ mono.js：1setTimeout（异步）_schedule_background_exec @ mono.js：1Module._mono_wasm_invoke_method @ mono.js：1callMethod @ blazor.webassembly.js：1beginInvokeDotNetFromJS @ blazor.webassembly.js：1l @ blazor.webassembly.js：1e.invokeMethodAsync @ blazor.webassembly.js：1（匿名）@ blazor.webassembly.js：1t.dispatchEvent @ blazor.webassembly.js：1（匿名）@ blazor.webassembly.js：1（匿名）@ blazor.webassembly.js：1e.onGlobalEvent @ blazor.webassembly.js：1再显示26帧blazor.webassembly.js：1 WASM：ReferenceError：未定义$d.printErr @ blazor.webassembly.js：1put_char @ mono.js：1写@ mono.js：1写@ mono.js：1doWritev @ mono.js：1___syscall146 @ mono.js：1Module._mono_background_exec @ mono.js：1pump_message @ mono.js：1setTimeout（异步）_schedule_background_exec @ mono.js：1Module._mono_wasm_invoke_method @ mono.js：1callMethod @ blazor.webassembly.js：1beginInvokeDotNetFromJS @ blazor.webassembly.js：1l @ blazor.webassembly.js：1e.invokeMethodAsync @ blazor.webassembly.js：1（匿名）@ blazor.webassembly.js：1t.dispatchEvent @ blazor.webassembly.js：1（匿名）@ blazor.webassembly.js：1（匿名）@ blazor.webassembly.js：1e.onGlobalEvent @ blazor.webassembly.js：1再显示26帧blazor.webassembly.js：1 WASM：在testDan（http://localhost:53863/:30:17）d.printErr @ blazor.webassembly.js：1put_char @ mono.js：1写@ mono.js：1写@ mono.js：1doWritev @ mono.js：1___syscall146 @ mono.js：1Module._mono_background_exec @ mono.js：1pump_message @ mono.js：1setTimeout（异步）_schedule_background_exec @ mono.js：1

Answer 1

看来您需要加载一个jquery库。查看calender.io文档，看看是否需要jquery。这就是为什么您在“ $”上遇到错误的原因。