Load fullcalendar from a razor page in Blazor?

Question

trying to Load fullcalendar from a razor page in Blazor? I'm stuck. I can display the fullcalendar just fine and see the calendar in the index.html But, I want to move the div id='calendar' to a calendar.razor page inside my Blazor wasm app.

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;

    }
}
}

And I try a local main.js... Something like This.

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();
    });
});
};`

Answer 1

This was the piece I was missing: https://brianlagunas.com/using-npm-packages-in-blazor/