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>

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

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：1 put_char @ mono.js：1 写@ mono.js：1 写@ mono.js：1 doWritev @ mono.js：1 ___syscall146 @ mono.js：1 Module._mono_background_exec @ mono.js：1 pump_message @ mono.js：1 setTimeout（异步） _schedule_background_exec @ mono.js：1 Module._mono_wasm_invoke_method @ mono.js：1 callMethod @ blazor.webassembly.js：1 beginInvokeDotNetFromJS @ blazor.webassembly.js：1 l @ blazor.webassembly.js：1 e.invokeMethodAsync @ blazor.webassembly.js：1 （匿名）@ blazor.webassembly.js：1 t.dispatchEvent @ blazor.webassembly.js：1 （匿名）@ blazor.webassembly.js：1 （匿名）@ blazor.webassembly.js：1 e.onGlobalEvent @ blazor.webassembly.js：1 再显示26帧 blazor.webassembly.js：1 WASM：未处理的异常： d.printErr @ blazor.webassembly.js：1 put_char @ mono.js：1 写@ mono.js：1 写@ mono.js：1 doWritev @ mono.js：1 ___syscall146 @ mono.js：1 Module._mono_background_exec @ mono.js：1 pump_message @ mono.js：1 setTimeout（异步） _schedule_background_exec @ mono.js：1 Module._mono_wasm_invoke_method @ mono.js：1 callMethod @ blazor.webassembly.js：1 beginInvokeDotNetFromJS @ blazor.webassembly.js：1 l @ blazor.webassembly.js：1 e.invokeMethodAsync @ blazor.webassembly.js：1 （匿名）@ blazor.webassembly.js：1 t.dispatchEvent @ blazor.webassembly.js：1 （匿名）@ blazor.webassembly.js：1 （匿名）@ blazor.webassembly.js：1 e.onGlobalEvent @ blazor.webassembly.js：1 再显示26帧 blazor.webassembly.js：1 WASM：Microsoft.JSInterop.JSException：未定义$ d.printErr @ blazor.webassembly.js：1 put_char @ mono.js：1 写@ mono.js：1 写@ mono.js：1 doWritev @ mono.js：1 ___syscall146 @ mono.js：1 Module._mono_background_exec @ mono.js：1 pump_message @ mono.js：1 setTimeout（异步） _schedule_background_exec @ mono.js：1 Module._mono_wasm_invoke_method @ mono.js：1 callMethod @ blazor.webassembly.js：1 beginInvokeDotNetFromJS @ blazor.webassembly.js：1 l @ blazor.webassembly.js：1 e.invokeMethodAsync @ blazor.webassembly.js：1 （匿名）@ blazor.webassembly.js：1 t.dispatchEvent @ blazor.webassembly.js：1 （匿名）@ blazor.webassembly.js：1 （匿名）@ blazor.webassembly.js：1 e.onGlobalEvent @ blazor.webassembly.js：1 再显示26帧 blazor.webassembly.js：1 WASM：ReferenceError：未定义$ d.printErr @ blazor.webassembly.js：1 put_char @ mono.js：1 写@ mono.js：1 写@ mono.js：1 doWritev @ mono.js：1 ___syscall146 @ mono.js：1 Module._mono_background_exec @ mono.js：1 pump_message @ mono.js：1 setTimeout（异步） _schedule_background_exec @ mono.js：1 Module._mono_wasm_invoke_method @ mono.js：1 callMethod @ blazor.webassembly.js：1 beginInvokeDotNetFromJS @ blazor.webassembly.js：1 l @ blazor.webassembly.js：1 e.invokeMethodAsync @ blazor.webassembly.js：1 （匿名）@ blazor.webassembly.js：1 t.dispatchEvent @ blazor.webassembly.js：1 （匿名）@ blazor.webassembly.js：1 （匿名）@ blazor.webassembly.js：1 e.onGlobalEvent @ blazor.webassembly.js：1 再显示26帧 blazor.webassembly.js：1 WASM：在testDan（http://localhost:53863/:30:17） d.printErr @ blazor.webassembly.js：1 put_char @ mono.js：1 写@ mono.js：1 写@ mono.js：1 doWritev @ mono.js：1 ___syscall146 @ mono.js：1 Module._mono_background_exec @ mono.js：1 pump_message @ mono.js：1 setTimeout（异步） _schedule_background_exec @ mono.js：1

Answer 1

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

Answer 2

所以我的家伙，我不知道您是否仔细检查了您需要Jquery才能运行的错误。

是否可以在.net核心Blazor中使用fullcalendar.io？

2 个答案: