从 Blazor 中的剃须刀页面加载完整日历？

Posted 2023-02-19

【中文标题】从 Blazor 中的剃须刀页面加载完整日历？

【英文标题】：Load fullcalendar from a razor page in Blazor?

【发布时间】：2022-01-10 01:43:43

【问题描述】：

试图从 Blazor 的剃须刀页面加载完整日历？我被困住了。 我可以很好地显示完整日历并在 index.html 中查看日历 但是，我想将 div id='calendar' 移动到我的 Blazor wasm 应用程序中的 calendar.razor 页面。

index.html

<title>FullCalendar Test Page</title>

<base href="/" />
<link href="webmanifest.json" rel="webmanifest" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="icon-512.png" rel="apple-touch-icon" sizes="512x512" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.10.1/main.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.10.1/main.min.js"></script>


<!--************OR I can use This***********
<link href="css/main.css" rel="stylesheet" />
<script src="js/main.js"></script>-->
<div id="app">Loading.......</div>
<div id='calendar'></div>
<div id="blazor-error-ui">
    <a href="" class="reload">Reload</a>
    <a class="dismiss">????</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>

<script>
    document.addEventListener('DOMContentLoaded', function () 
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, 
            schedulerLicenseKey: "xxxx-xxx-xxxxxxxx",
            initialView: 'dayGridMonth',
            events: [
                 id: '1', resourceId: 'b', start: '2021-12-02T02:00:00', end: '2021-12-02T02:00:00', title: 'event 1' ,
                 id: '2', resourceId: 'c', start: '2021-12-02T05:00:00', end: '2021-12-02T22:00:00', title: 'event 2' ,
                 id: '3', resourceId: 'd', start: '2021-12-06', end: '2021-12-08', title: 'event 3' ,
                 id: '4', resourceId: 'e', start: '2021-12-02T03:00:00', end: '2021-12-02T08:00:00', title: 'event 4' ,
                 id: '5', resourceId: 'f', start: '2021-12-02T00:30:00', end: '2021-12-02T02:30:00', title: 'event 5' 
            ]
        );

        calendar.render();
    );
</script>

index.razor
`@page "/"

@Inject Microsoft.JSInterop.IJSRuntime jsRuntime;

<div id='calendar'></div>
@code
protected async override Task OnAfterRenderAsync(bool firstRender)

if (firstRender)

await jsRuntime.InvokeAsync("calendar");
//I know the line above is not correct.... Just as close as I can get..
firstRender = false;

    

我尝试使用本地 main.js... 类似这样的东西。

main.js

window.fullcalendar = () => 
$(function () 

    document.addEventListener('DOMContentLoaded', function () 
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, 
            schedulerLicenseKey: "xxxx-xxx-xxxxxxxx",
            initialView: 'dayGridMonth',
            events: [
                 id: '1', resourceId: 'b', start: '2021-12-02T02:00:00', end: '2021-12-02T02:00:00', title: 'event 1' ,
                 id: '2', resourceId: 'c', start: '2021-12-02T05:00:00', end: '2021-12-02T22:00:00', title: 'event 2' ,
                 id: '3', resourceId: 'd', start: '2021-12-06', end: '2021-12-08', title: 'event 3' ,
                 id: '4', resourceId: 'e', start: '2021-12-02T03:00:00', end: '2021-12-02T08:00:00', title: 'event 4' ,
                 id: '5', resourceId: 'f', start: '2021-12-02T00:30:00', end: '2021-12-02T02:30:00', title: 'event 5' 
            ]
        );

        calendar.render();
    );
);
;`

【问题讨论】：

全日历将从 index.html 中显示...但是，我无法从 Razor 页面显示它。

【参考方案1】：

这是我错过的部分：https://brianlagunas.com/using-npm-packages-in-blazor/