从 Blazor 中的剃须刀页面加载完整日历?
Posted
技术标签:
【中文标题】从 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/
【讨论】:
以上是关于从 Blazor 中的剃须刀页面加载完整日历?的主要内容,如果未能解决你的问题,请参考以下文章
从 Blazor 中的页面组件调用 MainLayout 中的方法