search

danheron / Heron.MudCalendar

Calendar component for MudBlazor
MIT License
145 stars 29 forks source link

MudCalendar not displaying properly. #146

Closed TSMarcus closed 1 month ago

TSMarcus commented 1 month ago

I'm new to MudCalendar so this could be a configuration error on my part.

With that in mind, I have installed the Heron.MudCalendar 2.0.0 into my project via Nuget.

I have added... @using Heron.MudCalendar to my _Imports.razor file.

I have also added (after the calendar was not displaying properly)... <link href="_content/Heron.MudCalendar/Heron.MudCalendar.min.css" rel="stylesheet" /> and <script type="module" src="_content/Heron.MudCalendar/Heron.MudCalendar.min.js"></script> to index.html in my WASM Client www folder.

I am using Chrome Version 126.0.6478.127 (Official Build) (64-bit).

Here is a snapshot of my page.

To get started, I have only included <MudCalendar /> to the page.

@MudCalendarDisplayIssue

I have noticed that the Heron.MudCalendar.min.js file does get automatically injected without the

<script type="module" src="_content/Heron.MudCalendar/Heron.MudCalendar.min.js"></script>

in index.html. However, I must include

<link href="_content/Heron.MudCalendar/Heron.MudCalendar.min.css" rel="stylesheet" />

in index.html because the Heron.MudCalendar.min.css file does not get automatically injected.

Any help would be much appreciated.

TSMarcus commented 1 month ago

Here is a complete copy of my index.html file...

<!DOCTYPE html> <html lang="en">

<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>MyProject.Client</title> <base href="/" /> <!--<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />--> <!--<link rel="stylesheet" href="css/app.css" />--> <link rel="icon" type="image/png" href="favicon.png" /> <link href="MyProject.styles.css" rel="stylesheet" /> <link href="manifest.webmanifest" rel="manifest" /> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /> <link href="_content/Heron.MudCalendar/Heron.MudCalendar.min.css" rel="stylesheet" /> <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" /> <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" /> </head>

<body> <div id="app"> <!--<svg class="loading-progress"> <circle r="40%" cx="50%" cy="50%" /> <circle r="40%" cx="50%" cy="50%" /> </svg> <div class="loading-progress-text"></div>--> </div>

<div id="blazor-error-ui"> An unhandled error has occurred. <a href="" class="reload">Reload</a> <a class="dismiss">🗙</a> </div> <script src="_content/MudBlazor/MudBlazor.min.js"></script> <script src="_framework/blazor.webassembly.js"></script> <script type="module" src="_content/Heron.MudCalendar/Heron.MudCalendar.min.js"></script> <script>navigator.serviceWorker.register('service-worker.js');</script> </body>

</html>

TSMarcus commented 1 month ago

Here is my TestCalendar.razor file...

@page "/TestCalendar" <MudCalendar />

danheron commented 1 month ago

It looks like the CSS file is not being loaded. The link you have added to Heron.MudCalendar.min.css is correct.

However it looks like you are creating a PWA. Is it possible it's loading an offline version that was downloaded before you added the link?

TSMarcus commented 1 month ago

Thanks Dan. That was the issue. Everything looks good. Now off to find a solution that will cache bust the PWA.