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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了fullcalendar.io可以在.net core Blazor中使用吗?相关的知识,希望对你有一定的参考价值。

我尝试在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

答案

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

以上是关于fullcalendar.io可以在.net core Blazor中使用吗?的主要内容,如果未能解决你的问题,请参考以下文章

加载 fullcalendar.io 事件时出错 - 未显示数据

Fullcalendar.io在将事件属性解析为函数时出现问题

对 fullcalendar.io 使用普通的 PHP 路由 (&) 和 symfony 路由 (/)

json Fullcalendar.io

js非常强大的日历控件fullcalendar.js, 日期时间库: moment.js

FullCalendar和jquery-confirm应用